哈嘍大家好啊，我是Hydra。

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

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

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

個人服務(wù)器：http://123.249.45.169:8080/

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

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

準(zhǔn)備工作

安裝node

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

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

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

創(chuàng)建項(xiàng)目

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

yarn create vuepress-theme-hope [dir]

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

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

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

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

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

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

yarn run docs:dev

搭建骨架完成后，我們就可以對具體的內(nèi)容開始定制了，先看一下官方文檔對docs項(xiàng)目文件結(jié)構(gòu)的解釋：

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

• 使用markdown文檔管理頁面內(nèi)容
• 使用ts配置文件進(jìn)行一些基本的配置

了解了項(xiàng)目主要結(jié)構(gòu)后，下面我們分模塊進(jìn)行內(nèi)容的修改。

主頁

項(xiàng)目主頁使用src目錄下的README.md文件來進(jìn)行配置。

首先配置了網(wǎng)站的名稱、標(biāo)題、logo等內(nèi)容，actions中可以添加響應(yīng)的按鈕，features下面對應(yīng)一個個具體的自定義模塊。

頂部導(dǎo)航

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

側(cè)邊欄

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

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

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

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

當(dāng)我們把內(nèi)容和配置都完成后，就可以準(zhǔn)備進(jìn)行部署了，下面有兩個方案，分別是部署到自己的服務(wù)器和使用GitHub Pages。

打包上傳

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

因?yàn)槲矣幸慌_破服務(wù)器在那閑著，所以我第一時間想的是直接部署在服務(wù)器上。因?yàn)闆]啥前端經(jīng)驗(yàn)，我第一時間想的是用nohup加上前面的yarn run命令把項(xiàng)目啟在后臺。

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

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

yarn run docs:build

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

用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

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

Github Pages

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

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

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

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

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

修改配置

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

在我們的倉庫內(nèi)點(diǎn)擊Settings選項(xiàng)卡，注意是當(dāng)前倉庫的Setting，不是成整個賬戶的！

然后選擇Actions下的General，在 Workflow permissions中選擇讀寫權(quán)限 Read and write permissions后，點(diǎn)擊保存。

提交代碼

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

如果流程報錯的話，可以點(diǎn)進(jìn)去查看具體的報錯，一般錯誤都會具體到哪一行，修改對應(yīng)部分即可。例如我之前在md文檔中有一個時間寫的不對，這個地方就會編譯失敗：

設(shè)置部署分支

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

點(diǎn)擊Settings選項(xiàng)卡下的Pages，在Build and deployment中選擇新的分支：

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

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

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

最后

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

并且頁面的樣式也非常好看，響應(yīng)式的布局在手機(jī)、pad等小屏幕上顯示的效果也挺不錯。大家在搭建的過程中，如果有具體細(xì)節(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??