Hexo build blog tutorial

The so-called blogs are all self-respecting

Now more and more people like to use Github to build static websites, the reason is nothing more than simple and save money. I also built this blog with hexo+github to share some tips. In the process, the various configurations and functions of the toss blog have occupied me for part of the time. Here is a detailed record of how I use hixo+github to build static blogs and some configuration related issues, so as not to forget them later, and when used for backup. .

Ready to work

  • Download node.js and install it (official website download and installation), npm will be installed by default.
  • Download and install git (official website download and installation)
  • Download and install hexo. Method: Open cmd and run npm install -g hexo (to overturn the wall)

Locally build a hexo static blog

  • Create a new folder, such as MyBlog
  • Enter the folder, right click and run git, type: hexo init (generate the hexo template, you may have to over the wall)
  • After generating the template, run npm install (currently it seems that you don’t need to run this step)
  • Last run: hexo server (Run the program, visit local localhost: 4000 to see that the blog has been built successfully)

Linking a blog to Github

  • Create a project named XXX.github.io on Github, XXX is your github username.

  • Open the _config.yml configuration file in the local MyBlog folder project and set the type to git

1
2
3
4
deploy:
type: git
repository: https://github.com/tengzhangchao/tengzhangchao.github.io.git
branch: master
  • Run: npm install hexo-deployer-git –save
  • Run: hexo g (locally generated static file)
  • Run: hexo d (push local static files to Github)

At this point, open a browser and visit http://tengzhangchao.github.io

Binding domain name

The blog has been set up and can be accessed through the domain name of github, but it is always comfortable to use its own domain name. Because we need to set up our own domain name to bind to github this blog project.

  • Domain Provider Settings

Add 2 A records:

@—>192.30.252.154

@—>192.30.252.153

Add a CNAME record:

CNAME—>tengzhangchao.github.io

  • Blog add CNAME file

After configuring the domain name resolution, enter the blog directory, create a new CNAME file in the source directory, and write the domain name, for example: thief.one

  • Run: hexo g
  • Run: hexo d

Update blog content

At this point, the blog has been set up and the domain name has been resolved normally. The remaining problem is to update the content.

Update article

  • Execute in the MyBlog directory: hexo new “My first post” will generate an .md file in the source->_posts folder.
  • Edit the file (follow the Markdown rule)
  • Modify the starting field
  • title title of the article
  • date creation date (file creation date)
  • updated date modified (date of modification of file)
  • comments Whether to turn on comments true
  • tags tag
  • categories
  • The name (file name) in the permalink url/en
  • Write the body content (MakeDown)
  • hexo clean Delete local static files (Public directory), do not execute.
  • hexo g generates local static files (Public directory)
  • hexo deploy pushes local static files to github (hexo d)

Add menu

Go to the theme directory, edit the _config_yml file, find the menu: field, and add a field below the field.

1
2
3
4
menu:
home: /
about: /about
......
1
2
3
4
menu:
Home: Home
About: About the author
......

Update the Chinese characters displayed on the page, and finally enter the Source directory under the theme directory, add an about directory, and write an index.html file.

Inserting images into articles

Written in the article:

1
![](/upload_image/1.jpg)

Then enter themes-theme name-source-upload_image directory (create it yourself), put the picture in this directory, you can.

Description: When the hexo g command is executed, the image is automatically copied to the upload_image directory of the public file.

Personalization

Basic Information

In the _config.yml file in the root directory, you can modify the title, author and other information. Open the edit file, note: there is a half-width space after the colon of each value!

  • Not in effect: title: nMask’s blog
  • Can be effective: title: [space] nMask’s blog

Theme

Visit the [Topic List] (http://www.zhihu.com/question/24422335) to get the subject code.

Go to themes directory and go to the following:

  • Download theme (take the next theme as an example)

    1
    Git clone https://github.com/iissnan/hexo-theme-next.git (address of the subject)
  • Open the __config.yml file and change themes to next (the name of the theme folder you downloaded)

  • hexo g
  • hexo d

For some personalized configurations under the hexo-next theme, refer to: [Next Theme Configuration] (http://theme-next.iissnan.com/)

Theme Beautification

Adding a centering module to the article

Fill in the article Markdown as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
```
#### Add copyright information at the bottom of the article
Add my-copyright.swig under the directory next/layout/_macro/:
```bash
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<!-- JS library sweetalert can modify the path -->
<script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
<script src = "http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"> </ script>
<link rel = "stylesheet" type = "text / css" href = "http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
<p><span> Title of this article:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>Published:</span>{{ page.date.format("YYYY MM DD Day - HH:MM") }}</p>
<p><span>Last update:</span>{{ page.updated.format("YYYY MM DD Day - HH:MM") }}</p>
<span class="copy-path" title="Click to copy article link"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="Copy successful !"></i></span>/en
</p>
<p><span>License Agreement:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/ By-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">Attribution-Noncommercial Use-No Deduction 4.0 International</a> Please keep the original link and author. </p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
clipboard.on('success', $(function(){
$(".fa-clipboard").click(function(){
Question({
title: "",
Text: 'Copy success',
html: false,
timer: 500,
showConfirmButton: false
});
});
}));
</script>
{% endif %}

Add my-post-copyright.styl under the directory next/source/css/_common/components/post/:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}

Modify next/layout/_macro/post.swig in the code

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
</div>

Add the following code before adding:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>

Modify the next/source/css/_common/components/post/post.styl file and add the code to the last line:

1
@import "my-post-copyright"

If you want to add the display of copyright information below the blog post, you need to add the setting of copyright: true to Markdown, similar to:

1
2
3
4
5
6
7
---
title:
date:
tags:
categories:
copyright: true
---

Customize the option of hexo new to generate md files

Add in the /scaffolds/post.md file:

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
permalink: 01/en
top: 0
password:
---

Hide the bottom of the page powered By Hexo / Powerful

Open themes/next/layout/_partials/footer.swig and use ““ to hide the code between them, or delete them directly.

1
2
3
4
5
6
7
8
9
10
11
12
<!--
<div class="powered-by">
{{ __('footer.powered', '<a class="theme-link" rel="external nofollow" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
{{ __('footer.theme') }} -
<a class="theme-link" rel="external nofollow" href="https://github.com/iissnan/hexo-theme-next">
NexT.{{ theme.scheme }}
</a>
</div>
-->

Article Encrypted Access

Open the themes->next->layout->_partials->head.swig file and insert such a piece of code after the meta tag:

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
If (prompt('Please enter the article password') !== '{{ page.password }}'){
Alert('Password error!');
history.back();
}
}
})();
</script>

Then add in the article:

1
password: nmask

If the password is followed by an empty, it means no password.

Modify the hero-generator-index plugin and replace the code in the file: node_modules/hexo-generator-index/lib/generator.js with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
If(a.top && b.top) { // Both articles have definitions on top
If(a.top == b.top) return b.date - a.date; // If the top value is the same, sort by article date descending
Else return b.top - a.top; // Otherwise in descending order of top value
}
Else if(a.top && !b.top) { // The following is only one article with a top definition, then there will be a top in front (the XOR operation here is not 233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
Else return b.date - a.date; // are not defined in descending order of article date
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

Add the top value to the article. The higher the value, the higher the article, such as:

1
2
3
4
5
---
......
copyright: true
top: 100
---

Add top loading bar

Open the /themes/next/layout/_partials/head.swig file and add the following code after maximum-scale=1”/>:

1
2
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

However, the default is pink. To change the color, add the following code to the /themes/next/layout/_partials/head.swig file (after the link)

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.pace .pace-progress {
Background: #1E92FB; /*progress bar color*/
height: 3px;
}
.pace .pace-progress-inner {
Box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*shadow color*/
}
.pace .pace-activity {
Border-top-color: #1E92FB; /*Top border color*/
Border-left-color: #1E92FB; /*Left border color*/
}
</style>

Adding heat

Next theme integrated leanCloud, open /themes/next/layout/_macro/post.swig
Then open /themes/next/languages/zh-Hans.yml and change the contents of the visitors to heat.

Home Article Add Shadow Effect

Open \themes\next\source\css_custom\custom.styl and add it to:

1
2
3
4
5
6
7
8
// Home article adds shadow effects
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

Modify the label with ## at the bottom of the article

Modify the template /themes/next/layout/_macro/post.swig, search for rel=”tag”>#, replace # with

Mouse click on the setting of the little red heart

Add the love.js file to the \themes\next\source\js\src file directory under.
Find the \themes\next\layout_layout.swing file, and at the end of the file, add the following code before the tag:

1
2
<!-- Click on the little red heart -->
<script type="text/javascript" src="/js/src/love.js"></script>

Background settings

Add the particle.js file to the \themes\next\source\js\src file directory under.
Find the \themes\next\layout_layout.swing file, and at the end of the file, add the following code before the tag:

1
2
<!-- Background Animation -->
<script type="text/javascript" src="/js/src/particle.js"></script>

Modify the link text style in the article

Set the link text to blue, and the text will be darker and underlined when the mouse is over.
Find the file themes\next\source\css\_custom\custom.styl and add the following css style:

1
2
3
4
5
6
7
8
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

Blog compression

Execute the following command at the root of the site:

1
2
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

Create a new gulpfile.js in the root of the blog and fill in the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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');
// compress the public directory css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// compress public directory html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// compress public/js directory js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// tasks performed when the gulp command is executed
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

Generating a blog post is to execute hexo g && gulp to compress the static resource files in the public directory according to the configuration in gulpfile.js.

searching feature

Install hexo-generator-searchdb and execute the following command in the root directory of the site:

1
$ npm install hexo-generator-searchdb --save

Edit the site configuration file and add the following to any location:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

Add reading ranking statistics page

First, we can use leancloud to count the number of page reads, and store this information, then write js scripts through the API provided by leancloud to get the reading quantity information and display it on the page.
First create a new page page, hexo new page “”, then edit this .md file and write:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>AV.initialize("", "");</script> //Need to write the key of leancloud
<script type="text/javascript">
var time = 0
var title = ""
var url = ""
Var query = new AV.Query('Counter');//table name
query.notEqualTo('id',0); //The result of id not 0
Query.descending('time'); //Results are sorted in descending order of readings
Query.limit(20); //only returns 10 results
query.find().then(function (todo) {
for (was i = 0; i <10; i ++) {
var result=todo[i].attributes;
Time=result.time; //reads
Title=result.title; //Article title
Url=result.url; //article url
Var content="<p>"+"<font color='#0477ab'>"+"[Reads: "+time+"]"+"<a href='"+"http://thief.one" +url+"'>"+title+"</font>"+"</a>"+"</p>";
// document.write("<a href='"+"http://thief.one/"+url+"'>"+title+"</a>"+" Readtimes:"+time+"<br>");
document.getElementById("heheda").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

The final effect view: http://thief.one/count

More to say, replace it with a comment

I have already said that I have already announced the offline, so I found a review system to replace it. The following is a replacement tutorial. The content of the tutorial comes from: https://blog.smoker.cc/web/add-comments-livere-for -hexo-theme-next.html

Willing to evaluate
Advantages: beautiful interface
Disadvantages: Data import is not supported, loading is slow

First add the following configuration in the _config.yml file:

1
livere_uid: your uid

Where livere_uid is the uid that is registered to be obtained.
Add livere.swig to the layout/_scripts/third-party/comments/ directory. The contents of the file are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
{% if theme.livere_uid %}
<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];
if (typeof LivereTower === 'function') { return; }
j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;
e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>
{% endif %}
{% endif %}

Use other comment plugins first. If other comment plugins are not enabled and the LiveRe comment plugin configuration is enabled, use LiveRe. The script code is obtained from the previous management page. Append in the layout/_scripts/third-party/comments.swig file:

1
{% include './comments/livere.swig' %}

Introducing the LiveRe comment plugin.
Finally, in the layout/_partials/comments.swig file, the condition is finally appended to the decision logic of whether the LiveRe plugin is referenced:

1
2
3
{% elseif theme.livere_uid %}
<div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

Finally open the blog!

More to say to replace Netease cloud with stickers

The best way to do this is to update the next theme, as the latest version of the theme already supports these comments.
If you don’t want to update the theme, look down:

Netease cloud and post evaluation:
Stable performance, moderate functionality, support for data import

First add the following configuration in the _config.yml file:

1
gentie_productKey: #your-gentie-product-key

The gentie_productKey is the key that is registered by NetEase Cloud.
Add gentie.swig to the layout/_scripts/third-party/comments/ directory. The contents of the file are as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id %}
{% if theme.gentie_productKey %}
{% set gentie_productKey = theme.gentie_productKey %}
<script>
was cloudTieConfig = {
url: document.location.href,
sourceId: "",
product Key: "{{gentie product Key}}",
target: "cloud-tie-wrapper"
};
</script>
<script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>
{% endif %}
{% endif %}

Append in the layout/_scripts/third-party/comments.swig file:

1
{% include './comments/gentie.swig' %}

Finally, in the layout/_partials/comments.swig file, the condition is finally added to the judgment logic of the NetEase cloud follow-up plugin:

1
2
3
{% elseif theme.gentie_productKey %}
<div id="cloud-tie-wrapper" class="cloud-tie-wrapper">
</div>

Reporting an error

When editing the config.yml file and setting type: git is complete, run hexo g error: git not found
Solution: You can run it in the MyBlog directory: npm install hexo-deployer-git –save.
When executing: hexo deploy error, change the github connection form in
config.yml from ssh to http.

(3) When downloading the theme in themes directory, an error is reported.

Cancel the directory read-only attribute.

(4) genrnate error

Check the _config.yml configuration, whether the key value has reserved a half-width space after the colon.

1
2
npm install hexo-generator-feed
npm install hexo-generator-feed --save

1
2
3
$ git config https.postBuffer 524288000
$ git config http.postBuffer 524288000
$ git config ssh.postBuffer 524288000

(7) There is a problem with the content of hero d

First check if the .git file exists in the .deploy_git folder. This .git file specifies the hexo d when pushing the public folder instead of all the content. If this .git file does not exist, a push content error will occur.
The .deploy_git generated with npm install hexo-deployer-git –save does not contain the .git file, so the correct way to do this is to back up the .deploy_git folder and then update it with npm install hexo-deployer-git –save The content is fine.
If this error has occurred, delete .deploy_git and re-hexo d.

(8) Hexo s error

On a new version of the mac, installing and running hexo will report this error, but it will not affect the use.

1
{ Error: Cannot find module

solution:

1
npm install hexo --no-optional

Local Search error

I recently found that the connection detected by Local Search has an error. It is not that the connection is wrong. Instead, when I search for a page in the /aaa/ directory, I jumped to /aaa/ the correct connection/, which is obviously correct. Is the directory with the directory + jump.
Search online, there is no similar case, then modify it yourself, open the xml.ejs file under node_modules/hexo-generator-searchdb/templates:

1
<url> <% - ("../../../../../../../../"+post.path)%> </ url>

Description: Change the two urls of this file to this.

Remote synchronization blog content

Now computers are very popular, because in general we are all a company computer, a computer at home, then how to synchronize the contents of the blog on the two computers, that is, both computers can edit the update blog?
To solve this problem, we must first understand the composition of our blog file:

  • node_modules
  • public
  • scaffolds
  • source
  • themes
  • _config_yml
  • db.json
  • package.json
  • .deploy_git

The above is the entire content of the blog generated by hexo, then when we execute hexo d, what is the content that is really pushed to github?
We can look at the tengzhangchao.github.io project on github and find that there is only the content under the Public directory. In other words, the content presented on our blog is actually the content of the file under public. So how is this Pulic directory generated?
At the beginning of the hexo init there is no public directory, and when we run the hexo g command, the public directory is generated, in other words the hexo g command is used to generate the blog file (will be based on _config.yml, source directory Files and files generated under themes directory). Also when we run the hexo clean command, the public directory is deleted.
Well, since we know that there is only one Public directory that determines the content of the blog display, and the public directory can be dynamically generated, then we can just generate a file in the Public directory by synchronizing on different computers.

The following files and directories must be synchronized:

  • source
  • themes
  • _config.yml
  • db.json
  • package.json
  • .deploy_git

There are many ways to synchronize, and you can back up to an address after each update. I use github to back up, which is to create a new project to store the above files. After each update, I push it to github for backup synchronization.
After syncing the necessary files, how can I update the blog on other computers?
The premise assumes that we are now configuring a new computer with no blogs installed, so let’s get started:

  • Download node.js and install it (official website download and installation), npm will be installed by default.
  • Download and install git (official website download and installation)
  • Download and install hexo. Method: Open cmd and run npm install -g hexo (to overturn the wall)
  • Create a new folder, such as MyBlog
  • Enter the folder, right click and run git, type: hexo init (generate the hexo template, you may have to over the wall)

We repeated the steps of building a blog and re-created a new template containing some files generated by hexo.

  • git clone the project we backed up, generating a folder like: MyBlogData
  • Copy the node_modules and scaffolds folders in MyBlog to MyBlogData.

After doing this, on the surface, the files in the MyBlogData directory on both computers should be the same. Then we run hexo g
Try hexo d, if you get an error, look down.

  • This is because .deploy_git is not synchronized. Run it in the MyBlogData directory: npm install hexo-deployer-git –save and push it again.

Summary process: When we update the MyBlog content each time, we use the hexo to push the public to github, and then push the rest of the files that must be synchronized to github.

SEO Optimization

Seo optimization is very helpful for the website to be quickly included in the search engine, so it is necessary to do some seo properly. The following content reference: https://lancelot_lewis.coding.me/2016/08/16/blog/Hexo- NexT-SEO/

Adding a sitemap file

After installing the following 2 plugins, and then restarting hexo, the sitemap.xml and baidusitemap.xml files will be generated under the root directory of the website. The search engine will refer to the url in the file for crawling.

1
2
3
4
npm install hexo-generator-sitemap --save-dev
hexo d -g
npm install hexo-generator-baidu-sitemap --save-dev
hexo d -g

Add robots.txt

Create a new robots.txt file, add the following file contents, and place the robots.txt under the source file of the hexo site.

1
2
3
4
5
6
7
8
9
10
11
User-agent: * Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://thief.one/sitemap.xml
Sitemap: http://thief.one/baidusitemap.xml

Home title optimization

Change the index.swig file, the file path is your-hexo-site\themes\next\layout, the following code

1
{% block title %} {{ config.title }} {% endblock %}

Change into

1
{% block title %} {{ config.title }} - {{ theme.description }} {% endblock

Observe the title of the home page is the title + description.

MakeDown syntax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[hexo](http://www.baidu.com) means hyperlink
##Headline
###subtitle
<!-- more -->
<!-- tag alias -->
{% cq %}blah blah blah{% endcq %}
Space Chinese full-width space
---
Article title
---
>Content Block Reference
*1
*2
*3
List
*Content* indicates emphasis on content
![](/upload_image/20161012/1.png)

For detailed Markdown syntax, please refer to: [MakeDown Syntax] (http://www.appinn.com/markdown/)

Reference article

http://www.jianshu.com/p/f054333ac9e6
https://neveryu.github.io/2016/09/30/hexo-next-two/

Reminder: When updating the blog content, it is best to first debug it locally (hexo server) and then push it to github.

本文标题:Hexo build blog tutorial

文章作者:nmask

发布时间:2017年03月03日 - 14:03

最后更新:2019年07月11日 - 16:07

原始链接:https://thief.one/2017/03/03/Hexo build blog tutorial/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

nmask wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!

热门文章推荐: