preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

After setting up such a blog, there is still a lot of optimization to be done. In this article, we take a look at the 10 optimizations that must be done once the foundation is complete.

1. Open the HTTPS

Enabling HTTPS has many advantages, such as enabling encrypted data transmission, etc. SEO will also be easier to include:

Google will prefer HTTPS web pages over the equivalent HTTP web pages as standard pages

To enable HTTPS, our basic steps are:

  1. Purchase download Certificate
  2. Uploading to the server
  3. Enable Nginx configuration

For details, please refer to “VuePress Blog Optimization: Enabling HTTPS”.

2. Gzip compression

Enabling Gzip compression will greatly improve site loading speed, especially if the server is using pay-per-traffic content.

If you use Nginx, you can directly enable the Gzip compression module in Nginx:

server {
  Here is the new Gzip configuration
  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;
}
Copy the code

More information about Gzip compression can be found in VuePress Blog Optimization to Enable Gzip Compression.

3. Data statistics

After adding data statistics, you can see the site’s access and source situation, often added is baidu statistics and Google statistics, in China, it is recommended to use Baidu statistics.

Adding statistical code is very simple, often only after the statistical platform generated code, add to the site, such as 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>Copy the code

Just note that VuePress is a single page application. During page switching, the page will not be reloaded and baidu statistics will not be triggered. Therefore, we can only count the page visited by the user, but we do not know which articles are opened or which routes are redirected. In order to realize data statistics during route switching, we also need to monitor route changes and report data manually.

For more detailed steps, see VuePress Blog Optimization for Adding Statistics.

4. Functional plug-ins

If you want to add functionality to your site, you don’t have to write your own code. You can use off-the-shelf plug-ins.

For example, the announcement plugin:

Code copy plug-in:

Background music plug-in:

Kanban niang plug-in:

For more plugins and effects see Building a VuePress blog, some plugins you might use

5. Comment function

A website with comments can build communication with readers, improve the site, and update articles with errors.

Add comments, mostly using Valine and Vssue.

Valine is a fast, clean and efficient back-end review system based on LeanCloud, a Serverless cloud service that provides one-stop back-end services such as data storage, INSTANT messaging, and more. To use Valine, you need to register LeanCloud, register LeanCloud and use the service with your real name. The final results are as follows:

For details, please refer to “VuePress Blog Optimization for Adding Valine Comments”.

Vssue is a VUe-driven, issue-based comment plug-in. Although there are multiple hosting platforms available, I use GitHub here and realize the synchronization with my GitHub article issues through. The final effect is as follows:

For details, please refer to “VuePress Blog Optimization to Add Vssue Comments”.

6. Full-text search

VuePress’s built-in search only builds search indexes for page titles, H2, H3, and tags. If you need a full text search, use Algolia.

Algolia is a real-time database search service, which can provide millisecond database search service, and its service can be easily laid out in the form of API to web pages, clients, APPS and other scenarios.

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 codes on the website, just like adding statistical codes. You can then implement a full-text search function:

For details, please refer to “VuePress Blog Optimization to Start Algolia full text Search”.

7. SEO

If you want to be able to do your site search engines, you have to do a good job in SEO, and SEO involves a lot of places, novice advice to look at the basic document to learn:

  1. The baidu search engine optimization guide 2.0 ziyuan.baidu.com/college/cou…
  2. Google search center for the search engine optimization (SEO) newbie guide developers.google.com/search/docs…

Many things must be done, such as custom title, description, keywords, optimization of links, redirection, sitemap generation, and submitted to the search engine platform, and then auxiliary use of multiple webmaster platforms, timely discovery and optimization of problems.

Please refer to:

  1. VuePress blog SEO Optimization (1) Sitemap and Search engines included
  2. VuePress SEO Optimization (II) redirection

8. PWA compatible

PWA (Progressive Web Apps)

PWA can facilitate our website to achieve desktop ICONS, offline cache, push notification and other functions.

To implement PWA refer to “PWA Compatibility with VuePress Blog Optimization”

9. Modify styles

There’s always something about a website style that doesn’t meet your expectations, and sometimes you need to change the code yourself.

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

/ / color
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

/ / layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// Response change point
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px
Copy the code

If you want a custom 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 changes, see Palette. Styl in VuePress.

10. Handwriting plug-ins

Sometimes, existing plugins are not enough and you need to write your own plugin, but you have to pay attention to whether we are writing a VuePress plugin or a Markdown-it plugin. For example, if we are copying code, we can use the VuePress plugin to do this. But if we were to add a try button to our code block and click to jump to the corresponding playground page, that would extend the markdown syntax and we would need to write a markdown-it plug-in.

But no matter what kind of plugin you’re writing, there are articles:

  1. VuePress plug-in: “Build a VuePress plug-in from scratch”
  2. Markdown- It plugin: Extension Markdown syntax for VuePress Blog Optimization

series

Blog Building series explains how to use VuePress to build, optimize and deploy a blog to GitHub, Gitee, private servers and other platforms. This is the 33rd article in the series. Address: github.com/mqyqingfeng…

Wechat: “MQyQingfeng”, into the low-key pragmatic excellent Chinese youth group, PS: this is a serious front group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.