Required preface
This article is long and covers a wide range of areas. It takes about half an hour to read the whole article. It is suggested that time-pressed masters can first collect the article, then read carefully when free, personal preview DEMO, the specific tools involved in the article we can pay attention to the public number “cloud crawler technology research notes” reply key words “blog” to obtain “one-key graph bed tool” and “lossless compression tool”.
The term “personal blog” has been around for a long time, and for programmers, it’s a kind of “personal paradise” for programmers, where programmers can fly off the deep end. There are many ways to set up a “personal blog”, such as:
- Take advantage of existing blogging communities, for example
CSDN,zhihuAnd so on; - Develop the front and back ends yourself, using a familiar language, and deploy the project to a private server.
- Use the ready-made blog to build the framework, combined with the third-party platform for deployment, and through the third-party platform maintenance;
Of course, each approach has its own pros and cons:
- The blog community has tremendous readership, SEO optimization, ready-made writing tools, data analysis reports, and more; But the disadvantage is that it is not free enough, like the monochrome style of zhihu columns; Like the disgusting restrictions that CSDN imposes on people who can’t view articles without logging in; Like… Well… defeated by the constraints of these sites…
- Oneself do all the work, have great authority, think how to change how to change, of course ~~ as long as you will. But the bitter is to server, to learn front-end framework, back-end framework, learn… Well, the lazy people say no!
- Make use of the existing blog construction framework, the framework of building personal blog is changed generation after generation, from the earliest WordPress based on Php development, to the later Jekyll based on Ruby development, and in recent years with convenient deployment, Compilation speed features based on Node fire up rapidly development Hexo and based on the Go, Hugo, is to let a person is very easy to use, and can be combined with making platform of abroad and domestic yards cloud platform for deployment, skilled words like 10 minutes to deploy your blog, really is a lazy person party, stretched out his hand and the party’s Gospel. Of course, there are some disadvantages, not as high degree of freedom as self-built blog, not as good as the blog community optimization degree, but on second thought, combined with a reasonable degree of freedom plus our own simple optimization is also ok.
Good! After reading the above analysis, we are going to use the ready-made blog framework to do, in fact, there are many online tutorials about each framework, but more about how to build a blog from 0 to 1 step by step process, and did not introduce the follow-up to build a blog, here to you point to the end of the author a bad comment! To a question more than even!
- Just set up your blog?
- Do not do image, Js script load optimization?
- Don’t do SEO optimization?
- No introduction to custom development?
- How can better combine their own public number? Well! Yes, I believe that many people will have the same question after building a blog, so this article will give you a satisfactory answer, I will not repeat those steps to build, we can search the tutorial ha, this article focuses on how to build blog ecology, enhance the forced grid of blog! Again:
This article is long and covers a wide range of areas. It takes about half an hour to read the whole article. The suggestion time pressing big guy people can collect article first, after leisure time again fine read.
Hexo blog ecosystem
Without further ado, let’s start with the following points (PS: Why Hexo? In today’s era of Hugo’s strong performance, Although Hexo’s performance is lower, it is also based on the dynamic language Node, which is a big improvement over Jekyll. However, for me, the most important thing is that Hexo’s ecosystem is rich in various components and templates. For me, who is a strict UI person, Hexo is something I can’t refuse!) .
- The template selection
- Modify template customization
- Web site SEO
- Code optimization
- Optimize site loading speed
- Github+Coding is dual-line deployment at home and abroad
- Self-built CDN resources
- The site preloads the JS script
- Quick graph bed tool
1. Select a template
Many people will question why template selection should be mentioned? If you do not pay attention to this that you are wrong, is also a good template, the appearance of the blog a structure clear, user-friendly template will make readers quickly find the key to your blog and will also promote the retention rate of readers, a rich modules are also more modules can you express yourself, show you more talents to the readers. Github has a lot of templates to look at:
We can search Hexo directly and sort by the number of stars to start looking for the templates we want. Of course, in order to find templates more intuitively, we can go to Hexo’s official website and directly view the style diagrams of each template.
PS: As a bonus, HEXo-Theme-matery, a matery template I’ve been looking for for a long time, is also developed by Blinkfox matery, complete with Chinese instructions and extremely user-friendly for beginners.
We easily adapted the document to look like our own blog
2. Customize the template
A lot of tutorials stop at this point, so readers have to search for customizable templates, which is really troublesome. Here I compare the customization of other templates and summarize the following essential customization:
2.1 Adding a 404 Page
The original theme didn’t have a 404 page, so we’ll add one. We can create a 404 directory according to Hexo syntax:
hexo new page "404"
Copy the codeWe can then edit the index.md file under source/404/
---
title: 404
permalink: /404
type: "404"
layout: "404"
date: 2019-11-18 23:49:08
---
## explosion, the page exploded!
Copy the codeIf we need additional 404 styles, we can refer to the 404 Template home, which I just found out exists.
2.2 Adding a Comment plug-in
This blog uses Gittalk, and the configuration is as follows:
Of course, you can also use other comments plug-in, just need to configure the corresponding item is, not own can follow the online tutorial to get a, there are many similar articles, you can search the keyword on the line.
2.3 Adding the netease Cloud Music BGM
When writing an article, want to insert a paragraph BGM how to do?
- First of all, we found netease cloud online platform, click any song to play, you can get the music in the address bar
IDNo. - Then use the following url:Music.163.com/song/media/…
XXXXXXIs the songIDNumber, we just need to change this for every songIDNumber on the line, it is equivalent to the outside chain of every song - The final cover image can also be pressed
F12Go to the page element link and fill in the correspondingmusics.jasonYou can fill it in in batches in your files, and you can change it whenever you hear a good song and add it whenever you want. It’s very convenient.
The main modifications are these three parts, and the rest can be customized according to your special preferences. In fact, Hexo customization templates are also universal, so you can directly search for Hexo modifications.
3. The SEO optimization
In the past, programmers probably wrote articles to allow themselves to accumulate skills and summarize their skills once in a while. However, with the rapid development of “we media” nowadays, we need to let more people know ourselves when we are precipitation technology, of course, we also need to make a little fame in the technology circle ~~, how can we let more people know ourselves? SEO is a the things I need to know, SEO search engine optimization (SEO), refers to the structure adjustment and through on-site optimization such as website content construction, site code optimization and off-site optimization, in other words, the equivalent of website promotion, website promotion is a boring thing, especially for concentration of technical, may not be very good at it, So here are two simple SEO skills.
3.1 Let Baidu include your site
- Check whether Baidu includes your site
The first thing to do is to let the major search engines included your site, we just built the site when each search engine is not included in our site, in the search engine enter site:< domain name >, if as shown in the following picture is that our site is not included by Baidu. We can submit our website directly by clicking “URL Submission” below
- Actively add sites
Log in to the Baidu webmaster search platform: zhanzhang.baidu.com. As long as you have a Baidu account, you can log in. After login, click add Website in site management and enter your site address.
After filling in the URL to select the type of the site, you need to verify the ownership of the site. There are three ways to verify the ownership of the site:
- File validation.
- HTML tag validation
- CNAME parsing validation (recommended)
CNAME parsing validation is recommended because it is the simplest and requires only one parsing
- Generating a site map
We need to use NPM to automatically generate the sitemap of the site, and then submit the generated sitemAP to Baidu and other search engines
Install the Sitemap plug-in
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
Copy the codeModify the blog profile
Change the URL to your site address in the root configuration file. Yml
After execution hexo g command will in the root directory to generate a sitemap site. The XML file and baidusitemap. The XML file, can through: cloudcrawler. Club/baidusitema… To check whether the file is generated. The sitemap. XML file is a common file for search engines, and baidusItemap. XML is a special sitemap file for Baidu.
Why create a sitemap? The main reason is that the sitemap said the structure of your blog site, for example, a classification and so on, which of the following article is baidu spiders to crawl your convenient time as soon as possible to cover all the posts that you want to crawl, facilitate their included, but we speak we will voluntarily submit to baidu link below, in this case, site map also seems not so important.
- Submit links to Baidu
We can submit the sitemap file we generated before to Baidu, or find the link to submit on baidu Webmaster platform. Here we can see that there are two submission methods, automatic submission and manual submission. Automatic submission is divided into active push, automatic push and Sitemap.
1. Active push: the fastest submission method. It is recommended that you immediately push the new output links of the site to Baidu in this way to ensure that the new links can be included in Baidu in a timely manner. 2. Automatic push: the most convenient way to submit, please automatically push the 'JS' code deployed in each page of the site source code, deployment code page in every browsing, the link will be automatically pushed to Baidu. It can be used with active push. 3. 'Sitemap' : You can periodically put website links into 'Sitemap', and then submit 'Sitemap' to Baidu. Baidu will periodically grab and check the 'sitemap' submitted by you, and process the links among them, but the inclusion speed is slower than active push. 4. Manual submission: submit the link to Baidu in a one-time manner.Copy the codeGenerally, active submission is better than manual submission. Here are three methods of active submission
In terms of efficiency:
Active Push > Automatic Push > SitemapCopy the codeWe will actively push the specific operation below
- Set active push install plugin hexo-bidu-URL-submit
npm install hexo-baidu-url-submit --save
Copy the codeThen add fields to the configuration file in the root directory
baidu_url_submit:
count: 80 # submit the latest link
host: www.sunhwee.com # Registered domain name in Baidu webmaster platform
token: xxxxxxxxxxxxxx # Please note that this is your secret key, so please do not publish the blog source code in a public repository!
path: baidu_urls.txt The address of the text document in which the new link will be saved
Copy the codeAdd a new deploy:
deploy:
- type: baidu_url_submitter
Copy the codeThe location of the key is in the link submission section of the web crawl, as shown below:
hexo deploy
When the push succeeds, the following prompt is displayed
Generally speaking, push failure is basically caused by inconsistent address. We just need to compare the address of baidu_url_submit generated in public with the address of baidu_url_submit in the host field to see if it is the same.
3.2 Other search engine optimization
Other search engines are similar to Google, Sogou, 360search and so on. However, Baidu and Google are generally used frequently by most programmers. Therefore, only these two search engines need to be included.
3.3 Optimize your URL
Seo seo believes that the optimal structure of a site is for users to reach any page with three clicks from the front page, but our hexo-compiled site opens the article at a URL like: Sitename/year/mounth/day/title four layers of structure, so the url of the structure is not conducive to seo, the crawler will often climb less than our articles, so we need to optimize your website url.
Solution a:
We can change the url directly to sitename/title, preferably in English. In the configuration file of the root directory, change permalink as follows:
url: https://cloudcrawler.club
root: /
permalink: :title.html
permalink_defaults:
Copy the codeScheme 2:
Optimize urls with plug-ins
The hexo-AbbrLink plug-in implements this functionality by converting and re-encoding the original URL address.
Install hexo – abbrlink.
npm install hexo-abbrlink --save
Copy the codeConfigure the _config.yml file in the blog root directory.
permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # crC16 (default) and CRC32
rep: hex Dec (default) and hex
Copy the codeRun hexo clean and hexo g to regenerate the file and you can clearly see that the URL structure has successfully changed to tier 3.
3.4 Other SEO optimization
Seo optimization should be a benefits the behavior, the delay may effect of optimization in the short term can’t see what you do, but must insist, seo optimization is also can have deep research, from our initial website design, and selection of the most basic tag has a lot to do, website design as we have just said, To allow users to click three times to get to any page on the site, add high-quality links, add relevant recommendations (for example, we often see the top read list on the right side of the site), and then add keywords and descriptions to each page
In the code, we should write semantic HTML that can be recognized by browsers to help crawlers capture more effective information: crawlers rely on tags to determine the context and weight of each keyword; And set the nofollow tag on the external chain to avoid spiders crawling out (reduce the jump rate of the website), and we should try our best to increase the exposure rate of our site on some relatively large websites, because spiders often visit big sites, for example, we published articles in nuggets and other technical communities with our site. Spiders are likely to crawl into our sites, so… .
- Site outside the chain of promotion, quantity and quality
- The internal chain of the site is strong enough
- The original quality of the site
- The age of the site
- How often the site is updated (the more the better)
- The site’s server
- Site traffic: the higher the traffic, the higher the weight of the site
- The keyword ranking of the site: the higher the keyword ranking, the higher the weight of the site
- The number of site included: the number of baidu site included, the higher the weight of Baidu site
- Site traffic and depth: the better the user experience, the higher the weight of the site baidu
4. Code optimization
Code optimization mainly want to let our block of code that shows the line number and the overall copy, both for readers in browsing articles and duplicated code is a very key points, so we also want to optimize, since the code highlight the style of the plugin prism_plugin solid block replication no line number and code, is not very convenient, To optimize the look and ease of use, we can modify it:
4.1 Turn on line numbers for code blocks
We found the prism_plugin configuration item line_number in the configuration file.yml: False (# default false) is changed to true to turn on the line number, which is invalid in our matery theme. There is a bug that needs to change the matery. CSS style parameter.
Pre {padding: 1.5rem! important; margin: 1rem 0 ! important; background:# 272822;overflow: auto; Border - the radius: 0.35 rem; tab-size: 4; }Copy the codeInstead of
Pre {padding: 1.5 REM 1.5 REM 3.3 REM! important; margin: 1rem 0 ! important; background:# 272822;overflow: auto; Border - the radius: 0.35 rem; tab-size: 4; }Copy the codeComment out the font size item in the next code block as follows:
code {
padding: 1px 5px;
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; / * the font - size: 0.91 rem; */ color:#e96900;
background-color: #f8f8f8;
border-radius: 2px;
}
Copy the codeNow you can display the line number, as shown in the figure below:
The ability to copy code as a whole is now integrated in the plug-in.
Optimize site loading speed
5.1 Optimize image loading
There are two common ways to optimize the speed of image loading on your website: The first is to use image lazy loading, and Hexo already has a plugin for this — hexo-lazyload-image. The way hexo-lazyload-image works is to replace the SRC attribute of the img tag in your blog with a loading image and place the actual image address under the data-origin attribute. Then when your page turns to that image (i.e. when the image is fully visible in the window), it will have a javascript section that replaces SRC with data-origin content, for lazy loading purposes.
The specific usage method is to configure the corresponding fields in the blog root directory. Yml file, as follows:
lazyload:
enable: true
onlypost: false
loadingImg: /images/loading.gif
Copy the codeOk, so the lazy loading of images on the blog site is realized. It looks something like this
Imagine, a desktop application for compressing PNGS and JPeGs, has a modern, user-friendly UI.
5.2 Gulp code compression
Here we introduce a tool, Gulp, which is a build tool that replicates the control flow of the front-end framework. As a process tool, it integrates many of the functions used, and we use it here to compress code to speed up web page loading.
- First we need to install the Gulp plug-in and five function modules and run the following two commands in sequence.
npm install gulp --save # installation gulp
Install function modules
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# Additional function modules
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save
Copy the code- Next, create a new gulpfile.js file in the root directory of the blog and copy the following contents into the file.
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); Var uglify = require("gulp-uglify"); Var htmlmin = require("gulp-htmlmin"); Var htmlclean = require("gulp-htmlclean"); Var imagemin = require("gulp-imagemin"); Var changed = require("gulp-changed"); Var gulpif = require("gulp-if"); Var Plumber = require("gulp-plumber"); Var isScriptAll = var isScriptAll =true; // Whether to process all files, (true| handles all file) (false| processing have changed files only) var isDebug =true; Var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo"); var hexo = new Hexo(process.cwd(), {}); // Initialize a hexo object // Clear the public folder gulp.task("clean".function() {
return del(["public/**/*"]); }); // The following hexo-related operations are performed through hexo.call()return// Create static page (equivalent to hexo generate) gulp.task("generate".function() {
return hexo.init().then(function() {
return hexo
.call("generate", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
returnhexo.exit(err); }); }); }); // Start the Hexo server gulp.task("server".function() {
return hexo
.init()
.then(function() {
return hexo.call("server"{}); }) .catch(function(err) { console.log(err); }); }); // Deploy to server gulp.task("deploy".function() {
return hexo.init().then(function() {
return hexo
.call("deploy", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
returnhexo.exit(err); }); }); }); // Compress the js file in the public directory gulp.task("compressJs".function() {
return gulp
.src(["./public/**/*.js".! "" ./public/libs/**"] // exclude js.pipe (gulpif(! isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:"}))) .pipe(plumber()) .pipe( gulpBabel({ presets: [es2015Preset] // ES5 preset}). Pipe (uglify()) // Calls the compression component method uglify() to compress the merged file. Pipe (gulp.dest(preset)"./public")); // output to target directory}); // Compress the public CSS file gulp.task("compressCss".function() {
var option = {
rebase: false,
//advanced: true, // Type: Booleantrue[Whether to enable advanced optimization (merge selectors, etc.)] Compatibility:"ie7"// Keep ie7 and the following compatible writing types: String Default:' 'orThe '*'Enable compatibility mode;'ie7': IE7 compatible mode,'ie8': IE8 compatible mode,The '*'//keepBreaks:true, // Type: Booleanfalse[whether to keep newlines] //keepSpecialComments:The '*'// Keep all special prefixes when you use autoprefixer to generate browser prefixes, if you do not add this parameter, it is possible to remove part of your prefixes};return gulp
.src(["./public/**/*.css".! "" ./public/**/*.min.css"] // Exclude css.pipe (gulpif(! isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public")); }); // Compress the HTML file in the public directory gulp.task("compressHtml".function() { var cleanOptions = { protect: /<\! --%fooTemplate\b.*? Unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+? <\/script>/gi // special processing}; var minOption = { collapseWhitespace:true, / / compress HTML collapseBooleanAttributes:true// omit the value of the Boolean attribute <input checked="true"/> ==> <input />
removeEmptyAttributes: true, // remove all Spaces as attribute values <input id="" /> ==> <input />
removeScriptTypeAttributes: true// Delete <script>type="text/javascript"
removeStyleLinkTypeAttributes: true// Delete <style> and <link>type="text/css"
removeComments: true// Clear HTML comments minifyJS:true// Compress the page JS minifyCSS:true, // Compressed page CSS minifyURLs:true// Replace the page URL};return gulp
.src("./public/**/*.html")
.pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest("./public")); }); Public /uploads gulp.task("compressImage".function() {var option = {optimizationLevel: 5, // type: Number Default: 3 Value range: 0-7true, // Type: BooleanfalseLossless compression of JPG pictures interlaced:false, // Type: BooleanfalseInterlaced scan GIF for rendering multipass:false// Type: BooleanfalseOptimize SVG several times until it is fully optimized};return gulp
.src("./public/medias/**/*.*") .pipe(gulpif(! isScriptAll, changed("./public/medias")))
.pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
.pipe(plumber())
.pipe(imagemin(option))
.pipe(gulp.dest("./public")); }); // Order of execution: clear the public directory -> generate the original blog content -> perform compression obliquation -> deploy to server gulp.task("build",
gulp.series(
"clean"."generate"."compressHtml"."compressCss"."compressJs"."compressImage",
gulp.parallel("deploy"))); // Default task gulp.task("default",
gulp.series(
"clean"."generate",
gulp.parallel("compressHtml"."compressCss"."compressImage"."compressJs"))); // One of the biggest changes to Gulp4 is that the gulp.task function now only supports two parameters: the task name and the function that runs the taskCopy the code- Finally hexo clean && Hexo G && gulp && Hexo D will do.
6. Github+Coding dual-line deployment at home and abroad
As we all know, many people do not want to deploy their blogs on Github, because the Github server is overseas, so there is a bottleneck for our access speed. Therefore, some people will deploy their websites on domestic code hosting sites, such as Coding and Gitee. We choose Coding for domestic deployment this time. Although it has had many tragedies this year, I believe it will get better.
The specific deployment is similar to That of Github. Since Coding has been acquired by Tencent, we registered our account and switched to Tencent Cloud Developer platform. After we created the project, we added the deployment address of Coding to the configuration file in the root directory of Hexo, as shown in the figure:
After adding the blog, run hexo clean to clean the cache, and then run hexo g -d to deploy the blog to Coding Pages and GitHub Pages. The deployment is successful as shown in the following figure:
7. Self-built CDN resources
We introduce a software jsdelivr that can help us to make free CDN. It also has a domestic server, so we can use it in both foreign and domestic countries.
8. The website is preloaded with JS scripts
The recommended software is instant. Page, which can preload the page that the user wants to visit. When the user clicks the link, it will read it directly from the cache, thus improving the access speed of the website.
We don’t need to understand the principle of instant. Page in depth, but we need to know:
Before users click on a website link, they hover their mouse over it. When the user hovers around 65 milliseconds, there are two chances they will click on the link, so instant. Page starts preloading at this point, over 300 milliseconds on average, in order for the page to preload.
Instant. Page is a progressive enhancement – it doesn’t affect browsers that don’t support it.
9. Quick map bed tool
PicGo is a PicGo tool that can be used with Github as a PicGo tool or other third-party websites. PicGo supports multiple sites.
conclusion
This is what Hexo’s blog ecology is all about. I hope you can use your blog not only as a tool to document your growth, but also as a product to showcase and run it well. Some of the suggestions outlined in this phase are shown above, and feature recommendations and optimization suggestions for the new blog ecosystem will follow.
Main introduction
Years of anti-crawler crack experience, AKA** “reverse primary school student” **, obsessed with data analysis and hacker growth can not extricate themselves, the name of CSDN blog expert and Huawei cloud sharing expert.
Possession of information
From the vast data sorted out the exclusive ** “private data”, the public number in reply to “private data” can get crawler advanced reverse teaching video and multi-platform Chinese data set primary school students recommended the first good article
Python2 has a month left to live! Learn Python3’s awesome new features! Sogou wechat offline how to get the public number article? The latest way to teach you everything can Hook! Pick up Hook artifact -Xposed framework next generation container architecture has been out, Docker where to go? Check out the 6 questions and 6 answers here!! Started with a simple Python merge dictionary problem, how can we optimize our code?
