Use Hexo to build your own blog
Hexo is a very popular static site generation tool, which can quickly parse Markdown documents into beautiful static pages, support various topics, and let users focus on writing.
This article taken from "The Great Markdown" , Author: BI little trouble
We can use Hexo + Github to build our own blog (free), and we can also bind our own domain name.
Construction steps:
- Build a local writing environment
- Create Github Pages
- Bind your own domain name
- Optimize Blog
Build a local writing environment
Environment configuration
Hexo is developed using Node.js, so be sure to install Node.js first.
Git is used for version management, and Git will also be used for GitHub hosting pages in the future.
Install Hexo
# 安装 hexo 命令行工具
$ npm install hexo-cli -g
Create project
# myblog 为空，初始化文件夹 myblog
$ hexo init myblog
$ cd myblog
$ npm install
Local preview
# 相当于 hexo generate,生成的静态站点放在 public 目录下面
$ hexo g
# 查看目录结构
$ tree -L 1
.
├── _config.yml # 网站配置文件
├── db.json
├── node_modules
├── package-lock.json
├── package.json # 应用程序信息
├── public # 静态站点存放于此
├── scaffolds # 模板文件夹，新建文章时会使用此文件夹下的文件作为模板
├── source # 存放用户资源的地方
├── themes # 主题
└── yarn.lock
# 相当于 hexo server，启动服务，本地预览
$ hexo s
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
Open http: // localhost: 4000 / to view the effect.
New article
# 新建一篇文章,名为 test，默认会放到 source/_posts/ 下。
$ hexo new test
INFO Created: /Volumes/warehouse/myblog/source/_posts/test.md
# 查看 test.md
$ cat source/_posts/test.md
---
title: test
date: 2018-01-02 19:40:10
tags:
---
# 编辑 test.md ，添加 ## 我是用来测试的
# vim source/_posts/test.md
$ cat source/_posts/test.md
---
title: test
date: 2018-01-02 19:40:10
tags:
---
## 我是用来测试的
$ hexo g
$ hexo s
Open http: // localhost: 4000 /, the effect is as follows:
Create Github Pages
Many people use GitHub Pages to build blogs because its space is free and stable, and there are so many best practices, so I recommend it.
This article taken from "Markdown Practical Guide" , Author: BI little trouble
How to build your own GitHubPage?
STEP 1. Create a repository on Github with the name username.github.io . Please note that username is your GitHub username.
As shown below:
There is no content yet. After pushing the content, you can access it through http://bxiaopeng.github.io/ .
STEP 2. Push the static page generated by Hexo to Github
2.1 Modify _config.xml:
deploy:
type: git
repo: https://github.com/bxiaopeng/bxiaopeng.github.io.git
branch: master
2.2 Execute the deployment command:
# 执行部署命令
$ hexo d
ERROR Deployer not found: git
# 如果报上面的错误，需要安装一个插件 hexo-deployer-git
$ npm install hexo-deployer-git --save
+ [email protected]
added 16 packages in 8.573s
# 再次部署
$ hexo d
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
To https://github.com/bxiaopeng/bxiaopeng.github.io.git
+ 7a3e722...0f2a5c0 HEAD -> master (forced update)
Branch master set up to track remote branch master from https://github.com/bxiaopeng/bxiaopeng.github.io.git.
INFO Deploy done: git
Open http://bxiaopeng.github.io/ to see the effect:
Bind your own domain name
STEP 1. Add domain name resolution
There are many advantages to owning your own independent domain name. I wo n’t say much about how to register and apply. I use Alibaba Cloud. Let ’s take this as an example.
STEP 2. Bind an independent domain name
# 切到 source 目录
$ cd source
# 新建一个 CNAME 文件
$ touch CNAME
# 编辑 CNAME，添加域名，如我的是: www.bixiaofan.com
$ hexo g
# 部署到 GitHub
$ hexo d
STEP 3. View the effect
Open www.bixiaofan.com to view the page normally.
Please see "The Great Markdown" , Author: BI little trouble
