安裝node.js
安裝node.js寇甸，版本要求在>= 8
node.js下載地址：https://nodejs.org/zh-cn/
選擇長期支持版
下載好安裝在英文路徑上
創(chuàng)建一個(gè)文件夾盒使，如：vuepress，進(jìn)入文件夾打開命令模式
全局安裝VuePress
輸入：
npm install -g vuepress
創(chuàng)建項(xiàng)目目錄
mkdir study_blogs
cd study_blogs
初始化項(xiàng)目
npm init -y
文檔路徑
mkdir docs
.vuepress目錄
cd docs
mkdir .vuepress
新建一個(gè) md 文件
echo '# Hello VuePress!' >README.md
config.js配置文件
cd .vuepress
echo >config.js
public目錄
mkdir public
設(shè)置package.json的腳本配置
VuePress中有兩個(gè)命令:
vuepress dev docs命令運(yùn)行本地服務(wù)，通過訪問(http://localhost:8080)即可預(yù)覽網(wǎng)站
vuepress build docs命令用來生成靜態(tài)文件影暴，默認(rèn)情況下续语，放置在docs/.vuepress/dist目錄中，當(dāng)然你也可以在docs/.vuepress/config.js中的dest字段來修改默認(rèn)存放目錄引谜。在這里將兩個(gè)命令封裝成腳本的方式牍陌，直接使用npm run docs:dev和npm run docs:build即可。
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
完成后的工作目錄如下：
study_blogs
├─ docs //以后要在這里面寫文章员咽，直接在此文件夾下新建文件夾毒涧，然后再建md文檔就行，鏈接會(huì)自動(dòng)生成
│ ├─ README.md // 這個(gè)將會(huì)是我們以后的首頁
│ └─ .vuepress // 這個(gè)里面會(huì)存放一些配置和組建
│ └─ public // 靜態(tài)文件存放地
│ └─ config.js //配置文件贝室，我們以后的所有配置基本都在這里寫
└─ package.json
在 package.json 里的 scripts 中添加如下代碼
輸入命令啟動(dòng)項(xiàng)目,npm run docs:dev,輸入顯示網(wǎng)址
npm run docs:dev
在config.js下添加如下代碼契讲，這里的 config.js 便是一個(gè) Vuepress 網(wǎng)站必要的配置文件：
module.exports = {
base: '/haha_blogs/',//github上根目錄地址
title: 'study_blogs',
description: 'haha的博客',
}
其中配置項(xiàng)的含義為：
base：站點(diǎn)的基礎(chǔ)路徑，它的值應(yīng)當(dāng)總是以斜杠開始滑频，并以斜杠結(jié)束捡偏。這里設(shè)置為 /blog-demo/ ，我們?cè)俅卧诒镜剡\(yùn)行項(xiàng)目峡迷，訪問路徑就需要變更為 http://localhost:8081/haha_blogs/
title：網(wǎng)站的標(biāo)題
description：網(wǎng)站的描述
首頁
默認(rèn)主題提供了一個(gè)首頁的布局银伟，想要使用它，需要在你的根級(jí) README.md 以格式 YAML front matter 指定 home: true绘搞。因此枣申，將我們最初創(chuàng)建的 README.md 修改一下：
---
home: true
heroImage: /image/head portrait.jpg
heroText: study_blogs
tagline: 測試之路
actionText: 走過路過不要錯(cuò)過 →
actionLink: /
features:
- title: 測試學(xué)習(xí)小筆記
details:從0開始的測試之路，一路下來的小筆記看杭，以免自己忘了忠藤。
- title: 測試需要的環(huán)境搭建
details: 測試需要的環(huán)境搭建，自己踩過的坑楼雹，操作過的過程記錄模孩。
- title: 感興趣的擴(kuò)展
details: 學(xué)習(xí)之路不斷延伸，有了自己感興趣的方面贮缅，比如：搭建自己的博客榨咐。
---
- heroImage: 首頁圖片，圖片放置在
.vupress/public文件夾下谴供，若沒有該文件夾則自己創(chuàng)建一個(gè)块茁，保存一張你想要的首頁圖片，并在此處引用，這里是放在public下image文件夾下数焊。 - 其它參數(shù)請(qǐng)參考官方文檔：Vuepress-默認(rèn)主題首頁
導(dǎo)航欄
在 .vupress/config.js 文件添加一些導(dǎo)航欄鏈接：
module.exports = {
themeConfig: {
// 你的GitHub倉庫永淌，請(qǐng)正確填寫
repo: 'https://github.com/xxxxxxx/blog-demo',
// 自定義倉庫鏈接文字。
repoLabel: 'My GitHub',
nav: [
{ text: 'Home', link: '/' },
{ text: '第一篇博客', link: '/blog/haha1.md' }
]
}
}
我們?cè)?docs 目錄下新建 blog 文件夾佩耳，在 blog 目錄下創(chuàng)建 /blog/haha1.md 作為我們第一篇博客的內(nèi)容：
側(cè)邊欄
最后我們配置側(cè)邊欄遂蛀，讓用戶體驗(yàn)更好一些，在 .vupress/config.js 文件添加一些代碼：
themeConfig: {
sidebar: [
['/', '首頁'],
['/blog/haha1.md', '我的第一篇博客']
]
}
}
#我的第一篇博客
first blog
再次運(yùn)行干厚，打開網(wǎng)頁李滴，點(diǎn)擊導(dǎo)航欄第一篇博客
部署
在github上創(chuàng)建一個(gè)名為 study_blogs 的倉庫
在項(xiàng)目根目錄中，創(chuàng)建一個(gè)如下的 deploy.sh 腳本文件蛮瞄，請(qǐng)自行修改github倉庫地址
# 確保腳本拋出遇到的錯(cuò)誤
set -e
# 生成靜態(tài)文件
npm run docs:build
# 進(jìn)入生成的文件夾
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
#如果打算發(fā)布到 https://<USERNAME>.github.io/<REPO>/（也就是說你的倉庫在 https://github.com/<USERNAME>/<REPO>）所坯，則將 base 設(shè)置為 /<REPO>/，此處我設(shè)置為 /study_blogs /
#git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages(分支）
git push -f git@github.com:<USERNAME>/<REPO>.git master
cd -
保存，運(yùn)行，就可以了
在setting中找到github pages 在source下選擇master branch就可以了陨帆，如果是分支掀虎，選擇分支就行，顯示的網(wǎng)址就是部署在github上，自己博客的靜態(tài)網(wǎng)址
