搭建 VuePress 站點必做的 10 個優化-有解無憂

前言

在《一篇帶你用 VuePress + Github Pages 搭建博客》中，我們使用 VuePress 搭建了一個博客，最終的效果查看：TypeScript 中文檔案，

在搭建這樣一個博客后，其實還有很多的優化作業需要做，本篇我們來盤點一下那些完成基礎搭建后必做的 10 個優化，

1. 開啟 HTTPS

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

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

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

購買下載證書
上傳到服務器
開啟 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 牽涉的地方有很多，新手建議先看下基礎的檔案進行學習：

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

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

具體可以參考：

VuePress 博客之 SEO 優化（一）sitemap 與搜索引擎收錄
VuePress 博客之 SEO 優化（二）重定向
VuePress 博客之 SEO 優化（三）標題、鏈接優化
VuePress 博客之 SEO 優化（四） Open Graph protocol
VuePress 博客之 SEO 優化（五）添加 JSON-LD 資料
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 插件了，

但無論你寫哪種插件，都提供了文章：

VuePress 插件：《從零實作一個 VuePress 插件》
Markdown-it 插件：《VuePress 博客優化之拓展 Markdown 語法》

系列文章

博客搭建系列，講解如何使用 VuePress 搭建、優化博客，并部署到 GitHub、Gitee、私有服務器等平臺，

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

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/448159.html

標籤：JavaScript

上一篇：SAP WM初階移動型別設定里的GR Date

下一篇：搭建 VuePress 站點必做的 10 個優化