手把手教你用 VuePress + GitHub Pages 搭建個人部落格
theme: cyanosis highlight: a11y-dark
攜手創作，共同成長！這是我參與「掘金日新計劃 · 8 月更文挑戰」的第2天，點選檢視活動詳情
前言
最近在閱讀冴羽老師的文章時，對個人部落格很感興趣，於是試著自己搭建了一遍，寫了這篇文章記錄一下搭建的基本流程，希望對大家有所幫助。
原文連結：一篇帶你用 VuePress + Github Pages 搭建部落格
1. 本地搭建
- 建立並進入一個新目錄
mkdir vuepress-starter
cd vuepress-starter
- 使用你喜歡的包管理器進行初始化
npm init -y
- 將 VuePress 安裝為本地依賴
npm install -D vuepress
- 建立你的第一篇文件
mkdir docs
echo '# Hello VuePress' > docs/README.md
- 在
package.json中新增一些scripts
json
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
- 在本地啟動伺服器
npm run docs:dev
VuePress 會在 http://localhost:8080 啟動一個熱過載的開發伺服器
這時可能會出現文字亂碼情況，需要把 README.md 的編碼格式改為 UTF-8
2. 基礎配置
在 docs 資料夾下新增 .vuepress 目錄，所有 VuePress 相關的檔案都會被放在這裡。在 .vuepress 資料夾下新增 config.js，配置網站的標題和描述，方便 SEO，此時你的目錄結構可能是這樣：
|-- docs',
|-- README.md',
|-- .vuepress',
|-- config.js'
config.js 檔案的內容如下(標題和描述自定義)：
js
module.exports = {
title: '我的部落格',
description: 'XXX'
}
3. 新增導航欄
我們現在在首頁的右上角新增導航欄，修改 config.js：
js
module.exports = {
title: '我的部落格',
description: 'XXX',
themeConfig: {
nav: [
{ text: "首頁", link: "/" },
{
text: "codinglin 的部落格",
items: [
{ text: "掘金", link: "http://juejin.cn/user/726107228492253" },
{ text: "Github", link: "http://github.com/gemini-hjl" }
]
}
]
}
}
此時介面如下：
4. 新增側邊欄
現在我們新增一些 md 文件，內容自行新增，文件的目錄結構如下：
|-- docs',
|-- README.md',
|-- .vuepress',
|-- config.js'
|-- handbook
|-- 1.md
|-- 2.md
我們在 config.js 新增如下配置：
js
module.exports = {
title: '我的部落格',
description: 'XXX',
themeConfig: {
nav: [...],
sidebar: [
{
title: "歡迎學習",
path: "/",
collapsable: false, // 是否摺疊
children: [{ title: "部落格簡介", path: "/" }],
},
{
title: "基礎篇",
path: "/handbook/1",
collapsable: true,
children: [
{ title: "第一篇", path: "/handbook/1" },
{ title: "第二篇", path: "/handbook/2" },
]
}
]
}
}
此時頁面如下：
5. 更換主題
現在基本的目錄和導航功能已經實現，如果還想要 loading效果、切換動畫、模式切換（暗黑模式）、返回頂部、評論等功能呢，為了簡化開發成本，我們可以直接使用主題，我使用的主題是 vuepress-theme-reco：
現在我們安裝 vuepress-theme-reco：
npm install vuepress-theme-reco --save-dev
然後在 config.js 中引用該主題：
js
module.exports = {
...
theme: 'reco',
...
}
配置好之後，可以看到自己的部落格網站新增了一些功能，例如模式切換：
6. 新增文章資訊
我們會發現，一篇文章竟然出現了兩遍標題，這是因為這個主題自動提取了第一個大標題作為本文的標題，我們可以在每篇文章的 md 檔案中新增一些資訊修改：
```
title: Hello VuePress author: codinglin date: '2022-8-28'
```
效果如下：
7. 設定語言
文章時間，我們寫入的格式為 2022-8-28 ，但是顯示的是 8/28/2022，這是因為 VuePress 預設的 lang 為 en-US，我們修改一下 config.js：
js
module.exports = {
...
locales: {
'/': {
lang: 'zh-CN'
}
},
...
}
可以發現時間格式發生了變化：
8. 開啟目錄結構
在原本的主題裡，我們發現每篇文章的目錄結構在左側，而 vuepress-theme-reco 將原有的側邊欄的中的多級標題移出，生成子側邊欄，放在了頁面的右側，如果你要全域性開啟，可在 config.js 中設定開啟：
js
module.exports = {
...
themeConfig: {
subSidebar: 'auto',
},
...
}
9. 修改主題顏色
VuePress 基於 Vue，所以主題色用的是 Vue 的綠色，你也可以將主題顏色修改為你自己喜歡的顏色，你可以建立一個 .vuepress/styles/palette.styl 檔案，檔案程式碼如下：
$accentColor = #3178c6
效果如下：
更多顏色的修改請參考 palette.styl
10. 自定義修改樣式
我們發現用作強調的文字顏色比較暗淡，在暗黑模式下看不清楚，如何修改這個文字的顏色和背景色呢？
你可以建立一個 .vuepress/styles/index.styl 檔案，檔案程式碼如下：
.dark .content__default code {
background-color: rgba(58,58,92,0.7);
color: #fff;
}
如果想要隱藏每篇文章的標題、作者、時間呢，其實也是類似的方式：
.page .page-title {
display: none;
}
效果如下：
11. 部署
到這裡，我們的部落格網站基本搭建好了，接下來我們將它部署到 Github Pages 上。我們首先在 Github 上新建一個倉庫，這裡我取名為：interview。
相應地，我們需要在 config.js 新增一個 base 路徑配置：
js
module.exports = {
...
// 和倉庫名相同
base: '/interview/',
...
}
最終的 config.js 的內容為：
js
module.exports = {
title: '我的部落格',
description: 'XXX',
theme: 'reco',
base: '/interview/',
locales: {
'/': {
lang: 'zh-CN'
}
},
themeConfig: {
subSidebar: 'auto',
nav: [
{ text: "首頁", link: "/" },
{
text: "codinglin 的部落格",
items: [
{ text: "掘金", link: "http://juejin.cn/user/726107228492253" },
{ text: "Github", link: "http://github.com/gemini-hjl" }
]
}
],
sidebar: [
{
title: "歡迎學習",
path: "/",
collapsable: false, // 是否摺疊
children: [{ title: "部落格簡介", path: "/" }],
},
{
title: "基礎篇",
path: "/handbook/1",
collapsable: true,
children: [
{ title: "第一篇", path: "/handbook/1" },
{ title: "第二篇", path: "/handbook/2" },
]
}
]
}
}
然後我們在專案 vuepress-starter 目錄下建立一個指令碼檔案 deploy.sh，注意修改一下對應的使用者名稱和倉庫名：
```
!/usr/bin/env sh
確保指令碼丟擲遇到的錯誤
set -e
生成靜態檔案
npm run docs:build
進入生成的資料夾
cd docs/.vuepress/dist
git init git add -A git commit -m 'deploy'
如果釋出到 http://.github.io/
git push -f [email protected]:XXX/XXX.git master:gh-pages
cd - ```
新建一個終端，選擇 Git Bash，進入主目錄，並執行 sh deploy.sh
cd vuepress-starter
sh deploy.sh
專案就會開始構建，然後上傳到遠端倉庫上。
我們可以在倉庫的 Settings -> Pages 中看到最後的地址：
最後生成的地址：http://gemini-hjl.github.io/interview/
至此，我們完成了 VuePress 和 Github Pages 的部署。
如果大家想要豐富自己的個人部落格的話，可以去安裝一些外掛，地址如下：搭建 VuePress 部落格，你可能會用到的一些外掛
最後
以上就是使用 VuePress + GitHub Pages 搭建個人部落格的大致流程，如果覺得這篇文章對你有幫助的話，不要忘了點贊喲~