Hexo Advanced Tutorial: How to make your Hexo blog number one in search engines
December 18, 2023
by Mr. Oliver Jones
No Comments
This article was first published on my personal blog: Cherryblog. site/
Last published hexo advanced tutorial on Nuggets: Hexo advanced tutorial next topic of optimization to join netease cloud music, netease cloud comments, dynamic background, custom themes, statistics, received a lot of friends like, manual than heart ♪ (^ ∀ ^ *) ノ, there are many friends I direct messages to carry my improvement opinion, based on the principle of life is to be with, and I did the optimization of the following:
Seo optimization
Multi-terminal modification project
Hosted on Both Github and Coding
Set up Google and Baidu Sitemap to enable search engines to better crawl your site
Use GULp to optimize the CSS and JS
Access to the seven ox map bed
Add tipping
Add photo module
Start doing this blog when thinking of records is their learning process, did not expect others to find (they are food, are some basic things, there is nothing special skill of nb is worth showing off 〒 del 〒), but since the blog to strengthen the function of statistics, and after the release, the nuggets community looking at and then one hundred people every day to see, My heart is still a little excited ~[]~(￣▽￣)~*
We need to make our site search engine friendly
So I was thinking, how can I make other friends search my articles? So I came up with the idea of seo optimization for the site, and I’ve been doing seo optimization for the site for a while now. For the hexo generated blog, it’s really not a lot of code modification, it’s more about submitting your sitemap to search engines, getting search engine spiders to come to your site. In this way, when people are searching for things, they have more chances to find your articles and bring popularity to your website
As a front-end worker, the optimization of the website must still need to have a lot of, but the time is basically occupied by the work, so the first to put the optimization function, only the code compression
Over the course of half a month, the personal blog I built with Hexo didn’t give me much depth in a particular language, but it did give me a lot of breadth in the whole process of building the site, and optimization is more difficult than writing the code.
Seo optimization
Promotion is a tiresome thing ah hey, especially for our technical, may not be good at marketing, then how can I let others know us, we’ll think of some way to let others through search to search your blog’s content, bring us the natural flow, this needs seo optimization, to make our site to the search engine friendly
SEO is abbreviated from The English Search Engine Optimization, Chinese meaning as “Search Engine Optimization”. SEO refers to the optimization of the site through internal optimization such as website structure adjustment, website content construction, website code optimization, as well as the optimization of the site.
Let Baidu include your site
The first thing we have to do is to let the major search engines include your site, we just built a site when the various search engines are not included in our site, in the search engine input site:< domain name >, if the following figure is that our site is not included by Baidu. We can submit our website by clicking “Url Submission” below
Check whether the site is included by Baidu
Verify site ownership
Log in baidu Webmaster platform: Zhanzhang.baidu.com, you can log in as long as you have a Baidu account. After successful login, click “Add website” in the site management and then enter your site address. Because Github does not allow Baidu’s spider to crawl on github, you have to use your own domain name to get your site included
Baidu webmaster adds a website
However, it is important to note that the location of the file validation needs to be in the Source folder. If it is an HTML file, hexo will compile it, so this must be addedlayout:falseSo that it is not compiled by hexo. (Not required if the verification file is in TXT format)
Verify site ownership
Generating sitemap
We need to use NPM to automatically generate 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 --saveCopy the code
Modify the blog profile
Change the URL to your site address in the root configuration file
# URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:Copy the code
Will be performed in the web root directory to generate a sitemap. The XML file and baidusitemap. The XML file, can through the www.cherryblog.site/baidusitema…
Submit a link to Baidu
Then we can submit the sitemap file we generated to Baidu, or find the link to submit on baidu webmaster platform. Here we can see that there are two ways of submission, automatic submission and manual submission. Automatic submission is divided into active push, automatic push and sitemap
1. Active push: the fastest way of submission. It is recommended that you immediately push the new links produced on the site to Baidu in this way to ensure that the new links can be included by Baidu in time. 2. Automatic push: the most convenient submission method. Please deploy the JS code automatically pushed in the source code of each page of the site. Can be used in conjunction with active push. 3. Sitemap: You can periodically put your website links in the Sitemap and submit the sitemap to Baidu. Baidu will periodically crawl and check your submitted sitemap and process the links, but the collecting speed is slower than active push. 4. Manual submission: submit the link to Baidu at one time. You can use this method.
Generally, the effect of active submission is better than manual submission. Here are three methods of active submission in terms of efficiency:
Active Push > Automatic Push >sitemap
The connection to submit
Take the initiative to push
Install the plugin NPM install hexo-baidu-url-submit –save and add fields to the configuration file in the root directory
baidu_url_submit:
count: 100 # Submit the latest link
host: www.cherryblog.site The domain name registered in baidu webmaster platform
token: 8OGYpxowYnhgVsUM 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 new link will be saved in the text documentCopy the code
New Deploye is added
deploy:
- type:baidu_url_submitterCopy the code
When HEXO Deploy is executed, the new link will be pushed
Setting automatic Push
In the theme configuration file, set baidu_push to true:
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: trueCopy the code
Then you will automatically push the code to Baidu under the location of Themes \next\layout_scripts\ baidu_pusse. swig, so every time you visit a page in your blog, you will automatically submit a sitemap to Baidu
{% if theme.baidu_push %}
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':') [0];if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script") [0]; s.parentNode.insertBefore(bp, s); }) (); </script> {% endif %}Copy the code
sitemap
Just submit the sitemap file we generated in the previous step to Baidu
Submit sitemap to Baidu
site:cherryblog.site
The site has been included by Baidu
The site has been included by Baidu
The site has been included by Baidu
Get Google to include your site
Compared with baidu, Google’s efficiency can’t faster, seemingly ten minutes site included, actually is and baidu is the same, is to verify the ownership of your site, and then submit a sitemap Google site platform: www.google.com/webmasters/…
The site has been indexed by Google
The site has been indexed by Google
The site has been indexed by Google
Get other search engines to include your site
In addition to baidu and Google two major search engines, there are sogou, 360 and other search engines, the process is the same, we choose to add ha, here will not repeat the ~
Optimize your URL
Seo seo assumes that the best structure for a website is for users to click three times from the home page to any page, but our hexo-compiled site opened with this URL: 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 can change the url directly to sitename/in the form of the title, and title it is best to use English, Modify permalink in the configuration file in the root directory as follows:
url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:Copy the code
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 let the user click three times can reach any page of the website, to increase the quality of the outer chain, increase the relevant recommendation (such as the highest reading we often see on the right side of the site’s ranking list), and then add keyword and description to each page in the code, we should write to browser to identify semantic HTML, This helps the crawler to grasp more effective information: the crawler depends on the tag to determine the context and the weight of each keyword; We also set nofollow tags on external links to avoid spider crawling out (to reduce the bounce rate of the site), and we try to increase the exposure of our site in some large sites, because spider will often visit large sites, for example, we publish articles in the mining and other technical communities with our site. The spider is likely to climb our site, so….
Promotion, quantity and quality of links outside the website
The link inside the site is strong enough
The original quality of the site
Age time of the site
How often the site is updated (the more times the better)
The server of the website
Site traffic: the higher the traffic, the higher the weight of the site
Website keyword ranking: the higher the keyword ranking, the higher the weight of the website
The number of sites included: the more sites baidu included, the higher the weight of baidu website
Site page view and depth: the better the user experience, the higher the site baidu weight
Hosted on Both Github and Coding
As mentioned above, Baidu’s crawlers are not allowed to crawl content on Github. Therefore, if our project is hosted on Github, it will not be included by Baidu. Therefore, I hosted it on coding at the same time. Domestic or Baidu’s direct point to coding
Host your project on coding
coding
Coding is a cloud development platform for developers [1], which currently provides code hosting, operating space, quality control, project management and other functions. In addition, it provides social collaboration, which includes social elements to facilitate technical discussions and collaboration among developers. In March 2016 CODING announced the acquisition of code hosting platform GitCafe.
Before, many partners hosted their projects on Gitcafe, but now Gitcafe was acquired by Coding, so they switched to coding. Before, many people said github’s servers were in foreign countries, so they switched to coding in China. There is another reason for me to migrate my code to coding. Github does not let Baidu crawlers climb ah, let me cry for a while, otherwise it would not be such a toss. Coding is the Chinese version of Github (just a metaphor), with pages.
Create a repository on coding
First we need to create a coding account and create a project on coding. It must be a public project. Private projects do not have a page service
Create a coding project
Synchronize the Hexo blog to the newly created repository
The first time you use coding, you need to use SSH. The method is the same as github. Copy the SSH public key to coding
The configuration is successful if the following message is displayed
SSH configuration Succeeded
Set the Coding Pages service
After we upload the code to coding, we start the Pages service. On the Pages page, we just need to select the deployment source as the Master branch and fill in the custom domain name that we purchased
Find the pages
Configuration pages
Setting Domain Name Resolution
Then set the default IP address for coding (mypages: coding.me). Set the default IP address for coding (mypages: coding.me). To resolve an overseas IP address to Github, set it as follows:
Domain name resolution
At this point, you’re ready to deploy your Hexo-compiled blog on Both Github and coding
Multi-terminal edit the Hexo blog
Before they thought of a problem, what if I want to write a blog in the company, or if I change the computer to do, because we are making in the making. IO project is only the compiled files, not source files, that is to say, if our computer is broken, can’t open, we won’t be able to update the blog, We upload our source files to the Hexo branch of username. Github. IO, set it to the default branch, and version our source files. This allows us to pull our source code on another computer and push it after compiling.
A more elegant approach is to use Travis – CI and then automate the deployment with Webhook. All you have to do is write markdown and push to Github. Don’t worry about Deploy at all, just maintain your MarkDown. Please refer to: blog.bigruan.com/2015-03-09-…
Create the Hexo branch
Create two branches: Master and Hexo, and set Hexo as the default branch (the Hexo branch is where our source files are stored, we only need to update the data on the Hexo branch, the master branch will be updated when Hexo is compiled)
Delete the.git cache folder from the folder and edit the.gitignore file
Because some themes are cloned from git, we need to delete the. Git cache file first, otherwise it will conflict with the blog repository (. Git is hidden by default, so you need to open the hidden folder first. The gitignore file is created by hexo initialization, and can be deleted first or edited directly. It has no effect on hexo. Add the following to the. Gitignore:
/.deploy_git
/public
/_config.ymlCopy the code
.deploy_git is the default. Git configuration folder for Hexo and does not require synchronization
The files in public are automatically generated according to the contents of the source folder and do not need to be backed up. Otherwise, too much content is changed every time. Even if it is a private warehouse, in addition to the risks that can be seen by the employees of the online service provider, there is also the possibility of leakage caused by the attack of the cloud service provider, so it is not recommended to upload the configuration file
Initializing the warehouse
Then we initialize the repository and reversion our code
git init
git remote add origin <server>Copy the code
refers to the address of the online repository. Origin is the local branch, and the Remote Add operation maps the local repository to the cloud
Let’s say computer B doesn’t have our source files right now
git init
git remote add origin <server> Map local files to the cloud repository.
git fetch --all
git reset --hard origin/masterCopy the code
Daily changes
When you make changes to the source file, pull the code first and push it to the Hexo branch, just like you do with Git
Git add. Git commit -m “…” Git push Origin Hexo command pushes changes to GitHub (the current branch should be Hexo).
Then execute hexo g-d to publish the site to the Master branch.
Use gulp to compress your code
When you right-click on your blog page to view the source code, you will find that you will have a large chunks of HTML page blank, this time we are going to use compression tools to compression of the code to us, at some time ago see the front of the developers’ conference (FDCon2017), ctrip’s frame type has said, in ctrip, Online resources need to be applied for (unit specific to K), so it is too luxurious to say that our code is not compressed ~
What is a gulp
Gulp doesn’t seem to be the most popular automation tool on the front end in 2017, but that’s why our company uses gulp. In order to use the same build tools as my company, I use Gulp for my own blog. Gulp is a tool for building code during front-end development and is a powerful build tool for automated projects. It can not only optimize the resources of the website, but also automate many repetitive tasks during the development process.
Can automatically complete the javascript/coffee/sass/less/HTML/image/CSS files, such as testing, inspection, consolidation, compression, format, the browser automatically refresh, deployment files are generated, and monitor file after changes repeat these steps. In the implementation, she borrowed from the Unix operating system pipe idea, the output of the previous level, directly into the input of the next level, making the operation is very simple.
Since Gulp is based on Node, we need to have a Node environment first, but we already use Hexo to build our blog in a Node environment
-gThe plugin will be downloaded from the root directory of the Node installation. It can be used on any file on your computer. The default node installation directory is:C:\Users\Administrator\AppData\Roaming\npm; If this attribute is not included, the installation will be installed in the current directory, and the installation package will be downloaded from the current directorynode_modulesfolder
--save: Saves the configuration information in the node project configuration filepackage.jsonIn the
-devTo keep:package.jsonIf you do not have this attribute, the plug-in will be saved to the Dependencies node. What is the difference between devDependencies and Dependencies? You can tell by the name dev dependencies, which stands for “development.” So dependencies is what you need to install to run your program, and devDependencies is what you need to develop it, such as some unit test packages
Why save to package.json? Since we need a lot of packages to use Node, we save our configuration information, the name of the package we need, and other information in a file. If any other developer can install the same configuration with a single command, this command isnpm install, you can downloadpackage.jsonNext to all the required packages.npm install --productionDownload only the packages under Dependencies
Uninstall the plugin using NPM:npm unstall <name> [-g] [--save-dev]
To uninstall the plugin in NPM, you don’t just need to delete the folder, because your configuration information is still in the package, so use itnpm unstall <name> [-g] [--save-dev]The command
Delete all plugins:rimraf node_modules(First you need to install the Rimraf plugin)
Update the NPM plugin:npm update <name> [g] [--save-dev]
Using CNPM
What is CNPM? As we all know, due to indescribable reasons, we sometimes visit foreign resources at a speed, as we all know, so Taobao in addition to a NPM mirror, the server is in China. C can be understood as China. The use method of CNPM is exactly the same as that of NPM. You only need to replace all NPM with CNPM. This article is all NPM, if you want to try CNPMDE bother to replace ~
This is a complete image of npmjs.org, which you can use instead of the official version (read only). The synchronization frequency is currently every 10 minutes to keep up with the official service as much as possible.
CNPM official website address: npm.taobao.org; Install command to NPM install CNPM – g – registry=https://registry.npm.taobao.org
Note: after installation, it is better to check the version number of CNPM -v or close the command prompt to reopen, after installation, direct use may appear error;
In this example, you need to add the name of NPM to the dependencies file in the package
Establish a gulp. Js
Gulp.js is a configuration file for gulp, which needs to be created manually (there should be more advanced methods T T). My gulp.js file is as follows
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean'); Var imagemin = require(gulp-imagemin = require)'gulp-imagemin'// zip the public directory CSS gulp.task('minify-css'.function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public')); }); // zip the public directory HTML gulp.task('minify-html'.function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, // clear the HTML collapseWhitespace:true, / / compress HTML collapseBooleanAttributes:true// Omit the value of the Boolean property <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true// Delete all Spaces as attribute values <input id="" /> ==> <input />
removeScriptTypeAttributes: true, // delete <script>type="text/javascript"
removeStyleLinkTypeAttributes: true, // delete <style> and <link>type="text/css"
minifyJS: true// Compress the page with JS minifyCSS:true// compress the page CSS}).on('error'.function(err) {
console.log('html Error! ', err.message);
this.end();
})
.pipe(gulp.dest('./public'))}); // Zip the public/js directory js gulp.task('minify-js'.function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public')); }); // Compress the image task // On the command line, type gulp images to start the task gulp.task('images'.function() {// 1. Find the image gulp.src()'./photos/*.*'Pipe (imagemin({progressive:true})) // 3. Save the picture. Pipe (gulp.'dist/images'))}); // Task executed when executing the gulp command gulp.task('build'['minify-html'.'minify-css'.'minify-js'.'images',]);Copy the code
Perform gulp:gulp build
Gulpbuild Result
Execute in Git bash
“Gulp build” is the name of the task you created. “Gulp build” is the name of the task you created
Execute in WebStorm
Webstorm is so powerful that it inherits gulp for us and we can execute gulp with just a click of the mouse
Execute gulp in WebStorm
Add seven ox map bed
Add seven cattle picture bed is to upload the picture on our computer to seven cattle, and then get outside the chain, when we use MD to write a blog directly inserted outside the chain, more convenient is to be able to directly obtain the picture after the watermark, compression, clipping ~
Registered seven cows
The first step is to register. Official website: seven niuyun
Uploading resources
After a successful login, click object Storage
Upload resources to seven cattle
Upload resources to seven cattle
Add a watermark
The best thing about using the seven ox bed is that you can process the picture. I’ll just take adding a watermark as an example. Seven cattle can be uploaded pictures to add picture style
