最終效果圖
網站：https://chandler712.github.io/
一.前言
VuePress 是尤雨溪推出的支持 Vue 及其子項目的文檔需求而寫的一個項目，UI簡潔大方，官方文檔詳細容易上手
二.搭建：
1.新建一個工程目錄為project
可以手動右鍵新建，也可以使用下面的命令新建文件夾：
使用git bash終端
$ mkdir project
2. 全局安裝VuePress
$ npm install -g vuepress
3. project文件夾中，使用命令行初始化項目--創建一個package.json
$ npm init -y
將會創建一個package.json文件
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
4. 在project的根目錄下新建docs文件作為項目文檔
$ mkdir docs
5.在docs文件夾下創建.vuepress文件夾：
$ mkdir .vuepress
所有 VuePress 相關的文件都將會被放在這里
6.在.vuepress文件夾下面創建config.js
$ touch config.js
config.js是VuePress必要的配置文件，它導出一個javascript對象。
先加入如下配置后期再改：
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around'
}
7. 在.vuepress文件夾下面創建public文件夾
$ mkdir public
這個文件夾是用來放置靜態資源
8. 首頁內容(像VuePress文檔主頁一樣)
在docs文件夾下面創建一個README.md
$ touch README.md
默認的主題提供了一個首頁，像下面一樣設置home:true即可，可以把下面的設置放入README.md中，待會兒將會看到跟VuePress一樣的主頁。
--- home: true heroImage: /logo.jpg actionText: 快速上手 → actionLink: /zh/guide/ features: - title: 簡潔至上 details: 以 Markdown 為中心的項目結構，以最少的配置幫助你專注於寫作。 - title: Vue驅動 details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。 - title: 高性能 details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行。 footer: MIT Licensed | Copyright © 2018-present Evan You ---
放一張圖片到public文件夾中替換logo.jpg
簡單的項目結構已經搭好了：
-
project
-
├─── docs
-
│ ├── README.md
-
│ └── .vuepress
-
│ ├── public
-
│ └── config.js
-
└── package.json
1.在 package.json 里添加兩個啟動命令:
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
2.啟動你的VuePress：測試效果
進入工程目錄啟動
$ npm run docs:dev
打開 http://localhost:8080/
三.測試完畢后構建自己的網頁
1.導航欄配置：
在docs文件下建立如下文件
關於--文件guide-內容guide.md
博客--文件index
--文件html-內容one.md
--文件css-內容one.md
--文件javascript-內容javascript.md
--文件nodejs-內容nodejs.md
--文件react-內容react.md
--文件vue-內容vue.md
--文件vx-內容vx.md
--文件others-內容others.md
Python--文件python-內容python
2.導航欄配置config.js：
themeConfig: {
lastUpdated: 'Last Updated', // 文檔更新時間：每個文件git最后提交的時間
displayAllHeaders: true, // 默認值：false
activeHeaderLinks: false, // 默認值：true
nav: [
{ text: '首頁', link: '/'},
{ text: 'Python', link: '/python/python.md' },
{
text: '博客',
items: [
{ text: 'Html', link: '/index/html/one.md' },
{ text: 'css', link: '/index/css/one.md' },
{ text: 'Javascript', link: '/index/javascript/javascript.md' },
{ text: 'nodejs', link: '/index/nodejs/nodejs.md' },
{ text: 'vue', link: '/index/vue/vue.md' },
{ text: 'react', link: '/index/react/react.md' },
{ text: 'vx', link: '/index/vx/vx.md' },
{ text: 'others', link: '/index/others/others.md' },
]
},
{
text: '鏈接',
//ariaLabel: 'Language Menu',
items: [
{ text: 'Github', link: 'https://github.com/Chandler712/practice' },
{ text: '博客園', link: 'https://www.cnblogs.com/chandlerwong/' },
]
},
{text:'關於', link:'/guide/guide.md'},
],
}
3.側邊欄配置config.js：
themeConfig: {
sidebar: 'auto',//自動添加標題到側欄
sidebarDepth: 2, // e'b將同時提取markdown中h2 和 h3 標題，顯示在側邊欄上。
lastUpdated: 'Last Updated', // 文檔更新時間：每個文件git最后提交的時間
sidebar: {
'/index/': [
// 側邊欄在 /index/ 目錄上
'/index/',
{
title: 'Html',
collapsable: false, // 不可折疊
children: [
'/html/one.md',
]
},
{
title: 'CSS',
collapsable: false, // 不可折疊
children: [
'/index/css/one.md',
]
},
// 側邊欄在 /javascript/ 目錄上
{
title: 'Javascript',
collapsable: true, // 不可折疊
children: [
'/index/javascript/javascript.md'
]
},
// 側邊欄在 /node.js/ 目錄上
{
title: 'nodejs',
collapsable: true, // 不可折疊
children: [
'/index/nodejs/nodejs.md',
]
},
// 側邊欄在 /react.js/ 目錄上
{
title: 'react',
collapsable: true, // 不可折疊
children: [
'/index/nodejs/react.md',
]
},
// 側邊欄在 /others/ 目錄上
{
title: '其它',
collapsable: true, // 不可折疊
children: [
'/index/others/others.md',
]
},
// 側邊欄在 /vue.js/ 目錄上
{
title: 'vuejs',
collapsable: true, // 不可折疊
children: [
'/index/vue/vue.md',
]
},
// 側邊欄在 /vx/ 目錄上
{
title: 'vx',
collapsable: true, // 不可折疊
children: [
'/index/vx/vx.md',
]
},
]
}
},
}
顯示所有頁面的標題鏈接
默認情況下，側邊欄只會顯示由當前活動頁面的標題（headers）組成的鏈接，你可以將 themeConfig.displayAllHeaders 設置為 true 來顯示所有頁面的標題鏈接：
themeConfig: {displayAllHeaders: true // 默認值：false}
活動的標題鏈接
默認情況下，當用戶通過滾動查看頁面的不同部分時，嵌套的標題鏈接和 URL 中的 Hash 值會實時更新，這個行為可以通過以下的配置來禁用：
themeConfig: {activeHeaderLinks: false, // 默認值：true}
4.完整的config.js配置
module.exports = {
title: '個人文檔',
description: '去留無意，閑看庭前花開花落；寵辱不驚，漫隨天外雲卷雲舒',
head: [
['link', { rel: 'icon', href: '/favicon.ico' }], // 增加一個自定義的 favicon(網頁標簽的圖標)
],
serviceWorker: true,
base: '/', // 這是部署到github相關的配置 使用'/'時
//部署到 https://<USERNAME>.github.io USERNAME=你的用戶名
markdown: {
lineNumbers: true // 代碼塊顯示行號
},
themeConfig: {
sidebar: 'auto',
sidebarDepth: 2, // e'b將同時提取markdown中h2 和 h3 標題，顯示在側邊欄上。
lastUpdated: 'Last Updated', // 文檔更新時間：每個文件git最后提交的時間
//導航欄配置
nav: [
{ text: '首頁', link: '/'},
{ text: 'Python', link: '/python/python.md' },
{
text: '博客',
items: [
{ text: 'Html', link: '/index/html/one.md' },
{ text: 'css', link: '/index/css/one.md' },
{ text: 'Javascript', link: '/index/javascript/javascript.md' },
{ text: 'nodejs', link: '/index/nodejs/nodejs.md' },
{ text: 'vue', link: '/index/vue/vue.md' },
{ text: 'react', link: '/index/react/react.md' },
{ text: 'vx', link: '/index/vx/vx.md' },
{ text: 'others', link: '/index/others/others.md' },
]
},
{
text: '鏈接',
//ariaLabel: 'Language Menu',
items: [
{ text: 'Github', link: 'https://github.com/Chandler712/practice' },
{ text: '博客園', link: 'https://www.cnblogs.com/chandlerwong/' },
]
},
{text:'關於', link:'/guide/guide.md'},
],
displayAllHeaders: true, // 默認值：false
activeHeaderLinks: false, // 默認值：true
//側邊欄配置
sidebar: {
'/index/': [
// 側邊欄在 /index/ 目錄上
'/index/',
{
title: 'Html',
collapsable: false, // 不可折疊
children: [
'/html/one.md',
]
},
{
title: 'CSS',
collapsable: false, // 不可折疊
children: [
'/index/css/one.md',
]
},
// 側邊欄在 /javascript/ 目錄上
{
title: 'Javascript',
collapsable: true, // 不可折疊
children: [
'/index/javascript/javascript.md'
]
},
// 側邊欄在 /node.js/ 目錄上
{
title: 'nodejs',
collapsable: true, // 不可折疊
children: [
'/index/nodejs/nodejs.md',
]
},
// 側邊欄在 /react.js/ 目錄上
{
title: 'react',
collapsable: true, // 不可折疊
children: [
'/index/nodejs/react.md',
]
},
// 側邊欄在 /others/ 目錄上
{
title: '其它',
collapsable: true, // 不可折疊
children: [
'/index/others/others.md',
]
},
// 側邊欄在 /vue.js/ 目錄上
{
title: 'vuejs',
collapsable: true, // 不可折疊
children: [
'/index/vue/vue.md',
]
},
// 側邊欄在 /vx/ 目錄上
{
title: 'vx',
collapsable: true, // 不可折疊
children: [
'/index/vx/vx.md',
]
},
]
}
},
algolia: {
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>'
}
}
5.搜索框匹配
algolia: {apiKey: '<API_KEY>',indexName: '<INDEX_NAME>'}
測試--進入工程目錄
$ npm run docs:dev
四.部署到github
1.登錄github賬號新建一個repository
倉庫名結尾以<github的用戶名>.github.io
對應的config.js的配置
module.exports = {base: '/',}
不用clone到本地倉庫
2.在project根目錄創建腳步文件--自動部署到github
$ touch deploy.sh
!/usr/bin/env sh# 確保腳本拋出遇到的錯誤set -e # 生成靜態文件npm run docs:build # 進入生成的文件夾cd docs/.vuepress/dist git initgit add -Agit commit -m 'deploy' git push -f git@github.com:Chandler712/Chandler712.github.io.git master cd –
3.設置package.json：
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs",
"deploy": "bash deploy.sh"
}
}
4.通過git bash 終端輸入命令自動部署到github
$ npm run deploy
結束