請先點選連結RobinDevNotes，體驗用VuePress搭建部落格的效果（logo還沒有合適的替換），目前部署在GitHub Pages上，國內訪問速度還可以，再閱讀本文感受來龍去脈和搭建過程。
最近準備自己要寫點小專案，當前技術棧是以運維和後端為主，自己要寫專案的話還是要會一些前端技術，選擇學習國內比較流行的Vue（知識都學雜了），先看了極客時間的《玩轉Vue 3全家桶》，原理居多，現在在B站看大佬小滿zs的《Vue3 + vite + Ts + pinia + 實戰 + 原始碼 + electron》，講得細緻，深入淺出，有獨特的視角，推薦學習，需要先了解一點Vue和TypeScript。
我之前GitHub上的靜態部落格是用Hexo搭建的，現在在學Vue，就想著Vue有沒有對應方面的框架，搜尋一番，瞭解到Vue生態下的VuePress和VitePress，VitePress更輕快，VuePress可配置和靈活性多一些，可自行根據需要選擇，我選擇功能較多的VuePress。
下面開始VuePress建立和配置，VuePress有社群型別主題供選擇，可以使用VuePress預設配置直接建立，同樣可以選擇對應的主題去建立，選擇下面兩條命令中一條命令去執行即可。
使用預設配置直接建立
pnpm create vuepress vuepress-starter
使用vuepress theme hope主題建立
pnpm create vuepress-theme-hope vuepress-starter
最後一個引數vuepress-starter為建立的專案目錄名稱，執行後會出現下面幾個問題，根據需求選擇合適的，專案就建立完成了。
✔ Select a language to display / 選擇顯示語言 簡體中文
✔ 選擇包管理器 pnpm
✔ 你想要使用哪個打包器？ vite
生成 package.json...
✔ 設定應用名稱 RobinDevNotes
✔ 設定應用描述 Robin's dev notes
✔ 設定應用版本號 2.0.0
✔ 設定協議 MIT
生成 tsconfig.json...
✔ 你想要建立什麼型別的專案？ blog
✔ 專案需要用到多語言麼? no
生成模板...
✔ 是否初始化 Git 倉庫? yes
✔ 是否需要一個自動部署文件到 GitHub Pages 的工作流？ no
安裝依賴...
這可能需要數分鐘，請耐心等待.
進入專案目錄，執行下面命令就能啟動專案了，執行後在瀏覽器中訪問http://localhost:8080可以看到專案的初始狀態的樣子了。
pnpm run docs:dev
我選擇使用vuepress theme hope主題，對應配置檔案在src/.vuepress目錄下，config.ts是VuePress配置檔案，navbar.ts是上方導航欄配置檔案，sidebar.ts是側邊欄配置檔案，theme.ts是主題配置檔案，文章以markdown格式放在src/posts目錄下，src/intro.md是介紹頁。修改完成配置後，接下來構建生成靜態網站檔案。
pnpm run docs:build
預設生成的靜態網站檔案在src/.vuepress/dist目錄下，將生成的檔案上傳覆蓋到之前程式碼倉庫目錄下，訪問https://robin-2016.github.io地址就能看到更新後的部落格了，就是文章開頭連結的部落格了。
如果是首次配置GitHub Pages，在GitHub上建立一個以自己使用者名稱+github.io為名稱的程式碼倉庫，例如我的GitHub使用者名稱是robin-2016，我建立的倉庫名稱即為robin-2016.github.io，同樣將src/.vuepress/dist目錄下所有檔案上傳剛建立的程式碼倉庫即可，靜態部落格網站就由GitHub託管執行了。
在上面學習實踐過程中，發現現在每個GitHub倉庫都可以配置對應的Pages靜態網站了，我之前一直認為是一個賬號只能有一個程式碼倉庫可以設定，現在才知道是每一個程式碼倉庫可以對應一個，訪問的地址和上面的有所不同，需要在之前的基礎上增加以當前程式碼倉庫名稱的字首，如果程式碼倉庫名稱為test，以我的GitHub為例，則對應這個程式碼倉庫的Pages地址為https://robin-2016.github.io/test/，具體設定在對應程式碼倉庫的Settings下的Pages，基於某一個分支進行部署，還可以直接這個已有的GitHub Actions來執行，如果你發現一個專案下有一個名為gh-pages的分支，大機率就是這個專案的GitHub Pages靜態網站，一些開源專案用的較多。
如果在專案初期，完全可以使用VuePress和GitHub Pages來建立專案的線上文件或專案官網網站，選擇合適的主題或模式即可。