10 optimizations you must do to build a VuePress site

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog. Check the final effect: TypeScript Chinese document .

After building such a blog, there is actually a lot of optimization work that needs to be done. In this article, we will take a look at the 10 optimizations that must be done after the basic construction is completed.

1. Enable HTTPS

Turning on HTTPS has many advantages, such as enabling data encryption transmission, etc., and SEO will be easier to include:

Google prefers HTTPS pages over the equivalent HTTP pages as canonical pages

To enable HTTPS, our basic steps are:

1. Purchase a download certificate
2. upload to server
3. Enable Nginx configuration

For specific steps, please refer to "VuePress Blog Optimization: Open HTTPS"

2. Gzip compression

Turning on Gzip compression will greatly improve the loading speed of the website. If the server uses pay-per-traffic, it is even more necessary.

If you are using Nginx, because Nginx has built-in Gzip compression module, you can open it directly:

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;
}

For more information about Gzip compression, please refer to "VuePress Blog Optimization: Open Gzip Compression"

3. Statistics

After adding data statistics, you can see the website access and sources. The ones that are often added are Baidu statistics and Google statistics. It is recommended to use Baidu statistics in China.

It is very simple to add statistical code. It is often only used after the statistical platform generates the code and then adds it to the site. For example, Baidu's statistical code is:

<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>

Just note that since VuePress is a single-page application, during the page switching process, the page will not be reloaded, and Baidu statistics will not be triggered naturally. So we can only count the pages that users visit, but we don't know which articles have been clicked and which routes have been jumped to. In order to achieve data statistics during route switching, we also need to monitor route changes and report data manually.

For more specific steps, please refer to "VuePress Blog Optimization Add Data Statistics Function"

4. Function plugin

If you want to add various functions to the site, you don't have to write all kinds of code yourself, you can also directly use the ready-made plug-ins.

For example, the announcement plugin:

Code copy plugin:

Background music plugin:

Kanban Girl plugin:

For more plugins and effects, refer to "Building a VuePress Blog, Some Plugins You May Use"

5. Comment function

If a website has a comment function, it can establish communication with readers, optimize the site, and update the errors in the article in time.

Add comment function, the mainstream is to use Valine and Vssue.

Valine is a fast, concise and efficient backend-free commenting system based on LeanCloud, which is a serverless cloud service that provides one-stop backend services, such as data storage, instant messaging, and more. To use Valine, you need to register with LeanCloud. To register with LeanCloud and use the service, you need real-name authentication. The final effect is as follows:

For specific operation steps, please refer to "VuePress Blog Optimization: Adding Valine Comments"

Vssue is a Vue-driven, Issue-based commenting plugin. Although there are multiple hosting platforms available, I am using GitHub here, and I have achieved synchronization with my GitHub article issues. The final effect is as follows:

For specific steps, please refer to "VuePress Blog Optimization: Adding Vssue Comments"

6. Full text search

VuePress' built-in search will only build a search index for the page's title, h2, h3, and tags. If you need full text search, you can use Algolia search.

Algolia is a database real-time search service that can provide millisecond-level database search services, and its services can be easily deployed to various scenarios such as web pages, clients, and APPs in the form of APIs.

For example, VuePress official documents use Algolia search. The biggest advantage of using Algolia search is convenience. It will automatically crawl the page content of the website and build an index. You only need to apply for an Algolia service and add some code to the website, just like adding The statistical code is the same, and then a full-text search function can be implemented:

For specific steps, refer to "VuePress Blog Optimization: Open Algolia Full-Text Search"

7. SEO

If you want your site to be done by search engines, you must do a good job in SEO, and there are many places involved in SEO. Novices are advised to read the basic documents to learn:

1. "Baidu Search Engine Optimization Guide 2.0" https://ziyuan.baidu.com/college/courseinfo?id=193&page=3
2. Google Search Center Beginner's Guide to Search Engine Optimization (SEO) https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=en-us

Many things must be done, such as customizing titles, descriptions, keywords, optimizing links, redirecting, generating sitemaps, and submitting them to the search engine platform, and then assisting the use of multiple webmaster platforms to discover and optimize problems in time.

For details, please refer to:

27. SEO Optimization of VuePress Blog (1) Sitemap and Search Engine Index
28. SEO Optimization of VuePress Blog (2) Redirect
29. SEO Optimization of VuePress Blog (3) Title and Link Optimization
30. SEO Optimization of VuePress Blog (4) Open Graph protocol
31. SEO Optimization of VuePress Blog (5) Add JSON-LD Data
32. SEO Optimization of VuePress Blog (6) Webmaster Tools

8. PWA Compatible

PWA, English full name: Progressive Web Apps, Chinese translation: Progressive Web Apps.

Implementing PWA can easily allow our website to implement functions such as desktop icons, offline caching, and push notifications.

To implement PWA, please refer to "VuePress Blog Optimization Compatible PWA"

9. Modify the style

There are always some places in the website style that do not meet your expectations. Sometimes, you need to modify the code yourself.

If you want to modify the theme color, VuePress defines some variables for later use, you can create a .vuepress/styles/palette.styl file:

// 颜色
$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

If you want to customize the style, you can create a .vuepress/styles/index.styl file. This is a Stylus file, but you can also use normal CSS syntax.

For more color modifications, refer to VuePress's palette.styl .

10. Handwriting plugin

Sometimes, the existing plug-ins can't meet the requirements, you need to write a plug-in yourself, but you also need to pay attention to whether we are writing a VuePress plug-in or a markdown-it plug-in. For example, if we copy the code, we can use VuePress plug-in to achieve, but if we want to add a try button to the code block, click to jump to the corresponding playground page, that is to expand the markdown syntax, we need to write a markdown-it plug-in.

But no matter which plugin you write, articles are provided:

1. VuePress plugin: "Implementing a VuePress plugin from scratch"
2. Markdown-it plugin: "VuePress Blog Optimization Extended Markdown Syntax"

series of articles

Blog building series, explain how to use VuePress to build, optimize blog, and deploy to GitHub, Gitee, private server and other platforms.

The series is expected to be about 20 articles, this article is the 33 article, the address of the whole series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", a low-key, pragmatic and excellent Chinese youth group, PS: This is a serious front-end group.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.