哈嘍大家好啊，我是Hydra。

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

是不是還挺好看？下面附上可以直接訪問(wèn)的地址，兩個(gè)鏈接都可以直接訪問(wèn)，后面會(huì)說(shuō)一下部署方式的不同：

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

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

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

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

準(zhǔn)備工作

安裝node

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

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

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

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

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

yarn create vuepress-theme-hope [dir]

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

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

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

安裝完成后，可以選擇啟動(dòng)demo查看，在瀏覽器訪問(wèn)8080端口，可以看到頁(yè)面：

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

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

yarn run docs:dev

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

先說(shuō)一下感受，整個(gè)vuepress-theme-hope用下來(lái)，基本不需要我們寫什么代碼，需要做的就兩件事：

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

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

主頁(yè)

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

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

頂部導(dǎo)航

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

側(cè)邊欄

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

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

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

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

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

打包上傳

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

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

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

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

yarn run docs:build

打完以后，就可以把dist下的文件扔到服務(wù)器上了，建議先壓縮一下再上傳，能節(jié)省點(diǎn)時(shí)間。當(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ù)器的話，一般還需要在安全策略里開放需要的對(duì)應(yīng)端口，之后就可以直接在瀏覽器訪問(wèn)啦。

Github Pages

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

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

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

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

同樣，頁(yè)面訪問(wèn)的域名也會(huì)不一樣，最終需要訪問(wèn)https://<USERNAME>.github.io/<REPO>/。

修改配置

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

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

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

提交代碼

我們?cè)诒镜豴ush代碼后，點(diǎn)擊Actions選項(xiàng)卡，如果沒有什么錯(cuò)誤的話，過(guò)一會(huì)就能看到兩個(gè)工作流執(zhí)行成功了。

如果流程報(bào)錯(cuò)的話，可以點(diǎn)進(jìn)去查看具體的報(bào)錯(cuò)，一般錯(cuò)誤都會(huì)具體到哪一行，修改對(duì)應(yīng)部分即可。例如我之前在md文檔中有一個(gè)時(shí)間寫的不對(duì)，這個(gè)地方就會(huì)編譯失?。?/p>

設(shè)置部署分支

我們?cè)谇懊孀约捍虬倪^(guò)程中知道了，打包后的內(nèi)容位于src/.vuepress/dist/目錄下，而項(xiàng)目中的工作流會(huì)默認(rèn)將這個(gè)目錄的內(nèi)容推送到一個(gè)新的gh-pages 分支，因此我們還需要額外設(shè)置部署頁(yè)面的分支。

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

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

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

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

最后

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

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

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

參考資料：

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

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

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