乐趣区

关于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,并提交到搜索引擎平台,再辅助应用多个站长平台,及时发现和优化问题。

具体能够参考:

  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,对作者也是一种激励。

退出移动版