請先點擊鏈接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來建立項目的在線文檔或項目官網網站，選擇合適的主題或模式即可。
