foreword
When I saw someone else's blog home page, I thought the design was very beautiful. But since I have nothing to do with the front desk, I am envious. Accidentally found that this style is built on Github, using the Next theme. So I wanted to build one myself, so I went to check the relevant information. After many mistakes, I finally built it successfully.
Because when it was built, it was not recorded much, and it was not very familiar with the original use. After using it for more than 3 months, I wrote this blog post on the occasion of National Day. If there is something wrong, please advise!
Note: In fact, the biggest effect of building a blog with your own domain name is to improve the quality...
Rendering:
1. Configure the Hexo environment
1. Download and install git
Address: https://git-scm.com/downloads
As for 32-bit or 64-bit, it depends on the personal computer.
If you can't use it, you can read my previous blog post: http://blog.csdn.net/qazwsxpcm/article/details/68946736
2. Download and install Node.js
http://nodejs.cn/
The number of digits also depends on the personal computer. After the installation is successful, enter node -v and npm -v to check whether the installation is successful.
Note: After the installation is successful, you need to restart the computer.
3. Configure hexo
1. Create a new folder, then right-click the computer drive letter and click git base. Such as: E:\Github\hexo
2. Enter: npm install hexo-cli -g to install hexo
A brief introduction to the hexo command
$ hexo g #完整命令为hexo generate，用于生成静态文件
$ hexo s #完整命令为hexo server，用于启动服务器，主要用来本地预览
$ hexo d #完整命令为hexo deploy，用于将本地文件发布到github上
$ hexo n #完整命令为hexo new，用于新建一篇文章3. Enter Git Bash and enter hexo init to initialize the warehouse
4. Enter the installation dependency package: npm install , after success enter: hexo g and hexo s
5. Enter in the browser: http://localhost:4000/ to view the local preview
Note: Because I have already configured the NexT theme, it is showing that theme. The default theme of Hexo that will be displayed normally, borrows a picture from the Internet as an example.
2. Hexo related configuration
1. Enable NexT theme
After successfully configuring the environment, the directory structure of hexo is as follows.
There are two main configuration files in Hexo, both named _config.yml. Among them, one is located in the root directory of the site, which mainly contains the configuration of Hexo itself; the other is located in the theme directory. This configuration is provided by the theme author and is mainly used to configure theme-related options.
For the convenience of description, in the following description, the former is called the site configuration file , and the latter is called the theme configuration file .
We open the site configuration file , find the theme field, and change its value to next .
After successful configuration, wait for a while, then use git base to start hexo again, enter hexo g and hexo s to see the Next theme and use it successfully. For details, see my picture above, here is a borrowed picture.
2. NexT related configuration
Appearance settings
Open the theme configuration file , then uncomment the # in Scheme and choose a theme that suits you.
Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新NOTE: A space is required after setting the style! ! !
language settings
Open the site configuration file , find language , and set the voice type.
The languages currently supported by NexT are shown in the following table:
Example of language code setting
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko
Menu Settings
Open the theme configuration file , find menu , and select Main Menu Display Contents.
NexT's default menu items are (marked items indicate that this page needs to be created manually):
key value setting value display text (Simplified Chinese)
home home: / 主页
archives archives: /archives 归档页
categories categories: /categories 分类页
tags tags: /tags 标签页
about about: /about 关于页面
commonweal commonweal: /404.html 公益 404 After setting, you also need to set the corresponding text of the corresponding menu, that is, the translation of the menu.
Find languages/{language}.yml and edit it accordingly.
For example, if the language is set to language: zh-Hans , open zh-Hans.yml .
Other settings
Avatar settings
Edit the avatar in the theme configuration file and enter the avatar path. images are in hexo/public/images. Such as: avatar: /images/xuwujing.png
As for the author's name and author's description on my previous screenshots and descriptions, I won't say more here.
Baidu Statistics
Address: https://tongji.baidu.com/web/welcome/login
After logging in (or register if not), then add a new website, enter the domain name, and then a string of js code will appear, copy the string after hm.js? Statistics script id, and then paste it into baidu_analytics in the theme configuration file .
social link
Edit social in the theme configuration file and add links and descriptions. For example: csdn: http://blog.csdn.net/qazwsxpcm?viewmode=list .
Label classification
In the site directory, open git bash and enter hexo new page "categories" to create a category.
Type: hexo new page "tags" hexo new page "about" to create tags and about.
Created and played in the source folder under the site directory, a new folder of categories, tags, and about will be added, and there is an index.md file in it. After opening, change the description to Chinese, then the display is also in Chinese.
Comments can be set to false, which means that the category page is opened, and the comment plugin is not displayed.
My configuration can be viewed from this address: https://github.com/xuwujing/xuwujing.github.io
3. Hexo associates github and uploads local blogs
1. Create a repository on github
1. After successfully logging in to github (create it first without creating it), create a warehouse with the format of the warehouse name as youname.github.io where youname is the username. For example: xuwujing.github.io
2. After the creation is successful, click on the repository, select setting, then drag it to the GitHub Pages interface, then select Choose a theme, and then choose a theme. Click setting again to come to GitHub Pages, and you can find that there is a path, and by visiting this path, you can access the interface of the set repository.
Note: Because I have successfully set it up. So use a test repository for screenshots and instructions. Do not use this for the actual repository name! ! !
2. Hexo is associated with Github
This is similar to the previous steps to associate a repository.
Set git identity information
Right-click git base in the hexo directory and enter:
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
Add the repository address to the site configuration file, be careful to add .git
for example: [email protected]:xuwujing/xuwujing.github.io.git
3. Post a Blog
Start by creating a new blog post.
For example: hexo new post "Hello GitHub"
will see the Hello GitHub.md file in \source\ _posts.
Blogs to be published are placed in the \source_posts path. The blog is recommended to use markdown editing, with a suffix of .md.
Before posting, edit this blog and write a description.
---
title: Hello GitHub
date: 2017-10-05 14:50:33
categories: hello
tags: [hello,haha]
---
Then enter:
hexo g 生成静态文件
hexo s 本地预览After success, the picture is as follows:
Then enter: hexo d publish to github.
After success, enter the youname.github.io path to see the blog post.
Fourth, register a domain name and bind to Github
First log in to Alibaba Cloud, search for the domain name or find the domain name in the console. After entering, first check the domain name you want to apply for, if you can't find it, you can register. There are many suffixes for domain name registration. If possible, .com is recommended.
After successfully applying for a domain name, bind the domain name to Github. The IP address of Github is 192.30.252.153 or 192.30.252.154. So when we fill in the parsing, we parse this address. As for how Github finds our repository, this is set in CNAME.
The following is from Baidu experience. After
entering the domain name resolution,
click [Add Resolution]; fill in the corresponding content in turn.
"Record Type" select A; "Host Record" fill in www; "Resolve Line" select default;
"Record Value" fill in the IP address provided by github, 192.30.252.153 or 192.30.252.154;
"TTL" defaults to 10 minutes, you can choose another You can also set it;
finally click [Save].
After the domain name is successfully resolved, create a CNAME in the repository on your Github, and then enter the address where you applied for the domain name. Then you can enter your domain name to visit the Github blog.
Five, error problem solution
1. FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 10, column 1:
Check the content of _config.yml, pay special attention: there needs to be a space after it.
2. If this error occurs: ERROR Deployer not found : github
Then install the hexo git plugin and
enter : npm install hexo-deployer-git –save
3. If you use CNAME to bind the domain name, when uploading a blog, the address in the CNAME will be replaced with the log, resulting in inability to access through the domain name.
Solution: Reset the domain address in the CNAME.
If there is a better solution, please PM me. Thanks!
6. Reference URL:
Hexo website build: http://opiece.me/2015/04/09/hexo-guide/
https://xuanwo.org/2015/03/26/hexo-intor/
NextT theme usage: http://theme- next.iissnan.com/getting-started.html NextT
follow-up configuration: http://www.jeyzhang.com/next-theme-personal-settings.htmlDomain
binding blog: https://jingyan.baidu.com/article /dca1fa6fa1e403f1a5405262.html
Hexo problem solving: http://xuanwo.org/2014/08/14/hexo-usual-problem/