二哥的小破站升級(jí)了！
大家好，我是二哥呀！
二哥的小破站《Java 程序員進(jìn)階之路》之前是用 docsify 生成的，界面我覺(jué)得非常的清爽、干凈和漂亮，但遺憾的是 docsify 生成的靜態(tài)網(wǎng)站沒(méi)有 SEO，于是我就想找一個(gè)有 SEO 功能的靜態(tài)網(wǎng)站搭建神器對(duì)小破站做一次升級(jí)。
好朋友 Guide 哥推薦了 VuePress，說(shuō)非常的不錯(cuò)，SEO 能力算是靜態(tài)網(wǎng)站里面最強(qiáng)的了。那說(shuō)干就干，二哥就花了一周的時(shí)間對(duì)《Java 程序員進(jìn)階之路》做了一次重要的升級(jí)，除了使用 VuePress 建站，還增加了大量新的內(nèi)容，整個(gè)小破站的學(xué)習(xí)價(jià)值又拔高了一大截。
一、關(guān)于 VuePress
VuePress 由兩部分組成，一部分是靜態(tài)網(wǎng)站生成器，一部分是默認(rèn)主題，誕生的初衷是為了增強(qiáng) Vue 的文檔需求。
由于 VuePress 生成頁(yè)面都帶了預(yù)渲染好的 HTML，所以也就具有非常好的加載性能和搜索引擎優(yōu)化，也就是我非常看重的 SEO 能力。
二、實(shí)戰(zhàn) VuePress
第一步，創(chuàng)建目錄并初始化
mkdir?vuepress
yarn?init
為了不破壞原來(lái) docsify 的目錄結(jié)構(gòu)，我是在 docsify 的目錄下重新添加了一個(gè) VuePress 的工作目錄。
第二步，將 VuePress 安裝為本地依賴
yarn?add?-D?vuepress@next
第三步，編輯 package.json 配置 VuePress 的構(gòu)建目錄
{
??"name":?"vuepress-starter",
??"version":?"1.0.0",
??"main":?"index.js",
??"license":?"MIT",
??"devDependencies":?{
????"vuepress":?"^2.0.0-beta.36"
??},
??"scripts":?{
????"docs:dev":?"vuepress?dev?docs",
????"docs:build":?"vuepress?build?docs"
??}
}
第四步，編輯 .gitignore，忽略臨時(shí)目錄和緩存目錄
echo?'node_modules'?>>?.gitignore
echo?'.temp'?>>?.gitignore
echo?'.cache'?>>?.gitignore
第五步，復(fù)制 docsify 原有的 readme.md 到 VuePress 的工作目錄，并啟動(dòng) VuePress 的本地服務(wù)
yarn?docs:dev
第六步，在瀏覽器中輸入 http://localhost:8080 進(jìn)行預(yù)覽
到此為止，一個(gè)本地可用的 VuePress 知識(shí)庫(kù)網(wǎng)站就搭建好了，是不是非常簡(jiǎn)單？
三、實(shí)戰(zhàn) vuepress-theme-hope
由于 VuePress 并不會(huì)注入 meta 標(biāo)簽做 SEO 優(yōu)化，也不會(huì)生成 Sitemap 幫助搜索引擎索引文檔內(nèi)容，所以我選擇了 vuepress-theme-hope 這款主題來(lái)對(duì) VuePress 進(jìn)行強(qiáng)化。
vuepress-theme-hope 并不是一款單純的 VuePress 主題，它可以單獨(dú)拿來(lái)使用，并且里面也包含了十多個(gè)同樣功能完善且強(qiáng)大的插件，比如說(shuō)博客功能。
可以按照文章的分類、標(biāo)簽對(duì)文章進(jìn)行歸類，這樣小伙伴們?cè)趯W(xué)習(xí)的時(shí)候就更方便了。
啟用 vuepress-theme-hope 主題也非常簡(jiǎn)單，只需要執(zhí)行一行命令即可。
npm?init?vuepress-theme-hope@next?docs
docs 為文檔的目錄，這里放 md 文件； VuePress 的配置文件會(huì)在 docs/.vuepress 目錄里生成； node_modules 為 VuePress 的臨時(shí)插件目錄； 為了保證原來(lái)的 docsify 版靜態(tài)網(wǎng)站也能同時(shí)運(yùn)行，我把 docsify 和 VuePress 放在了一起，如果你只需要 VuePress 的話，完全可以新建一個(gè)空的目錄。
如果你在執(zhí)行這條 npm init vuepress-theme-hope@next docs 命令過(guò)程中沒(méi)有出錯(cuò)，那么 vuepress-theme-hope 主題就會(huì)給你生成一個(gè)臨時(shí)的預(yù)覽網(wǎng)站，就像下面這樣子。
接下來(lái)，就可以按照我們想要的風(fēng)格來(lái)設(shè)計(jì)整體網(wǎng)站的結(jié)構(gòu)，主要操作的文件有：
docs/readme.md：VuePress默認(rèn)的首頁(yè)加載文件。docs/home.md：VuePress默認(rèn)的「開始閱讀」文件。
docs/.vuepress/config.ts：VuePress默認(rèn)加載配置的 root 文件。比如說(shuō) iconfont 圖標(biāo)樣式表可以在這里配置。
export?default?defineHopeConfig({
??base:?"/",
??//?build?目錄，靜態(tài)?HTML?會(huì)生成在這個(gè)目錄下
??dest:?"./dist",
??head:?[
????[
??????"link",
??????{
????????rel:?"stylesheet",
????????href:?"http://at.alicdn.com/t/font_3180624_bk5smenwss.css",
??????},
????],
??],
docs/.vuepress/navbar.ts：VuePress默認(rèn)加載的導(dǎo)航欄文件。代碼示例如下所示：
import?{?defineNavbarConfig?}?from?"vuepress-theme-hope";
export?default?defineNavbarConfig([
??{?
????text:?"進(jìn)階之路",?
????icon:?"lujing",?
????link:?"/home.md"?
??},
docs/.vuepress/sidebar.ts：VuePress默認(rèn)加載側(cè)邊欄文件。代碼示例如下所示：
import?{?defineSidebarConfig?}?from?"vuepress-theme-hope";
export?const?sidebarConfig?=?defineSidebarConfig({
??"/nicearticle/":?["readme.md"],
??"/xuexiluxian/":?[
????{
??????text:?"Java學(xué)習(xí)路線",
??????icon:?"java",
??????prefix:?"java/",
??????collapsable:?true,
??????children:?[
????????{
??????????text:?"并發(fā)編程學(xué)習(xí)路線",
??????????icon:?"duoxiancheng",
??????????link:?"thread.md",
????????},
??????],
????},
docs/.vuepress/themeConfig.ts：VuePress默認(rèn)加載的主題文件。
比如說(shuō)暗黑模式、頁(yè)腳 footer、文章展示頁(yè)的配置項(xiàng)、博客的描述等，都可以在這里配置。
??darkmode:?"switch",
??//?navbar
??navbar:?navbar,
??//?sidebar
??sidebar:?sidebarConfig,
??footer:?'豫ICP備2021038026號(hào)-1' ,
??displayFooter:?true,
??pageInfo:?["Author",?"Original",?"Date",?"Category",?"Tag",?"ReadingTime"],
??blog:?{
????intro:?"/about-the-author/",
????sidebarDisplay:?"mobile",
????autoExcerpt:?true,
????avatar:?"/assets/icon/itwanger-282.png",
????description:"沒(méi)有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧?kù)o的港灣，我是不系之舟。",
????medias:?{
??????Zhihu:?"https://www.zhihu.com/people/cmower",
??????Github:?"https://github.com/itwanger",
??????Gitee:?"https://gitee.com/itwanger",
????},
??},
比如說(shuō) giscus 評(píng)論插件也可以在這里配置。
????comment:?{
??????type:?"giscus",
??????repo?:"itwanger/tobeb",
??????repoId:"R_kgDssg",
??????category:"Announcements",
??????categoryId:"DIC_kwDs4COJOx",
??????mapping:"pathname",
??????inputPositio:"bottom"
????},
配置完成后就可以發(fā)評(píng)論了，只不過(guò)需要利用 GitHub 倉(cāng)庫(kù)，有時(shí)候反應(yīng)比較慢。
四、部署小破站
本地預(yù)覽沒(méi)毛病后，剩下的就是同步到 GitHub 倉(cāng)庫(kù)，然后利用 Git 再同步到阿里云服務(wù)器上，之后通過(guò) yarn docs:build 在服務(wù)器上生成靜態(tài)文件，再通過(guò) Nginx 配置一下反向代理，就可以正式啟用小破站了。
貼一下 Nginx 配置代碼吧，可能有些小伙伴需要參考：
//?http?轉(zhuǎn)?https
server?{
????listen???????80;
????server_name??docsify.tobebetterjavaer.com?tobebetterjavaer.com?*.tobebetterjavaer.com;
????return?301?https://$server_name$request_uri;
}
//?VuePress
server?{
????listen???????443?ssl;
????server_name??tobebetterjavaer.com;
????
????root???/home/www/toBeBetterJavaer/dist;
????index??index.html?index.htm;
}
//?docsify
server?{
????listen???????443?ssl;
????server_name??docsify.tobebetterjavaer.com;
????ssl_certificate??????/home/docsify.tobebetterjavaer.com_cert_chain.pem;
????ssl_certificate_key??/homenx/docsify.tobebetterjavaer.com_key.key;
????
????root???/home/www/toBeBetterJavaer;
????index??index.html?index.htm;
}
VuePress 版訪問(wèn)地址：https://tobebetterjavaer.com docsify 版訪問(wèn)地址：https://docsify.tobebetterjavaer.com
這是兩版的首頁(yè)對(duì)比，伯仲之間，VuePress 強(qiáng)就強(qiáng)在了 SEO 上面，讓 SEO 收錄就是我此次升級(jí)小破站的主要訴求。
當(dāng)然了，這個(gè)過(guò)程中還涉及到了很多瑣碎的事情，比如說(shuō)子域名解析啊、子域名 HTTPS 證書啊，服務(wù)器上構(gòu)建 VuePress 啊，踩了不少坑，后面有時(shí)間的話，我再給大家一一分享。
借這個(gè)機(jī)會(huì)，再次感謝一下贊賞過(guò)二哥小破站的伙伴們。
好了，這期就先聊到這里吧。感冒了，渾身難受，希望小伙伴們都能有一個(gè)愉快的周末，倍棒的身體。
沒(méi)有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧?kù)o的港灣，我是不系之舟。
推薦閱讀：