Vuepress-Theme-Hope搭建個(gè)人博客,酷炫又簡(jiǎn)單~
哈嘍大家好啊,我是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í)行:
命令中的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):
搭建骨架完成后,我們就可以對(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目錄下:
打完以后,就可以把dist下的文件扔到服務(wù)器上了,建議先壓縮一下再上傳,能節(jié)省點(diǎn)時(shí)間。當(dāng)然你也可以直接在服務(wù)器上打包,我是因?yàn)榉?wù)器的配置太垃圾才選擇在本地打包。
用unzip命令解壓完成后,修改nginx配置,root直接指向dist解壓后的目錄:
修改完成后重啟nginx:
如果你用的是啥啥云的服務(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:
同樣,頁(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??