用VuePress來搭建一個極簡的靜態(tài)網(wǎng)站

ky0ncheng 發(fā)布于2019-08-02 14:09 / 1663人閱讀

摘要：馨客棧前端導(dǎo)航享受的開發(fā)體驗，在中使用組件，同時可以使用來開發(fā)自定義主題。馨客棧每日分享為每個頁面預(yù)渲染生成靜態(tài)的，同時在頁面被加載的時候，將作為運(yùn)行。

VuePress學(xué)習(xí)

全局安裝前我們需要Git和node這兩個軟件，關(guān)于怎么安裝可以我之前hexo的視頻教程

假如這兩個都沒有安裝好，那么下面就不需要看了哈，棧友們

全局安裝

首先我們先全局安裝一下

npm stall -g vuepress    # 或者  yarn global add vuepress

這里等待安裝完成后，我們在命令行輸入 vuepress或者輸入vuepress -V可以看到

vuepress
Usage: vuepress  [options]
Options:
  -V, --version                output the version number
  -h, --help                   output usage information
Commands:
  dev [options] [targetDir]    start development server
  build [options] [targetDir]  build dir as static site
  eject [targetDir]            copy the default theme into .vuepress/theme for customization.
  Run vuepress  --help for detailed usage of given command.

vuepress -V
0.14.8

目錄結(jié)構(gòu)

好，安裝成功后，我們先來了解一下vuepress的目錄結(jié)構(gòu)

首先我們先新建一個項目，項目名為 “vuepress” ，然后我們進(jìn)入到這個文件夾,我們在這個文件夾的空白處右鍵Git Bash Here，我們會看到一個黑底的命令工具，上面的全局安裝也是可以在這里來安裝和查看版本號的，這里不多說了，直接輸入下面的命令哈

我們先輸入一行命令，生成package.json文件

npm init -y

回車后，我們可以看到

{
  "name": "vpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后你回到vuepress文件夾內(nèi)，本來是空的文件夾，現(xiàn)在多出來一個package.json文件

開始寫作 新建README.md文件

在命令框輸入

echo "# Hello VuePress!" > docs/README.md

輸入完后，還是回到vuepress文件夾內(nèi)，我們可以看到多出來一個docs的文件夾里面有一個README.md文件，打開這個文件可以看到有Hello VuePress的字樣

運(yùn)行測試一下

在項目根目錄的命令行輸入

vuepress dev docs

 VuePress dev server listening at http://localhost:8080/

我們在瀏覽器打開 http://localhost:8080/ 可以看到一個很簡潔的頁面

裝飾首頁 首頁配置

我們來編輯一下docs目錄下的README.md文件

---
home: true
heroImage: /mackxin.png
heroText: 馨客棧
tagline: 關(guān)注分享，關(guān)注導(dǎo)航，關(guān)注馨客棧
actionText: 每日更新 →
actionLink: /fuli/
features:
- title: 馨客棧導(dǎo)航
  details: 以 Markdown 為中心的項目結(jié)構(gòu)，以最少的配置幫助你專注于寫作。
- title: 馨客棧前端導(dǎo)航
  details: 享受 Vue + webpack 的開發(fā)體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發(fā)自定義主題。
- title: 馨客棧每日分享
  details: VuePress 為每個頁面預(yù)渲染生成靜態(tài)的 HTML，同時在頁面被加載的時候，將作為 SPA 運(yùn)行。
footer: MIT Licensed | Copyright ? 2018-present Mackxin
---

我們配置完后直接到瀏覽器看效果，感覺是不是不一樣了哈

創(chuàng)建配置文件

在配置之前我們先要在docs文件夾下面新建一個新的文件夾，名字為 “.vuepress”，記得前面是有個點的哦，不要忘記了。然后我們進(jìn)入到這個.vuepress文件夾，再在里面新建一個config.js文件，我們的導(dǎo)航配置文件就是在里面配置的哈

配置favorite.icon

在.vuepress文件夾下新建public文件夾，把自己制作好的icon放進(jìn)去

然后我們在config.js配置文件來操作

// .vuepress/config.js
module.exports = {
    title : "mackxin",
    description : "xininn",
    base: "/", // 這是部署到github相關(guān)的配置
    markdown: {
        lineNumbers: false // 代碼塊顯示行號
    },
    head : [
        ["link",{rel:"icon",href:"/mackxin.ico"}]
    ],
    sidebar: "auto", // 側(cè)邊欄配置
    sidebarDepth: 2, // 側(cè)邊欄顯示2級
}

現(xiàn)在重新執(zhí)行命令yarn docs:dev 就可以看到效果了

導(dǎo)航配置

我們主要配置的也是config.js文件

module.exports = {
    title : "mackxin",
    description : "xininn",
    head : [
        ["link",{rel:"icon",href:"/mackxin.ico"}]
    ],
    themeConfig: {
        nav: [
            { text: "首頁", link: "/" },
            { text: "馨客棧導(dǎo)航", link:"http://mackxin.com/nav.html/" },
            { text: "馨客棧前端導(dǎo)航", link:"http://mackxin.com/webnav.html/" },
            { text: "馨客棧每日分享", link: "http://mackxin.com/fx.html/" },
            { text: "關(guān)于", link: "/about" },
            { 
               text: "分享", 
               items:[
                 { text: "技術(shù)" , link:"/jishu/"},
                 { text: "每日分享" , link:"/fx/"}
               ]
            },
            { text: "GitHub", link: "https://github.com/mackxin"},
            // 下拉列表顯示分組
            {
                text: "學(xué)習(xí)",
                items: [
                { 
                    text: "前端", 
                    items: [
                    { text: "js", link: "/js/" },
                    { text: "css", link: "/css/" }
                    ] 
                },
                { 
                    text: "后端", 
                    items: [
                    { text: "php", link: "/php/" },
                    { text: "java", link: "/java/"},
                    ] 
                },
                ]
            }
        ],
        sidebarDepth: 2,
        lastUpdated: "Last Updated"
      }
}

這里我們要新建about、js、css、php、java、jishu、fx等七個文件夾，我們來看看新建完的目錄結(jié)構(gòu)哈

├─docs     // docs目錄下
│ ├─.vuepress     //文件夾的名字
│ |    ├─ public   //文件夾的名字
│ |          ├─logo.png
│ |    ├─ config.js   //配置文件
│ ├─js     //文件夾的名字
│    ├─README.md    //js首頁文件
│ ├─css    //文件夾的名字
│    ├─README.md    //css首頁文件
│ └─php    //文件夾的名字
│    ├─README.md    //php首頁文件
│ └─java   //文件夾的名字
│    ├─README.md    //java首頁文件
│ └─jishu  //文件夾的名字
│    ├─README.md    //技術(shù)首頁文件
│ └─fx     //文件夾的名字
│    ├─README.md    //分享首頁文件
| about.md    //關(guān)于頁面
| README.md  //首頁配置

側(cè)邊欄配置

主要配置的也是config.js文件

// .vuepress/config.js
module.exports = {
    themeConfig: {
        sidebar: {
            "/fx/": [
                "",     
                "fx1", 
                "fx2"  
            ],
            "/js/": [
                "",     
                "js1", 
                "js2"
            ],
            "/css/": [
                "",     
                "css1", 
                "css2"
            ],
            "/php/": [
                "",     
                "php1", 
                "php2"
            ],
            "/java/": [
                "/java/", // JAVA文件夾的README.md 不是下拉框形式
                {
                  title: "java標(biāo)題",
                  children: [
                    "/java/java1", // 以docs為根目錄來查找文件 
                    "/java/java2"  // 以docs為根目錄來查找文件 
                  ]
                }
            ]
            // 下面的是首頁顯示側(cè)邊欄的，不需要首頁顯示的話可以刪掉代碼
            // "/": [
            //     "",        /* / */
            //     "contact", /* /contact.html */
            //     "about"    /* /about.html */
            // ]
        }
    }
}

部署

這里暫時只講部署到GitHub Pages的哈

首先我們在package.json文件里面添加代碼，如下

{
  "scripts": {
    "docs:build": "vuepress build docs",
    "d": "bash deploy.sh"
  }
}

然后我們在vuepress文件夾下新建一個名為deploy.sh的文件，跟docs文件夾同級的哈，不要放錯地方了

如果你想發(fā)布到 https://.github.io ,記得吧文件里面的改成你的github的用戶名哦，不然無效的哈

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態(tài)文件
npm run docs:build

# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist

# 如果是發(fā)布到自定義域名
# echo "www.example.com" > CNAME

git init
git add -A
git commit -m "deploy"

# 如果發(fā)布到 https://.github.io
git push -f [email protected]:/.github.io.git master

# 如果發(fā)布到 https://.github.io/
# git push -f [email protected]:/.git master:gh-pages

cd -

如果你想發(fā)布到 https://.github.io/ ，記得吧文件里面的改成你的github的用戶名哦，還有就是把你的改成你新建的倉庫的名字哦

這里要注意一下哦

如果你想發(fā)布到 https://.github.io/

那么你需要到config.js文件里面配置一下哦

base:"/vblog/"

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態(tài)文件
npm run docs:build

# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist

# 如果是發(fā)布到自定義域名
# echo "www.example.com" > CNAME

git init
git add -A
git commit -m "deploy"

# 如果發(fā)布到 https://.github.io
# git push -f [email protected]:/.github.io.git master

# 如果發(fā)布到 https://.github.io/
git push -f [email protected]:/.git master:gh-pages

cd -

弄好以后我們定位在 vuepress的空白處，右鍵git bash here

輸入命令

npm run d

如果你看到的是下面的這樣，那就說明你成功了哈

> [email protected] d H:logvpress
> bash deploy.sh

> [email protected] docs:build H:logvpress
> vuepress build docs

 WAIT  Extracting site metadata...
[15:53:56] Compiling Client
[15:53:56] Compiling Server
[15:54:35] Compiled Server in 39s
[15:54:36] Compiled Client in 40s
 WAIT  Rendering static HTML...

 DONE  Success! Generated static files in docs.vuepressdist.
 ······
 ······
 這里省略好多英文
 ······
 ······
  create mode 100644 php/php1.html
 create mode 100644 php/php2.html
Enumerating objects: 56, done.
Counting objects: 100% (56/56), done.
Delta compression using up to 2 threads
Compressing objects: 100% (53/53), done.
Writing objects: 100% (56/56), 83.58 KiB | 950.00 KiB/s, done.
Total 56 (delta 30), reused 0 (delta 0)
remote: Resolving deltas: 100% (30/30), done.
To github.com:mackxin/vblog.git
 * [new branch]      master -> gh-pages

現(xiàn)在你打開你的網(wǎng)站，我的就是 https://mackxin.github.io/vblog/

部署到自己的域名下

首先到你的個人域名的管理后天，進(jìn)行解析我們來添加一下記錄

記錄類型我們選擇 A 類型哈

主機(jī)記錄，一個www 一個@

解析路線我們默認(rèn)就好了

記錄值看下面我的介紹

我的域名是mackxin.github.io ,那么我們要獲得這個的ip的話我們就要ping一下

在命令行輸入：ping mackxin.github.io然后回車，稍等一下，你就可以看到你的ip值了

Ping mackxin.github.io [185.199.110.153]
這里我們需要的值就是185.199.110.153了

添加 CNAME 文件

在倉庫 mackxin.github.io 中找到 Settings > Custom domain 把 www.liweiwen.top 添加進(jìn)去即可

最后，看到這里如果你還是沒有看懂的話，那么你需要看下面的視頻鏈接，希望可以幫到你順利的搭建網(wǎng)站，上面說的所有內(nèi)容都可以在下面的視頻鏈接那里得到你想要的答案，如果看了還是不懂的話，那么你可以多看幾遍

學(xué)無止境，好好努力，奮斗吧！

想看視頻的記得點擊下面的鏈接學(xué)習(xí)哈

用VuePress來搭建一個極簡的靜態(tài)網(wǎng)站

云服務(wù)器 GPU云服務(wù)器基于存儲搭建靜態(tài)網(wǎng)站用阿里云搭建一個文件服務(wù)器搭建一個網(wǎng)站如何搭建一個網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53612.html

發(fā)表評論

登陸后可評論

0條評論

ky0ncheng

男|高級講師

我要關(guān)注我要私信

TA的文章

使用fiddler進(jìn)行mock測試

閱讀 718·2021-11-16 11:44
JavaScript中的原型與繼承

閱讀 3551·2019-08-26 12:13
React V16.9來了無痛感升級加入性能檢測【譯-真香】

閱讀 3246·2019-08-26 10:46
JavaScript專題之模擬實現(xiàn)call和apply

閱讀 2362·2019-08-23 12:37
react 官網(wǎng)動畫庫（react-transition-group）的新寫法

閱讀 1193·2019-08-22 18:30
react源碼解析之stack reconciler

閱讀 2537·2019-08-22 17:30
vue基礎(chǔ)知識匯總

閱讀 1843·2019-08-22 17:26
Local Storage 操作小插件 iStorage 介紹

閱讀 2295·2019-08-22 16:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用VuePress來搭建一個極簡的靜態(tài)網(wǎng)站

相關(guān)文章