搭建 VuePress 站點必做的 10 個優化

冴羽發表於2022-03-29
Vue優化

前言

在 《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，最終的效果檢視：TypeScript 中文文件。

在搭建這樣一個部落格後，其實還有很多的優化工作需要做，本篇我們來盤點一下那些完成基礎搭建後必做的 10 個優化。

1. 開啟 HTTPS

開啟 HTTPS 有很多好處，比如可以實現資料加密傳輸等，SEO 也會更容易收錄：

Google 會優先選擇 HTTPS 網頁（而非等效的 HTTP 網頁）作為規範網頁

開啟 HTTPS，我們的基本步驟是：

  1. 購買下載證照
  2. 上傳到伺服器
  3. 開啟 Nginx 配置

具體的操作步驟，可以參考 《VuePress 部落格優化之開啟 HTTPS》

2. Gzip 壓縮

開啟 Gzip 壓縮將會極大的提高網站載入速度，如果伺服器用的是按流量付費，就更是必須要做的內容。

如果使用的是 Nginx，由於 Nginx 內建 Gzip 壓縮模組，可以直接開啟：

server {
  # 這裡是新增的 gzip 配置
  gzip on;
  gzip_min_length 1k;
  gzip_comp_level 6;
  gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;
}

關於 Gzip 壓縮更多內容可以參考 《VuePress 部落格優化之開啟 Gzip 壓縮》

3. 資料統計

新增資料統計後，可以看到網站的訪問和來源情況，常新增的也就是百度統計和谷歌統計，在國內建議用百度統計。

新增統計程式碼很簡單，往往只用在統計平臺生成程式碼後，新增到站點就行，就比如百度的統計程式碼為：

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?82a3f80007c4e88c786f3602d0b8a215";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

只是要注意，由於 VuePress 是單頁應用，頁面切換過程中，不會重新載入頁面，自然也不會觸發百度統計。所以我們只能統計到使用者訪問了頁面，但具體點開了哪些文章，跳轉了哪些路由並不知道。為了實現路由切換時的資料統計，我們還需要監聽路由改變，手動上報資料。

更具體的步驟可以參考《VuePress 部落格優化之新增資料統計功能》

4. 功能外掛

如果要給站點新增各種功能，不一定就要自己手寫各種程式碼，也可以直接利用現成的外掛。

比如公告外掛：

程式碼複製外掛：

背景音樂外掛：

看板娘外掛：

更多的外掛和效果參考《搭建 VuePress 部落格，你可能會用到的一些外掛》

5. 評論功能

一個網站如果有評論功能，可以與讀者建立交流，優化站點，也可以及時更新文章中的錯誤。

新增評論功能，主流是使用 Valine 和 Vssue。

Valine 是一款基於 LeanCloud 的快速、簡潔且高效的無後端評論系統，而 LeanCloud 是一種 Serverless 雲服務，提供了一站式的後端服務，如資料儲存、即時通訊等等。使用 Valine，需要註冊 LeanCloud，註冊 LeanCloud 並使用服務，需要實名認證，最終實現的效果如下：

具體的操作步驟參考《VuePress 部落格優化之增加 Valine 評論功能》

而 Vssue 是一個 Vue 驅動的、基於 Issue 的評論外掛，雖然有多個託管平臺可以使用，這裡我使用的是 GitHub，並且實現了與我 GitHub 的文章 issues 打通，實現了同步。最終的效果如下：

具體的操作步驟參考 《VuePress 部落格優化之增加 Vssue 評論功能》

6. 全文搜尋

VuePress 的內建搜尋只會為頁面的標題、h2 、 h3 以及 tags 構建搜尋索引。 如果你需要全文搜尋，可則以使用 Algolia 搜尋。

Algolia 是一個資料庫實時搜尋服務，能夠提供毫秒級的資料庫搜尋服務，並且其服務能以 API 的形式方便地佈局到網頁、客戶端、APP 等多種場景。

像 VuePress 官方文件就是使用的 Algolia 搜尋，使用 Algolia 搜尋最大的好處就是方便，它會自動爬取網站的頁面內容並構建索引，你只用申請一個 Algolia 服務，在網站上新增一些程式碼，就像新增統計程式碼一樣，然後就可以實現一個全文搜尋功能：

具體的步驟參考 《VuePress 部落格優化之開啟 Algolia 全文搜尋》

7. SEO

如果希望自己的站點能被搜尋引擎做到，就要做好 SEO，而 SEO 牽涉的地方有很多，新手建議先看下基礎的文件進行學習：

  1. 《百度搜尋引擎優化指南2.0》https://ziyuan.baidu.com/college/courseinfo?id=193&page=3
  2. Google 搜尋中心《搜尋引擎優化 (SEO) 新手指南 》https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn

很多事情是一定要做的，比如自定義標題、描述、關鍵詞，優化連結、重定向、生成 sitemap，並提交到搜尋引擎平臺，再輔助使用多個站長平臺，及時發現和優化問題。

具體可以參考：

  1. VuePress 部落格之 SEO 優化（一）sitemap 與搜尋引擎收錄
  2. VuePress 部落格之 SEO 優化（二）重定向
  3. VuePress 部落格之 SEO 優化（三）標題、連結優化
  4. VuePress 部落格之 SEO 優化（四） Open Graph protocol
  5. VuePress 部落格之 SEO 優化（五）新增 JSON-LD 資料
  6. VuePress 部落格之 SEO 優化（六）站長工具

8. PWA 相容

PWA，英文全稱：Progressive Web Apps， 中文翻譯：漸進式 Web 應用。

實現 PWA，可以方便的讓我們的網站實現桌面圖示、離線快取、推送通知等功能。

要實現 PWA 參考 《VuePress 部落格優化之相容 PWA》

9. 修改樣式

網站樣式總有一些不滿足你期望的地方，有的時候，就需要自己修改程式碼。

如果你要修改主題色，VuePress 定義一些變數供以後使用，你可以建立一個 .vuepress/styles/palette.styl 檔案：

// 顏色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// 佈局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// 響應式變化點
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

如果你要自定義樣式，你可以建立一個 .vuepress/styles/index.styl 檔案。這是一個 Stylus檔案，但你也可以使用正常的 CSS 語法。

更多的顏色修改參考 VuePress 的 palette.styl。

10. 手寫外掛

有的時候，現有的外掛實在滿足不了要求，你就需要自己寫一個外掛了，但是你還要注意，我們寫的是一個 VuePress 外掛還是一個 markdown-it 外掛，比如我們複製程式碼，我們可以使用 VuePress 外掛來實現，但是如果我們要給程式碼塊加一個 try 按鈕，點選跳轉到對應的 playground 頁面，那就是擴充 markdown 語法了，就需要寫一個 markdown-it 外掛了。

但無論你寫哪種外掛，都提供了文章：

  1. VuePress 外掛：《從零實現一個 VuePress 外掛》
  2. Markdown-it 外掛：《VuePress 部落格優化之擴充 Markdown 語法》

系列文章

部落格搭建系列，講解如何使用 VuePress 搭建、優化部落格，並部署到 GitHub、Gitee、私有伺服器等平臺。

系列預計 20 篇左右，本篇為第 33 篇，全系列文章地址：https://github.com/mqyqingfen...

微信：「mqyqingfeng」，進低調務實優秀的中國好青年群，PS：這是一個正經的前端群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章