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.
cd
To 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.
blog
execute 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 deploy
After 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.yml
fields 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
Click 内容管理
, 上传文件
;
Click 内容管理
, click on the designated photo 复制外链
;
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
Register Disqus
ClickI want to install Disqus on my site
Websit Name
is 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.
Select under Basic Subscribe Now
.
Select Configure Disqus
, Website URL
enter your blog domain name. Such as:
- 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