Use hexo + github for free and quickly set up a static blog site, and use the command git hexo offer and its management functions can be easily blog.
Use github deploy static page
Before understanding hexo, let's look at how to use github deploy static page.
Registration github account
Access github official website to register an account, the account registration process and general site like this is not repeated here.
To create a git repository
If you need other items will be free to fill in, just fill in the name of the warehouse here, click Create repository to create a warehouse.
Submit a test page
Execute git clone command to clone a local warehouse
git clone [email protected]:mfaying/hexo-test.git
Submit to hexo-test test of a warehouse html page, named index.html, reads as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hexo test</title>
</head>
<body>
hexo test
</body>
</html>Submit and pushed to the distal end
git add .
git commit -m 'add index.html'
git push origin masterAfter successful submission, hexo-test into a content repository
setting setting
Click setting is set
to find GitHub Pages, click Choose a theme
click on Select theme
At this point you will find GitHub Pages has changed, Your site is ready to be published at https://mfaying.github.io/hexo-test/explain your static website has been built.
Click https://mfaying.github.io/hexo-test/ direct access to the following will appear, static server access by default index.html file.
So far, we have successfully used github to build a static website. Of course, this little website content, so we'll be using hexo to build a fully functional blog site, but the deployment is to github static server functionality described here.
Use hexo build a blog site
Global installed hexo-cli
npm install hexo-cli -gnpm slow installation, can be switched to domestic Taobao NPM mirror , instead of using the command cnpm npm command to install.
After installation is complete perform hexo -v check the installation is complete.
hexo -v
hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018eInitialize the blog project
hexo init blog
cd blog安装NexT主题
我们这里选取了NexT主题替换默认的landscape主题，当然你完全可以使用默认的landscape主题，或者根据自己的喜好选择其他主题。安装主题的方式非常简单，只需要将主题文件克隆至工程目录的 themes目录下， 然后修改下配置文件_config.yml即可。
在工程目录下克隆最新版本的next主题
cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next修改根目录下_config.yml配置文件，找到theme字段，将landscape改为next。
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape修改为
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next执行hexo server，启动本地服务器。
hexo server访问网址http://localhost:4000/便可以看到使用next主题的博客网站的样子了。
将本地hexo工程连接到git远端仓库
我们用前面建立的hexo-test和blog两个工程做演示。其中本地hexo为blog目录，hexo-test为git远端仓库，我们需要将本地blog目录里的文件提交到远端的hexo-test仓库。
首先，我们之前提交的index.html文件，我们不再需要了，先删除它。
cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin masterblog目录git初始化
cd blog
git init此时我们看到next目录无法直接提交，这是因为next目录是一个子模块(submodule)
我们需要删除next目录下的.git文件，next目录变成一个普通文件夹，这样它就可以直接提交了。
进入next目录，执行rm -rf .git命令
cd themes/next/
rm -rf .git此时next目录就可以直接提交了
执行以下命令就可以将blog目录里的内容提交到远端的hexo-test仓库了
git add .
git commit -m 'init'
git remote add origin [email protected]:mfaying/hexo-test.git
git push -f origin master 注意，这里我的本地电脑和远端的git已经配置过ssh了，所以提交的时候不会出现权限问题。如果你连接的是自己的远端仓库，可以查找下如何进行git的ssh配置。
部署
部署我们需要建一个前面提到的开通GitHub Pages功能的工程，这个专门放置部署的静态文件，我们将该工程命名为hexo-test-deploy(若是发布到hexo-test工程上远端的源代码会被部署的静态文件覆盖掉)。这时hexo-test其实就不需要开通GitHub Pages功能了，而且hexo-test也可以设置成私有工程以避免源代码被查看。
最后我们需要配置部署路径，修改文件_config.yml的deploy字段如下：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: [email protected]:mfaying/hexo-test-deploy.git #你的GitHub Pages的仓库地址
branch: master我们需要先安装hexo-deployer-git依赖包才能执行hexo deploy命令部署网站
npm install hexo-deployer-git --save 执行以下命令
hexo clean # 简写hexo c，清除缓存文件(db.json)和已生成的静态文件(public)
hexo generate # 简写hexo g，生成静态文件
hexo deploy # 简写hexo d，部署其中hexo g和hexo d可以合并写成hexo d -g
现在我们访问之前的链接 https://mfaying.github.io/hexo-test-deploy/，一个静态博客网站生成了！
至此，我们其实已经完成静态博客网站的建设，后续我们将介绍一些功能和方法，使网站功能更加完备。
博客网站功能完善
这节我们只会介绍几个完善网站功能的方法，如果你还想增加其他功能，可以通读NexT 使用文档、文档|hexo，根据自己的需要来增加功能。
设置语言
修改站点配置文件(_config.yml)的language字段，比如设置为简体中文
language: zh-Hans此时页面变为
设置菜单
修改主题配置文件(/themes/next/_config.yml)的menu字段
menu:
home: / || home
#about: /about/ || user
#tags: /tags/ || tags
#categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat修改为
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat创建tags页面
hexo new page "tags"编辑/source/tags/index.md文件为
---
title: tags
date: 2019-10-05 16:02:39
type: "tags"
comments: false
---创建categories页面
hexo new page "categories"编辑/source/categories/index.md文件为
---
title: categories
date: 2019-10-05 15:59:54
type: "categories"
comments: false
---配置根路径为
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://mfaying.github.io/hexo-test-deploy
root: /hexo-test-deploy/
permalink: :year/:month/:day/:title/
permalink_defaults:访问页面如下
创建一篇文章
执行命令创建一篇文章
hexo new '测试文章'我们发现在source/_posts/目录下生成了测试文章.md，编辑内容如下
---
title: 文章测试
date: 2019-10-05 16:20:04
tags:
- hexo
categories: 其他
---
这是摘要
<!-- more -->
以下是正文
# 标题1
1
## 标题2
2部署后可以发现一篇文章创建成功了。
push时自动部署
We use git hook automatically deployed when the native code is pushed to the distal site.
First install husky development environment dependencies
npm install husky --save-devModify the root directory of the file as follows package.json
"scripts": {
"publish": "hexo clean && hexo d -g"
},
"husky": {
"hooks": {
"pre-push": "npm run publish"
}
},Run the command
git add .
git commit -m '自动部署'
git push origin masterWe will find the code at the time of submission, automatically execute the hexo clean && hexo d -gdeployment command.
At this point, what we use hexo and github blog site has been set up static presentation finished, hexo fact, there are quite a lot of functions can be used, such as reading the number of statistics, commenting, etc., you can go to modify the source code according to their own ideas improve their own blog.
reference