前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。搭建了这样一个博客之后，还有很多优化工作需要去做。在这篇文章中，我们来盘点一下打好基础之后必须要做的10个优化。1.开启HTTPS开启HTTPS有很多优点，比如加密数据传输等，SEO也会更容易收录：谷歌会优先将HTTPS网页（而不是等效的HTTP网页）作为标准网页来开启HTTPS，我们的基本步骤是：购买并下载证书，上传到服务器，开启Nginx配置。具体操作步骤请参考《VuePress 博客优化之开启 HTTPS》2。Gzip压缩启用Gzip压缩将大大提高网站加载速度，尤其是如果服务器使用按流量付费的必做内容。如果你使用的是Nginx，由于Nginx内置了Gzip压缩模块，你可以直接打开它：server{#这里是新的gzip配置gzipon;gzip_min_length1k;gzip_comp_level6；gzip_types应用程序/atom+xml应用程序/geo+json应用程序/javascript应用程序/x-javascript应用程序/json应用程序/ld+json应用程序/manifest+json应用程序/rdf+xml应用程序/rss+xml应用程序/xhtml+xml应用程序/xmlfont/eotfont/otffont/ttfimage/svg+xmltext/csstext/javascripttext/plaintext/xml;}更多关于Gzip压缩的内容请参考3。数据统计添加数据统计后可以看到网站的访问量和来源，经常添加百度统计和谷歌统计，国内推荐使用百度统计。添加统计代码非常简单。通常只在统计平台生成代码后添加到站点后使用。比如百度的统计代码是：请注意，由于VuePress是一个单页应用程序，因此在执行期间不会重新加载页面页面切换，自然不会触发百度统计。所以我们只能统计用户访问过的页面，却不知道他们点击了哪些文章，跳转到了哪些路由。为了实现路由切换时的数据统计，我们还需要监听路由变化，手动上报数据。具体步骤请参考《VuePress 博客优化之添加数据统计功能》4。功能插件如果你想给站点添加各种功能，你不用自己写各种代码，也可以直接使用现成的插件。例如公告插件：代码复制插件：背景音乐插件：看板少女插件：更多插件和效果参考《搭建 VuePress 博客，你可能会用到的一些插件》5。评论功能如果一个网站有评论功能，可以与读者建立沟通，优化网站，及时更新文章中的错误。添加评论功能，主流是使用Valine和Vssue。Valine是一个基于LeanCloud的快速、简洁、高效的无后端评论系统，LeanCloud是一个无服务器的云服务，提供数据存储、即时通讯等一站式后端服务。使用Valine需要注册LeanCloud，注册LeanCloud并使用服务，需要实名认证，最终效果如下：具体操作步骤参考《VuePress 博客优化之增加 Valine 评论功能》，Vssue是一个Vue驱动，Issue-基于评论的插件，虽然有多个主机平台都可以使用。这里我使用的是GitHub，实现了与我的GitHub文章issues的通信，实现了同步。最终效果如下：具体操作步骤参考《VuePress 博客优化之增加 Vssue 评论功能》6。全文搜索VuePress内置的搜索只会对页面的title、h2、h3和标签建立搜索索引。如果需要全文搜索，可以使用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谷歌搜索中心《搜索引擎优化 (SEO) 新手指南 》https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn很多事情一定要做，如自定义标题、描述、关键字、优化链接、重定向、生成站点地图并提交到搜索引擎平台，然后协助使用多个站长平台及时发现和优化问题。具体可以参考：VuePress博客的SEO优化（一）站点地图和搜索引擎索引VuePress博客的SEO优化（二）VuePress博客的重定向SEO优化（三）VuePress博客的标题和链接优化SEO优化（四）打开图协议VuePress博客SEO优化(5)添加JSON-LD数据VuePress博客SEO优化(6)站长工具8.PWA兼容PWA，英文全称：ProgressiveWebApps，中文译名：ProgressiveWebApplication。实现PWA可以很方便的让我们的网站实现桌面图标、离线缓存、推送通知等功能。实现PWA，参考《VuePress 博客优化之兼容 PWA》9。修改风格网站风格总有一些不符合您期望的地方。有时，您需要自己修改代码。如果你想修改主题颜色，VuePress定义了一些变量供以后使用，你可以创建一个.vuepress/styles/palette.styl文件：//Color$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$home/960pWidth=响应式变化点$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/mqyqingfen...微信：“mqyqingfeng”，走进低调务实优秀的中国好青年团，PS：这是一本正经的前端团体。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
