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

全局安裝前我們需要Git和node這兩個軟件，關于怎么安裝可以我之前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

好，安裝成功后，我們先來了解一下vuepress的目錄結構

首先我們先新建一個項目，項目名為 “vuepress” ，然后我們進入到這個文件夾,我們在這個文件夾的空白處右鍵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文件夾內，本來是空的文件夾，現在多出來一個package.json文件

在命令框輸入

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

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

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

vuepress dev docs

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

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

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

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

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

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

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

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

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

現在重新執行命令yarn docs:dev 就可以看到效果了

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

module.exports = {
    title : "mackxin",
    description : "xininn",
    head : [
        ["link",{rel:"icon",href:"/mackxin.ico"}]
    ],
    themeConfig: {
        nav: [
            { text: "首頁", link: "/" },
            { text: "馨客棧導航", link:"http://mackxin.com/nav.html/" },
            { text: "馨客棧前端導航", link:"http://mackxin.com/webnav.html/" },
            { text: "馨客棧每日分享", link: "http://mackxin.com/fx.html/" },
            { text: "關于", link: "/about" },
            { 
               text: "分享", 
               items:[
                 { text: "技術" , link:"/jishu/"},
                 { text: "每日分享" , link:"/fx/"}
               ]
            },
            { text: "GitHub", link: "https://github.com/mackxin"},
            // 下拉列表顯示分組
            {
                text: "學習",
                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等七個文件夾，我們來看看新建完的目錄結構哈

├─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    //技術首頁文件
│ └─fx     //文件夾的名字
│    ├─README.md    //分享首頁文件
| about.md    //關于頁面
| README.md  //首頁配置

主要配置的也是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標題",
                  children: [
                    "/java/java1", // 以docs為根目錄來查找文件 
                    "/java/java2"  // 以docs為根目錄來查找文件 
                  ]
                }
            ]
            // 下面的是首頁顯示側邊欄的，不需要首頁顯示的話可以刪掉代碼
            // "/": [
            //     "",        /* / */
            //     "contact", /* /contact.html */
            //     "about"    /* /about.html */
            // ]
        }
    }
}

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

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

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

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

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

#!/usr/bin/env sh

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

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd docs/.vuepress/dist

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

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

# 如果發布到 https://.github.io
git push -f git@github.com:/.github.io.git master

# 如果發布到 https://.github.io/
# git push -f git@github.com:/.git master:gh-pages

cd -

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

這里要注意一下哦
如果你想發布到  https://.github.io/
那么你需要到config.js文件里面配置一下哦
base:"/vblog/"

#!/usr/bin/env sh

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

# 生成靜態文件
npm run docs:build

# 進入生成的文件夾
cd docs/.vuepress/dist

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

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

# 如果發布到 https://.github.io
# git push -f git@github.com:/.github.io.git master

# 如果發布到 https://.github.io/
git push -f git@github.com:/.git master:gh-pages

cd -

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

輸入命令

npm run d

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

> vpress@1.0.0 d H:logvpress
> bash deploy.sh

> vpress@1.0.0 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

現在你打開你的網站 ，我的就是 https://mackxin.github.io/vblog/

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

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

主機記錄，一個www 一個@

解析路線我們默認就好了

記錄值看下面我的介紹

我的域名是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 添加進去即可

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

學無止境，好好努力，奮斗吧！

想看視頻的記得點擊下面的鏈接學習哈