关于vuepress:搭建-VuePress-站点必做的-10-个优化

前言

在《一篇带你用 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，并提交到搜索引擎平台，再辅助应用多个站长平台，及时发现和优化问题。

具体能够参考：

27. VuePress 博客之 SEO 优化（一）sitemap 与搜索引擎收录
28. VuePress 博客之 SEO 优化（二）重定向
29. VuePress 博客之 SEO 优化（三）题目、链接优化
30. VuePress 博客之 SEO 优化（四）Open Graph protocol
31. VuePress 博客之 SEO 优化（五）增加 JSON-LD 数据
32. 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，对作者也是一种激励。