Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what must be optimized after the establishment of VuePress blog", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what optimizations must be done after the establishment of VuePress blog" this article.

1. Turn on HTTPS

Enabling HTTPS has many advantages, such as the ability to encrypt data transmission, and SEO will also be easier to include:

Google will give priority to HTTPS pages (over equivalent HTTP pages) as canonical pages

To enable HTTPS, our basic steps are as follows:

Purchase download certificate

Upload to the server

Enable Nginx configuration

2. Gzip compression

Turning on Gzip compression will greatly improve the loading speed of the website, and if the server is paid by traffic, it is even more necessary to do it.

If you are using Nginx, you can turn it on directly because of Nginx's built-in Gzip compression module:

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;} 3. Data statistics

After adding data statistics, you can see the visits and sources of the website, which are often added, that is, Baidu statistics and Google statistics. Baidu statistics is recommended in China.

Adding a statistical code is very simple, and it is often only used to add it to the site after the statistical platform generates the code. For example, the statistical code of Baidu is:

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 [XSS _ clean] .insertBefore (hm, s);}) ()

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

4. Functional plug-in

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

For example, the announcement plugin:

Code replication plug-in:

Background music plug-in:

Board Niang plug-in:

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 no-back-end review system based on LeanCloud, while LeanCloud is a Serverless cloud service that provides one-stop back-end services, such as data storage, instant messaging and so on. To use Valine, you need to register LeanCloud, register LeanCloud and use the service, and identity verification is required. The final results are as follows:

Vssue is a Vue-driven, Issue-based comment plug-in, although there are several hosting platforms available, here I use GitHub, and achieve synchronization with my GitHub article issues. The final effect is as follows:

6. Full-text search

VuePress's built-in search only builds search indexes for the page's title, h3, h4, and tags. If you need full-text search, you can use Algolia search.

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

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

7. SEO

If you want your site to be done by search engines, you should do a good job of SEO, and there are many areas involved in SEO. Beginners suggest to take a look at the basic documents to learn:

Baidu search engine Optimization Guide 2.0

Https://ziyuan.baidu.com/college/courseinfo?id=193&page=3

Google search Center "search engine Optimization (SEO) Novice Guide"

Https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn

Many things must be done, such as custom titles, descriptions, keywords, optimize links, redirect, generate sitemap, and submit to the search engine platform, and then assist the use of multiple webmaster platforms to find and optimize problems in a timely manner.

8. PWA compatibility

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

To achieve PWA, we can easily enable our website to achieve desktop icons, offline caching, push notification and other functions.

9. Modify the styl

There is always something in the website style that does not meet your expectations, and sometimes you need to modify the code yourself.

If you want to modify the theme color and VuePress defines 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 = 740px$homePageWidth = 960px// responsive change point $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.

10. Handwritten plug-in

Sometimes, the existing plug-in really does not meet the requirements, you need to write a plug-in yourself, but you should also 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 the VuePress plug-in to implement it, but if we want to add a try button to the code block and click to jump to the corresponding playground page, it is an extension of markdown syntax. You need to write a markdown-it plug-in.

The above are all the contents of the article "what are the optimizations that must be done after the establishment of the VuePress blog?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.