前言
GitHub Pages 提供免費全球加速的服務器資源，VuePress 將 Markdown 變成藝術品級的網頁，僅需 30 分鐘，你便可以像提交代碼一樣發布文章，過程完全免費。
博客搭建好的效果如下：https://honorsong.github.io/example-blog/
GitHub 官網
VuePress 官方文檔
一、本地搭建
準備工具：電腦上需要提前裝好 Node.js
第一步：新建一個文件夾
# 打開電腦的「終端」
# 輸入命令：
mkdir vuepress-starter && cd vuepress-starter
翻譯：創建一個叫 vuepress-starter 的文件夾，并進入它
第二步：初始化項目
# 輸入命令：
yarn init # 或者用 npm init
操作提示：直接按回車鍵確認所有選項
第三步：安裝 VuePress
# 輸入命令：
yarn add -D vuepress # 或者用 npm install -D vuepress
翻譯：把 VuePress 這個建站工具安裝到你的文件夾里
第四步：創建文檔
# 輸入命令：
mkdir docs && echo '# Hello VuePress' > docs/README.md
*翻譯：在文件夾里新建一個 docs 子文件夾，并創建主頁文件 README.md *
第五步：修改配置文件
打開 package.json 文件，在 scripts 里添加：
{"scripts": {"docs:dev": "vuepress dev docs", // 啟動開發模式"docs:build": "vuepress build docs" // 生成最終網站}
}
第六步：啟動網站
# 輸入命令：
yarn docs:dev # 或者用 npm run docs:dev
效果：瀏覽器會自動打開 http://localhost:8080，你會看到一個寫著 “Hello VuePress” 的網站！
🔥 實時更新
現在你可以：
- 用 IDE 或記事本打開
docs/README.md - 把
# Hello VuePress改成# 我的第一個網站 - 保存文件 → 網站會自動刷新！
跟著做下來，你的第一個文檔網站就煮好啦！ 🎉
二、基礎配置
在 docs 文件夾里新建 .vuepress 文件夾并添加 config.js ，所有 VuePress 相關的文件都會被放在這里。
此時你的項目結構可能是這樣：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
在 config.js 里寫：
module.exports = {title: 'VuePress 文檔',description: 'VuePress + Github 30分鐘搭建屬于自己的博客網站'
}
👉 效果：搜索引擎更容易找到你的網站（SEO）
三、添加導航菜單
修改 config.js 如下：
module.exports = {title: 'VuePress 文檔',description: 'VuePress + Github 30分鐘搭建屬于自己的博客網站',themeConfig: {nav: [{text: '首頁', link: '/'},{text: 'CodeFish的博客',items: [{text: 'GitHub', link: 'https://github.sheincorp.cn/'},{text: 'CSDN', link: 'https://blog.csdn.net/weixin_41105242'},{text: '掘金', link: 'https://juejin.cn/'}]}]}
}
👉 效果：網站右上角出現導航菜單
四、添加側邊欄
在 docs 文件夾里新建 blog 文件夾并添加一些 .md 文檔，添加后的目錄如下：
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
| └─ blog
| └─ FirstMenu.md
| └─ SecondMenu.md
| └─ ThirdMenu.md
└─ package.json
修改 config.js 如下：
module.exports = {title: 'VuePress 文檔',description: 'VuePress + Github 30分鐘搭建屬于自己的博客網站',themeConfig: {nav: [...],sidebar: [{title: '首頁',path: '/'},{title: "菜單一",path: '/blog/FirstMenu',collapsable: false, // 不折疊children: [{ title: "菜單二", path: "/blog/SecondMenu" },{ title: "菜單三", path: "/blog/ThirdMenu" }],}]}
}
👉 效果：左側出現清晰的菜單目錄
五、部署到 Github Pages
我們的博客就算是正式做好了，接下來我們部署到免費的 Github Pages 上。
首先在 Github 上新建一個倉庫，這里我取的倉庫名為 example-blog
下一步，我們需要在 config.js 對應添加一個 base 路徑配置：
module.exports = {// 路徑名為 "/<REPO>/"base: '/example-blog/',//...
}
最終的 config.js 文件內容為：
module.exports = {title: 'VuePress 文檔',description: 'VuePress + Github 30分鐘搭建屬于自己的博客網站',base: '/example-blog/',themeConfig: {nav: [{text: '首頁', link: '/'},{text: '我的博客',items: [{text: 'GitHub', link: 'https://github.sheincorp.cn/'},{text: 'CSDN', link: 'https://blog.csdn.net/weixin_41105242'},{text: '掘金', link: 'https://juejin.cn/'}]}],sidebar: [{title: '首頁',path: '/'},{title: "菜單一",path: '/blog/FirstMenu',collapsable: false, // 不折疊children: [{ title: "菜單二", path: "/blog/SecondMenu" },{ title: "菜單三", path: "/blog/ThirdMenu" }],}]}
}
然后我們在項目 vuepress-starter 目錄下建立一個腳本文件 deploy.sh
注意修改一下對應的用戶名和倉庫名：
#!/usr/bin/env sh# 確保腳本拋出遇到的錯誤
set -e# 生成靜態文件
yarn run docs:build# 進入生成的文件夾
cd docs/.vuepress/distgit init
git add -A
git commit -m 'deploy'
git branch -M main
git push -f git@github.com:HonorSong/example-blog.git main:pagescd -
然后命令行切換到 vuepress-starter 目錄下，執行：
# 輸入命令：
sh deploy.sh
項目就會開始構建，然后提交到遠程倉庫，注意這里提交到了 pages 分支，我們查看下對應倉庫分支的代碼：
我們可以在倉庫的 Settings -> Pages 中看到最后的地址：
像我最后生成的地址就是 https://honorsong.github.io/example-blog/
至此，我們完成了 VuePress 和 Github Pages 的部署。
此后每一次文章內容的更新，配置的更新，僅需要重新執行 sh deploy.sh 命令重新部署，即可對線上頁面進行更新。
