最終效果，可以到我博客查看my blog
需要工具
- node
- Git
- Github賬號(hào)
VuePress
VuePress是一個(gè)以 Markdown 為中心的靜態(tài)網(wǎng)站生成器。你可以使用 Markdown 來(lái)書寫內(nèi)容（如文檔腻扇、博客等）轴脐，然后 VuePress 會(huì)幫助你生成一個(gè)靜態(tài)網(wǎng)站來(lái)展示它們调卑。
Vuepress不止可以這樣
還可以是這樣
開始
運(yùn)行環(huán)境需要依賴node，所以在安裝之前大咱，請(qǐng)確保操作系統(tǒng)已經(jīng)安裝了node令野，我運(yùn)行時(shí)的版本為v14.17.3
安裝node可查看node 安裝
初始化博客
- 在本地創(chuàng)建一個(gè)新文件夾
blog-demo,在此文件夾進(jìn)入cmd，使用npm init命令初始化徽级，你會(huì)得到一個(gè)package.json文件
安裝依賴及主題
在此blog-demo文件夾內(nèi)气破，進(jìn)入cmd窗口中，運(yùn)行下面兩個(gè)命令
-
安裝依賴
npm i vuepress@2.0.0-beta.25 npm i vuepress-theme-aurora
配置package.json
-
將下面內(nèi)容復(fù)制替換
package.json中的scripts項(xiàng)(如果你沒(méi)有編輯器餐抢，那么推薦下載notepad++)notepad++"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "vuepress dev docs", "build": "vuepress build docs", "deploy": "bash deploy.sh" },
使用主題
1.配置config.js
在docs/.vuepress/config.js下现使，添加下面內(nèi)容(docs,.vuepress,config.js都需要你自己創(chuàng)建)
module.exports = {
//設(shè)置head 一定要加入<script src="https://at.alicdn.com/t/font_2849934_v6y652peian.js"></script>項(xiàng)配置低匙，否則一些圖標(biāo)不能正常顯示
head: [
[
"script",
{
src: "https://at.alicdn.com/t/font_2849934_v6y652peian.js",
},
]
],
theme: 'aurora',
themeConfig: {
darkMode: false,
}
};
2.使用
運(yùn)行
npm run dev
運(yùn)行成功之后，會(huì)出現(xiàn)一個(gè)地址碳锈，你只需要在瀏覽器中顽冶，輸入這個(gè)地址，就可以看到下面的頁(yè)面
恭喜你售碳，你已經(jīng)搭建成功了强重，是不是很簡(jiǎn)單!!
接下來(lái)，你可以簡(jiǎn)單的發(fā)布第一篇文章
發(fā)布文章
因?yàn)?code>Vuepress會(huì)自動(dòng)將docs/xx.md文件贸人，解析成xx.html间景，在此docs文件夾下，創(chuàng)建.md文件就可以了
然后在此我的第一篇Vuepress文章.md中艺智，隨便寫點(diǎn)什么
# 這是一個(gè)標(biāo)題
隨便寫點(diǎn)啥
記得創(chuàng)建一個(gè)新
md文件之后倘要，需要重新運(yùn)行npm run dev命令
然后你便可以在站點(diǎn)首頁(yè)看到這篇文章了
配置博客
你如果按照上面步驟進(jìn)行搭建，那么你博客什么也沒(méi)有十拣，你看到的都是默認(rèn)配置
為了更好的對(duì)博客進(jìn)行配置封拧，你可以到GitHub的config.js，復(fù)制所有的配置夭问，進(jìn)行更改
Vuepress的配置文件為docs/.vuepress/config.js
我從github中泽西，復(fù)制下來(lái)之后，在瀏覽器中看到的最終效果為
修改導(dǎo)航欄
這里演示導(dǎo)航欄的修改
在config.js內(nèi)缰趋，找到navbar項(xiàng)尝苇，此項(xiàng)便是修改導(dǎo)航欄的，具體配置埠胖，可以查看Vuepress navbar的配置
修改站點(diǎn)logo文字
- 根據(jù)aurora主題文檔的描述
- 在
config.js下糠溜，找到此項(xiàng)，然后對(duì)該項(xiàng)進(jìn)行修改
成功修改
如果你們修改之后直撤，在瀏覽器中非竿，打開沒(méi)有效果，這是因?yàn)槟銈儧](méi)有重新運(yùn)行
npm run dev命令谋竖，每次修改config.js內(nèi)容红柱，都需要重新運(yùn)行npm run dev命令
結(jié)束
使用Vuepress搭建博客，只需要簡(jiǎn)單的幾步便可以了蓖乘，下面是用到的所有鏈接
關(guān)于如何部署锤悄，我改天的時(shí)候，再寫一篇關(guān)于部署的文章嘉抒，你也可以看一下這篇部署
零聚，如果你有任何疑問(wèn)，可以在我博客中，聯(lián)系我
