大家好，我是二哥呀！
二哥的小破站《Java 程序員進階之路》之前是用 docsify 生成的，界面我覺得非常的清爽、乾淨和漂亮，但遺憾的是 docsify 生成的靜態網站沒有 SEO，於是我就想找一個有 SEO 功能的靜態網站搭建神器對小破站做一次升級。
好朋友 Guide 哥推薦了 VuePress，說非常的不錯，SEO 能力算是靜態網站裏面最強的了。那說幹就幹，二哥就花了一週的時間對《Java 程序員進階之路》做了一次重要的升級，除了使用 VuePress 建站，還增加了大量新的內容，整個小破站的學習價值又拔高了一大截。
一、關於 VuePress
VuePress 由兩部分組成，一部分是靜態網站生成器，一部分是默認主題，誕生的初衷是爲了增強 Vue 的文檔需求。
由於 VuePress 生成頁面都帶了預渲染好的 HTML，所以也就具有非常好的加載性能和搜索引擎優化，也就是我非常看重的 SEO 能力。
二、實戰 VuePress
第一步，創建目錄並初始化
mkdir vuepress
yarn init
爲了不破壞原來 docsify 的目錄結構，我是在 docsify 的目錄下重新添加了一個 VuePress 的工作目錄。
第二步，將 VuePress 安裝爲本地依賴
yarn add -D vuepress@next
第三步，編輯 package.json 配置 VuePress 的構建目錄
{
"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，忽略臨時目錄和緩存目錄
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
第五步，複製 docsify 原有的 readme.md 到 VuePress 的工作目錄，並啓動 VuePress 的本地服務
yarn docs:dev
第六步，在瀏覽器中輸入 http://localhost:8080 進行預覽
到此爲止，一個本地可用的 VuePress 知識庫網站就搭建好了，是不是非常簡單？
三、實戰 vuepress-theme-hope
由於 VuePress 並不會注入 meta 標籤做 SEO 優化，也不會生成 Sitemap 幫助搜索引擎索引文檔內容，所以我選擇了 vuepress-theme-hope 這款主題來對 VuePress 進行強化。
vuepress-theme-hope 並不是一款單純的 VuePress 主題，它可以單獨拿來使用，並且裏面也包含了十多個同樣功能完善且強大的插件，比如說博客功能。
可以按照文章的分類、標籤對文章進行歸類，這樣小夥伴們在學習的時候就更方便了。
啓用 vuepress-theme-hope 主題也非常簡單，只需要執行一行命令即可。
npm init vuepress-theme-hope@next docs
- docs 爲文檔的目錄，這裏放 md 文件；
- VuePress 的配置文件會在 docs/.vuepress 目錄裏生成；
- node_modules 爲 VuePress 的臨時插件目錄；
- 爲了保證原來的 docsify 版靜態網站也能同時運行，我把 docsify 和 VuePress 放在了一起，如果你只需要 VuePress 的話，完全可以新建一個空的目錄。
如果你在執行這條 npm init vuepress-theme-hope@next docs 命令過程中沒有出錯，那麼 vuepress-theme-hope 主題就會給你生成一個臨時的預覽網站，就像下面這樣子。
接下來，就可以按照我們想要的風格來設計整體網站的結構，主要操作的文件有：
-
docs/readme.md：VuePress默認的首頁加載文件。 -
docs/home.md：VuePress默認的「開始閱讀」文件。
-
docs/.vuepress/config.ts： VuePress默認加載配置的 root 文件。比如說 iconfont 圖標樣式表可以在這裏配置。
export default defineHopeConfig({
base: "/",
// build 目錄，靜態 HTML 會生成在這個目錄下
dest: "./dist",
head: [
[
"link",
{
rel: "stylesheet",
href: "//at.alicdn.com/t/font_3180624_bk5smenwss.css",
},
],
],
-
docs/.vuepress/navbar.ts：VuePress默認加載的導航欄文件。代碼示例如下所示：
import { defineNavbarConfig } from "vuepress-theme-hope";
export default defineNavbarConfig([
{
text: "進階之路",
icon: "lujing",
link: "/home.md"
},
-
docs/.vuepress/sidebar.ts：VuePress默認加載側邊欄文件。代碼示例如下所示：
import { defineSidebarConfig } from "vuepress-theme-hope";
export const sidebarConfig = defineSidebarConfig({
"/nicearticle/": ["readme.md"],
"/xuexiluxian/": [
{
text: "Java學習路線",
icon: "java",
prefix: "java/",
collapsable: true,
children: [
{
text: "併發編程學習路線",
icon: "duoxiancheng",
link: "thread.md",
},
],
},
-
docs/.vuepress/themeConfig.ts：VuePress默認加載的主題文件。
比如說暗黑模式、頁腳 footer、文章展示頁的配置項、博客的描述等，都可以在這裏配置。
darkmode: "switch",
// navbar
navbar: navbar,
// sidebar
sidebar: sidebarConfig,
footer: '<a href="https://beian.miit.gov.cn/" target="_blank">豫ICP備2021038026號-1</a>',
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:"沒有什麼使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣，我是不繫之舟。",
medias: {
Zhihu: "https://www.zhihu.com/people/cmower",
Github: "https://github.com/itwanger",
Gitee: "https://gitee.com/itwanger",
},
},
比如說 giscus 評論插件也可以在這裏配置。
comment: {
type: "giscus",
repo :"itwanger/tobeb",
repoId:"R_kgDssg",
category:"Announcements",
categoryId:"DIC_kwDs4COJOx",
mapping:"pathname",
inputPositio:"bottom"
},
配置完成後就可以發評論了，只不過需要利用 GitHub 倉庫，有時候反應比較慢。
四、部署小破站
本地預覽沒毛病後，剩下的就是同步到 GitHub 倉庫，然後利用 Git 再同步到阿里雲服務器上，之後通過 yarn docs:build 在服務器上生成靜態文件，再通過 Nginx 配置一下反向代理，就可以正式啓用小破站了。
貼一下 Nginx 配置代碼吧，可能有些小夥伴需要參考：
// http 轉 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 版訪問地址：https://tobebetterjavaer.com
- docsify 版訪問地址：https://docsify.tobebetterjavaer.com
這是兩版的首頁對比，伯仲之間，VuePress 強就強在了 SEO 上面，讓 SEO 收錄就是我此次升級小破站的主要訴求。
當然了，這個過程中還涉及到了很多瑣碎的事情，比如說子域名解析啊、子域名 HTTPS 證書啊，服務器上構建 VuePress 啊，踩了不少坑，後面有時間的話，我再給大家一一分享。
借這個機會，再次感謝一下讚賞過二哥小破站的夥伴們。
好了，這期就先聊到這裏吧。感冒了，渾身難受，希望小夥伴們都能有一個愉快的週末，倍棒的身體。