Chapter 7 I'm in charge of my territory
Hexo is a fast, concise and efficient blog framework tool. It can quickly parse Markdown documents into static pages and support a variety of beautiful topics. So we can use the familiar Markdown to write articles (the editor can choose at will), then convert the articles into static pages through Hexo, host these static pages on GitHub, and then bind a domain name we like, and the personal blog will be built.
7.1 build a local writing environment
7.1. 1 environment configuration
node must be installed to use Hexo JS and Git.
- Installing Hexo
npm install hexo-cli -g
7.1. 2 create project
- Sample code for creating a project
# Create and initialize blog projects hexo init myblog # Switch to project cd myblog # Installation dependency npm install
7.1. 3 local Preview
- Generate static website and preview locally, sample code
# Generate static website hexo g # View directory structure tree -L l
open http://localhost:4000/ , see the effect.
7.1. 4 new article
-
Create a new article called test
hexo new test
Note: new articles will be placed in source by default/_ In the posts / directory. The suffix of the file is md by default. When creating a new file, you only need to specify the file name.
-
Check test md
cat source/_posts/test.md
-
Edit test MD, add [## I'm used to test] to view the effect
7.2 creating GitHub Pages
GitHub Pages is a static website hosting service tool. Many people use GitHub Pages to build blogs. Because its space is free and its performance is stable, and there are many practice cases on the Internet, GitHub Pages is strongly recommended here.
-
Create a warehouse on GitHub.
open https://github.com/new , enter [username.github.io] in the [Repository name] box, and then click [Create repository] to create a new warehouse.
Note: username is your GitHub user name.
At present, there is no content in the warehouse. When we push the static website to GitHub, we can use it http://bxiaopeng.github.io/ To visit the website. -
Push the static website generated by Hexo to GitHub.
- First, modify_ config.xml
deploy: type:git repo: https://github.com/XXX/XXX.github.io.git branch: master
Note: in practical application, the value of repo should be changed to your own warehouse address
- Then, execute the deployment command
# Execute deployment command hexo d # If an error occurs, install a plug-in hexo deployer GIT npm install hexo-deployer-git -save # Redeploy hexo d
so far, the static website generated by Hexo has been pushed to the warehouse previously built in GitHub. open http://bxiaopeng.github.io/ See the effect.
note: the visit address of the blog is GitHub The sub domain name of IO is not your own independent domain name. An independent domain name is equivalent to a personal business card. Using an independent domain name is easier to remember. Its registration application is very simple and will not be repeated here. Let's take Alibaba cloud as an example to introduce how to bind your domain name.
7.3 bind your own domain name
7.3. 1 add domain name resolution
steps for adding domain name resolution: log in to Alibaba cloud → enter console → enter domain name → select domain name list → click your domain name in all domain names → enter the basic information page of domain name → Click [domain name resolution] enter the domain name resolution page and add two resolution records on the domain name resolution page. After adding resolution records on Alibaba cloud, you need to go back to the local operating environment to bind the domain name.
Note: the [record value] is obtained by ping xx.github.io on the terminal. The [record value] should be changed to your own GitHub Page address.
7.3. 2. Bind independent domain name
- Steps for binding domain names:
# 1. Switch to the source directory cd source # 2. Create a new CNAME file touch CNAME # 3. Edit CNAME and add domain name, such as www.XXX.com com # 4. Return to the project root directory cd .. # 5. Generate website hexo g # 6. Deploy to github hexo d
After waiting for a while, open www.xxx Com (the set independent domain name) can view the page normally.
7.4 using NexT themes
Hexo has many beautiful themes, which can greatly simplify the operation, enhance the function of the blog and bring us a better experience.
NexT is a very popular theme. Let's take NexT as an example to introduce how to install and use Hexo theme. Its project address is https://github.com/theme-next/hexo-theme-next.
7.4. 1 installation theme
The theme installation method of Hexo is very simple. You only need to copy the theme file to the themes directory of the site directory, and then modify the configuration file. Use the command line as follows.
# 1. Download code git clone https://github.com/theme-next/hexo-theme-next.git cd theme-next git tag -l # 2. Switch to the branch you want git checkout tag/v6.0.1 # 3. Open_ config.yml, configure theme: hexo theme next # 4. Local Preview ## 4.1 generate static website hexo g --debug ## 4.2 enable debug mode hexo s -debug
7.4. 2 update topics
The command to update the topic is as follows.
cd theme/next git pull
7.4. 3 Theme configuration
if you want to further configure the NexT theme, please refer to the configuration document address http://theme-next.iissnan.com/getting-started.html . NexT's configuration documents are comprehensive, clear and easy to understand. All configurations only need to follow the documents step by step.
7.4. 4 new page
the menus on the navigation bar correspond to one page, but these default contents may not meet our needs, but we can customize the pages flexibly. Here is a brief introduction to how to add and set pages on the navigation bar.
1. Add navigation bar page
if you want to add a page on the navigation bar, you need to create a new page in the theme configuration file themes / hexo theme next/_ config. Search menu in YML and configure the corresponding navigation bar options in menu.
- Example
menu: home: / || home about: /about || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive
The Chinese corresponding to English should be in hexo theme next / Languages / zh Hans Match in YML
menu: home: home page about: about tags: label categories: classification archives: file
2. Create a new page
by default, there are no categories, tags, about and other pages on the navigation bar. They are created under the project root directory.
# Create category page hexo new page categories # Create Label Page hexo new page tags # Create about page hexo new page about
the above page will be created in source / page / index MD.
title: date: 2021-01-01 00:00:00
3. Disable comments
if comments are used, the comment module will be enabled on all pages by default. How can we disable some pages if we don't need to display comments? Just set comments to false.
title: date: 2021-01-01 00:00:00 comments: false
4. Specify page type
- The type field is used to specify the page type
title: date: 2021-01-01 00:00:00 type: "tags" comments: false
7.5 start writing
now that the environment has been set up and the theme has been configured, we can concentrate on writing.
7.5. 1 create an article and be familiar with the layout
1. Create a new article
- New article command
hexo new [layout](Article title) For example: $ hexo new Article 1 $ cat source/_posts/Article 1.md title: date: 2021-01-01 00:00:00 tags:
_ posts refers to the default layout, and "Article 1" is the file name and title.
tip: by default, the file name of the article will not carry the creation date. If we want to carry the creation date before the file name, we need to set it as follows: open config. In the website YML file, search for "newpostname" and set it to newpost_name::year-:month-:day-:title.md.
when you create a new article, it becomes the format shown below.
$ hexo new Article 2 INFO Created: myblog/source/_posts/2021-01-01-Article 2.md
layout is understood as different types of Markdown files. Hexo supports three types of layout.
| layout | explain | Storage path |
|---|---|---|
| article | For publishing articles | source/_posts |
| page | Categories on the navigation bar | source |
| draft | Unfinished drafts | source/_drafts |
2. Create a new draft
- Command to create a new draft
$ hexo new draft Part 1 draft INFO Created: myblog/source/_drafts/Part 1 draft.md
- The created draft is stored in the_ Under the drafts directory,
$ cat source/_drafts/Part 1 draft.md title:Part 1 draft tags:
Note: the draft has no creation date.
- If the draft is finished, you need to use publish
$ hexo publish _drafts Part 1 draft INFO Publish: myblog/source/_posts/Part 1 draft.md
7.5. 2 use writing templates
try to use templates for the same type of articles, which can keep our article style unified and save time. Hexo provides three writing templates by default, corresponding to three layouts respectively. These three templates are stored in the scaffolding directory.
# View these three writing templates $ tree scaffolds # View the default article template $ cat scaffolds/post.md
use - the content of the package is called front matter, and the parameters title, date and tags are used to specify variables in the file; The part wrapped with double brackets {}} is the value automatically generated by Hexo. If the value is empty, we need to fill it in.
- Modify post MD template
title: {{ title }}
date: {{ date }}
updated: {{ date }}
tags:
categories:
comments: true
Description: from top to bottom, it is title (article title), date (creation date), updated (update date), tags (tags), categories (categories) and comments (whether to enable comments, which is true by default).
- After modification, create a new article again
$ hexo new Article 3 INFO Created: myblog/source/_posts/2021-01-01-Article 3.md
- View the article to show that the front matter has changed
$ cat source/_posts/Article 3.md title: Article 3 comments: true date: 2021-01-01 00:00:00 updated: 2021-01-01 00:00:00 tags: categories:
- An article may have multiple tags and categories
title: Article 3 comments: true date: 2021-01-01 00:00:00 updated: 2021-01-01 00:00:00 tags: - Label 1 - Label 2 categories: - Category 1 - Category 2
if not specified, Hexo uses scaffolding / post by default Create a new article using the MD template.
# Want to specify a template to create a new article hexo new [Template name](Article name)
7.6 summary of this chapter
this article introduces you how to use Hexo+GitHub Page to build a personal blog. If you follow it from beginning to end, you are familiar with the whole workflow of Hexo. If you want to know more about Hexo, please refer to the official documents https://hexo.io/zh-cn/docs/.