哈嘍大家好啊，我是Hydra。

最近有點時間，把以前寫過的文章弄在一起，使用vuepress-theme-hope搭了一個小破站，先來看看效果~

是不是還挺好看？下面附上可以直接訪問的地址，兩個鏈接都可以直接訪問，后面會說一下部署方式的不同：

GitHub Page：https://trunks2008.github.io/

個人服務器：http://123.249.45.169:8080/

不要問我為啥個人服務器上不給弄個域名，看了同事給我發(fā)了一堆ICP備案需要準備的材料和流程，我直接選擇了放棄…

下面簡單記錄一下使用vuepress-theme-hope搭建網站的流程和踩過的坑，有興趣的小伙伴也可以按著這個步驟自己搭建。

準備工作

安裝node

node直接從官網下載，vuepress-theme-hope支持16的某些版本和18以后的版本，保險起見大家直接下最新的18就好了：

??https://nodejs.org/zh-cn/download??

無腦點擊下一步安裝，完成后node -v本地查看一下，能顯示版本號就表示安裝成功了。

創(chuàng)建項目

新創(chuàng)建一個目錄，在命令行窗口下執(zhí)行：

yarn create vuepress-theme-hope [dir]

命令中的dir是一個參數，使用真實的目錄名替換即可。在創(chuàng)建項目的過程中，會有一些選項讓你選擇：

除去一些沒啥用的配置，比較重要的是項目的類型，可以選擇博客blog和文檔docs兩種類型，頁面會有比較大的差異，我這里選擇的是docs類型。

除此之外，如果之后你想把網站掛到GitHub Pages上的話，在詢問是否創(chuàng)建工作流的地方記得選一下yes。

安裝完成后，可以選擇啟動demo查看，在瀏覽器訪問8080端口，可以看到頁面：

如果選擇blog類型的話，則是下面的效果：

安裝完成后也可以選擇先不運行，之后自己用指令啟動：

yarn run docs:dev

搭建骨架完成后，我們就可以對具體的內容開始定制了，先看一下官方文檔對docs項目文件結構的解釋：

先說一下感受，整個vuepress-theme-hope用下來，基本不需要我們寫什么代碼，需要做的就兩件事：

• 使用markdown文檔管理頁面內容
• 使用ts配置文件進行一些基本的配置

了解了項目主要結構后，下面我們分模塊進行內容的修改。

主頁

項目主頁使用src目錄下的README.md文件來進行配置。

首先配置了網站的名稱、標題、logo等內容，actions中可以添加響應的按鈕，features下面對應一個個具體的自定義模塊。

頂部導航

頂部導航需要修改src/.vuepress/navbar目錄下的配置文件，默認存在中英文兩套配置文件，修改需要的文件就行?；旧暇褪桥渖衔淖帧D標、鏈接就可以了，并且導航支持二級目錄，如果需要可以添加children節(jié)點。

側邊欄

側邊欄需要修改src/.vuepress/sidebar下的配置文件。

這個prefix對應具體文檔的存放目錄，如果目錄下還有子目錄的話，會自動生成二級的側邊欄，每個目錄下存放的markdown文檔會被渲染成頁面的具體內容。

文檔中正文前面的部分用于配置文章標題、圖標、排序、作者、日期和標簽等內容，正文部分直接貼在more之后即可。文檔的文件名對應生成鏈接的路徑，建議使用全英文，我之前使用的中英文混雜在打包的時候有時候會報一些奇奇怪怪的錯誤。

此外，項目中使用到的圖片可以存放在src/.vuepress/public目錄下，如果需要查找好看的圖標的話，可以查看文檔中的iconfont的使用步驟，個人實測iconfont生成的在線css鏈接就算有cdn加持也非常緩慢，所以我還是老老實實找了些默認圖標使用。

當我們把內容和配置都完成后，就可以準備進行部署了，下面有兩個方案，分別是部署到自己的服務器和使用GitHub Pages。

打包上傳

如果你有前端部署經驗的話，那么完全可以跳過這一節(jié)，這一節(jié)完全是寫給我這種前端小白來參考的。

因為我有一臺破服務器在那閑著，所以我第一時間想的是直接部署在服務器上。因為沒啥前端經驗，我第一時間想的是用nohup加上前面的yarn run命令把項目啟在后臺。

也不知道為啥這個進程總是在我關閉ssh客戶端一會后就被自動殺死了，于是我問了一下前端的同事，知道了得把打包完成后的dist掛到nginx下面運行才行。

先使用下面的命令在本地打包，打完的內容在src/.vuepress/dist目錄下：

yarn run docs:build

打完以后，就可以把dist下的文件扔到服務器上了，建議先壓縮一下再上傳，能節(jié)省點時間。當然你也可以直接在服務器上打包，我是因為服務器的配置太垃圾才選擇在本地打包。

用unzip命令解壓完成后，修改nginx配置，root直接指向dist解壓后的目錄：

server {
    listen       8080;
    server_name  localhost;
    location / {
        root   /home/hydra/dist/dist;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }
}

修改完成后重啟nginx：

./nginx -s reload

如果你用的是啥啥云的服務器的話，一般還需要在安全策略里開放需要的對應端口，之后就可以直接在瀏覽器訪問啦。

Github Pages

如果不想把博客建在自己服務器上的話，還有一個白嫖GitHub的方法，這一塊依賴于之前創(chuàng)建項目時選擇的添加github的WorkFlow工作流。

先創(chuàng)建一個public的倉庫，注意倉庫名格式是<USERNAME>.github.io，在創(chuàng)建倉庫的時候也會提示你這是一個比較特殊的倉庫，這樣等我們完成部署后就直接可以用https://<USERNAME>.github.io/這個域名來訪問站點了。

如果建別的倉庫名的話，還需要修改項目的config.tx文件中的base：

export default defineUserConfig({
  base: "/<REPO>/",
  //...
 }

同樣，頁面訪問的域名也會不一樣，最終需要訪問https://<USERNAME>.github.io/<REPO>/。

修改配置

創(chuàng)建完倉庫后先不要急著上傳代碼，我們需要先修改一個配置。

在我們的倉庫內點擊Settings選項卡，注意是當前倉庫的Setting，不是成整個賬戶的！

然后選擇Actions下的General，在 Workflow permissions中選擇讀寫權限 Read and write permissions后，點擊保存。

提交代碼

我們在本地push代碼后，點擊Actions選項卡，如果沒有什么錯誤的話，過一會就能看到兩個工作流執(zhí)行成功了。

如果流程報錯的話，可以點進去查看具體的報錯，一般錯誤都會具體到哪一行，修改對應部分即可。例如我之前在md文檔中有一個時間寫的不對，這個地方就會編譯失?。?/p>

設置部署分支

我們在前面自己打包的過程中知道了，打包后的內容位于src/.vuepress/dist/目錄下，而項目中的工作流會默認將這個目錄的內容推送到一個新的gh-pages 分支，因此我們還需要額外設置部署頁面的分支。

點擊Settings選項卡下的Pages，在Build and deployment中選擇新的分支：

我們在項目下切換一下分支，就可以看到其實這個分支用來存放的是打包完成后生成的可以顯示的html頁面：

在切換了部署的分支后，項目會自動重新執(zhí)行一遍工作流，再過上一會就可以使用域名https://<USERNAME>.github.io/來訪問頁面了。

并且，在以后每次修改完代碼并push后，都會自動觸發(fā)工作流，自動更新頁面。

最后

可以看到，使用vuepress-theme-hope搭建文檔或博客還是非常簡單的，基本上都是配置的工作，不用我們寫什么代碼，對前端小白同學們非常友好。

并且頁面的樣式也非常好看，響應式的布局在手機、pad等小屏幕上顯示的效果也挺不錯。大家在搭建的過程中，如果有具體細節(jié)部分的疑問，可以多翻官方文檔，基本都能找到答案。

那么，這次的分享就到這里，我是Hydra，我們下篇再見。

參考資料：

??https://vuepress-theme-hope.gitee.io/v2/zh/??

??https://zhuanlan.zhihu.com/p/494269087??

??https://blog.csdn.net/INT_FUTURE/article/details/128975977??