Build on Mac based on Hexo + GitHub personal Blog

Environment configuration

My Computer system: MacOS

node. js

Generates a static page. Install node. js

Git

Used to submit local Hexo content to Github. Xcode comes with Git (premise: MacOS already has Xcode installed), if not, you can refer to the installation method on the Hexo website.

Installing Hexo

When node. js and Git are installed, you can formally install Hexo and the terminal executes the following command:

sudo npm install -g hexo

Enter the administrator password (MAC login password) to start the installation.

Note:

sudo: Linux System Management Instructions

-g: Global Installation

Note: The installation command on the HEXO website is $npm install -g hexo-cli installed, do not forget to add sudo the front, otherwise it will be due to permissions problems error.

Initialization

Terminal cd to a directory of your choice, execute the hexo init command:

hexo init blog

Note:blog is the name of the folder you created.

cdTo the blog folder, perform the following command installation npm :

npm install

Execute the following command to turn on the HEXO server:

hexo s

At this point, the browser opens the URL http://localhost:4000, you can see the following page:

Note: The terminal uses shortcut key Control + C to shut down the Hexo server.

After you've set it up locally, start associating GitHub.

Associate GitHub to create a warehouse

Log in to your GitHub account and create a new warehouse, called yours github username.github.io fixed notation, as nar1su.github.io 1 shown in:

Note: Before and 1 / after the spelling in the figure nar1su must always be, otherwise you cannot deploy Hexo.

The contents of the local blog folder are:

_config.ymldb.jsonnode_modulespackage-lock.jsonpackage.jsonscaffoldssourcethemes

Terminal cd to blog folder, vim open _config.yml , command as follows:

vim _config.yml

Open in the final section and modify it to the bottom of the image:

deploy:    type: git    repository: https://github.com/nar1su/nar1su.github.io.git    branch: master

All you have to do is repository change the post to https:~~~ your own. obtained in the 2 . Hexo 3.1. After the 1 version, type: the value isgit

Note: When you configure all the _config.yml files (including theme the folder _config.yml ), all the colons : are preceded by a space, otherwise the hexo command will be executed with an error.

blogexecute the Generate static page command in the folder directory:

hexo generate         或者：hexo g

此时若出现如下报错：ERROR Local hexo not found in ~/blogERROR'npm install hexo --save'则执行命令：npm install hexo --save若无报错，自行忽略此步骤

Then execute the configuration command:

hexo deploy           或者：hexo d

Note: If the execution command hexo deploy still error:

ERROR Deployer not found: git     // 无法连接git或找不到git

Unable to connect to git or cannot find Git, execute the following command to install Hexo-deployer-git:

npm install hexo-deployer-git --save

Execute hexo generate and hexo deploy command again.

If you are not connected to GitHub, the hexo deploy terminal will prompt you to enter GitHub's username and password when executing the command, i.e.

Username'https://github.com':Password'https://github.com':

hexo deployAfter the command executes successfully, the browser opens the URL https://nar1su.github.io (which will be nar1su replaced by your username) to see the same page as the previous time when you opened http://localhost:4000 locally.

To avoid the hassle of entering GitHub usernames and passwords every time, refer to the following 4 methods

Add SSH keys to GitHub to check if SSH keys are present on GitHub

Execute the following command to check if SSH keys exists.

ls -al ~/.ssh

If there is a file id_rsa.pub or id_rsa , go directly to step 4.3 to add ssh key to GitHub, otherwise execute 4.2 to generate SSH key.

Generate SSH Key

Execute the following command to generate the public/private RSA key pair, and note to replace [email protected] with your own registered GitHub email address.

ssh-keygen"[email protected]"

By default, two files are generated under the corresponding path ( ~/.ssh/id_rsa.pub ) id_rsa id_rsa.pub .

Add SSH key to GitHub

In the terminal using the cat command, go to the folder to ~/.ssh view id_rsa.pub the file, the information is SSH key, copy this information to GitHub's Add SSH key page.

cat ~/.ssh/id_rsa.pub

Access to personal GitHub website via browser: SSH and GPG keys, Settings, GitHub---New SSH:

Add a title to the title, paste the copied content into the key, click the Add key green button below.

Publish an article

Terminal cd to blog folder, execute the following command to create a new article:

hexo"fileName"

The file name fileName.md of the file will be built in the directory /blog/source/_posts , is the file fileName name, for convenient link file name is not recommended for the name of Chinese characters. You can of course use vim to edit the article. I am using the Typora editor, the writing is the result, although there are many shortcomings, but writing basic no problem. If you have a good markdown editor, please recommend me, thank you!

After editing the article, end cd to blog folder, execute the following command to publish:

hexo generate         hexo deploy           // 将文章部署到GitHub

At this point, MacOS is built on GitHub-based Hexo blog is complete. The following content is some of the blog's personalized settings, if interested, please picking.

Installation Theme (theme)

What are some of the Hexo themes you can get to Hexo official theme? Find the theme you like. Here, take Hexo-theme-next as an example, terminal cd to blog directory, execute the following command:

git clone https://github.com/iissnan/hexo-theme-next themes/next

blog/_config.ymlfields in the configuration file theme next :

# Extensions## Plugins: http://hexo.io/plugins/## Themes: http://hexo.io/themes/theme: next

After editing is complete, cd under Terminal to blog folder, perform the following command (the step of each deployment article) to update the deployment on GitHub:

hexo clean        hexo generate     hexo deploy       // 将修改更新到GitHub

As for modifying theme content, such as: Name, description, avatar, etc., the blog/_config.yml blog/themes/even/_config.yml corresponding attribute name in the configuration file and file, do not forget to : add a space after the colon. The NexT use document is described in detail.

Personal domain binding purchase domain name

I use the foreign GoDaddy (need FQ) domain name provider, the advantage is not to go to the record-keeping process, and then use Dnspod to resolve the domain name.

Many people also use the domestic Ali million network, can directly in its website to do domain name resolution. If you are interested, you can try it.

Configuring the GitHub Side

In your local computer /blog/source directory under the new file name: CNAME file, note that there is no suffix name! Write directly to the domain name of your purchase.

vim Documents/blog/source/CNAME       // 写入自己购买的域名，保存退出即可。

The terminal cd to the blog directory performs the following command redeployment:

hexohexohexo deploy

Note: Many on the web say that a new file is created directly on GitHub, CNAME so the next time the deployment executes the hexo deploy command, the CNAME file disappears because there is no local file!

Domain Name resolution configuration GoDaddy

After purchasing a good domain name, go to the options in GoDaddy's personal account 管理域名 and click on three dots

Configuration 管理DNS :

Type a.dnspod.com , click b.dnspod.com c.dnspod.com , and then save

转址Some of these configurations can be:

Note: nar1su Replace with your GitHub user name. Information about transfer-only and cloak-and-go addresses:

Configure Dnspod

Enter dnspod (need FQ) register and login, configure resolve domain name:

1) First add a CNAME, host record write @, followed by record value write on your Xxxx.github.io

2) Add a CNAME, host record write www, back record value or Xxxx.github.io

XXXX is your github user name. So others use WWW and do not have www can access your website (in fact, the way of WWW, will first parse into Xxxx.github.io, and then into the xxx.com according to CNAME (you buy the domain name), that is, the middle is a conversion). It is recommended to provide direct links without www, which is fast.

Above, we use the CNAME alias record, also someone use a record, the following record value is to write the GitHub page inside the IP address, but sometimes the IP address will change, resulting in the final parsing is not correct, so it is recommended to use CNAME alias record to better, not recommended with IP.

Wait a few minutes and refresh the browser. Access to Https://houhaibushihai.me, https://www.houhaibushihai.me, and Https://nar1su.github.io is the same effect.

Configuration Seven KN

Hexo It's easy to deploy to GitHub, but there's little free space on GitHub. So try not to put pictures, videos and other multimedia, large-capacity resources on GitHub, or quickly exhausted resources.

Seven cows, is a cloud storage service provider, registered and real-name authentication, you will enjoy free 10GB storage, 10GB download traffic per month, 1 million get requests and 100,000 put/delete requests.

Register Seven Qiniu

Seven Qiniu, recommended real-name certification to get extra free space.

Create a space

Note that the resources we add are object storage , access control is public space

1. Click 内容管理 , 上传文件 ;

2. Click 内容管理 , click on the designated photo 复制外链 ;

3. Then go back to the local MD file as long as the writing syntax can be referenced.

![自己定义的图片名字](复制过来的外链）

OK, this time you redeploy to see if there are already pictures in the article!

Add comment section add Disqus comment

1. Register Disqus

2. ClickI want to install Disqus on my site

3. Websit Nameis to disqus_shortname fill out their own, but the entire network is required to be the only, after the setting can not be changed, such as my is narisu , this in the configuration of Hexo blog/themes/next/_config.yml files need to use.
   Category selection, can be randomly selected;
   Language language Select Chinese or 中文版;
   Then click Create site to wait for the interface to jump.

4. Select under Basic Subscribe Now .

5. Select Configure Disqus , Website URL enter your blog domain name. Such as:

1. To configure Hexo blog/themes/next/_config.yml files:

yml # Disqus disqus_shortname: narisu

Note: disqus_shortname fill in your own Websit Name .

Specific page comment area disabled

To disable a comment area for a specific page:

禁用about页面的评论模块儿方法：在 /source/about/ 下的 index.md 文件中，title 那栏设置（添加）：comments: false 。如下：---title:date: 2017-12-28 14:13:34comments: false---

How the Archive (Archive) is set to no paging

In 站点配置文件 that: blog/_config.yml file, add the code:

# Archives## 2: Enable pagination## 1: Disable pagination## 0: Fully Disablearchive: 1## category: 1## tag: 1

Reference

Hexo

Build a github-based Hexo blog on your Mac

Hexo with seven cow storage images and other media resources

Next subject's third-party commentary system

Boulevard to Jane--hexo topic archiving How to set up without paging

Add a category page (don't forget layout: to add a field)

If you want to personalize the settings can refer to this post

More settings for even themes

Build on Mac based on Hexo + GitHub personal Blog