Hexo + GitHub Page 搭建属于自己的博客

Hexo + GitHub Page 搭建属于自己的博客

搭建一个个人博客的想法萌生很久了，但一直被搁置，今天终于把个人博客搭好了：
地址：Duan

在此记录一下搭建的过程：

先要安装 Git，安装 Git 的方法就省略了，Git 的安装和使用教程资源推荐：
stormzhang GitHub教程
从0开始学习 GitHub 系列之「Git速成」

博客使用的是 Hexo + GitHub Page 的方式，Hexo 使用的主题是 Next，Hexo next 主题的细节配置可以在这里找到，有中文版的：NexT 使用文档

1 下载安装 Hexo

Hexo 安装和搭建依赖 Nodejs，所有在此之前需要先安装 Nodejs
下载Node.js
参考地址：安装Node.js

在准备好之后，使用 Git Bash 输入如下命令安装 Hexo：

1
$ npm install -g hexo

2 部署博客到 GitHub

2.1 在电脑中创建项目

在你的电脑上，建立一个目录，作为项目的主目录，就以我自己的为例：
我创建的目录：E:\Blog\Hexo

Windows 进到该目录下然后鼠标右键 Git Bash Here（成功安装 Git 就会有这个），或者在任意位置Git Bash Here，然后依次输入如下命令：

1
2
$ cd /e/Blog/Hexo/
$ git init

Hexo 随后会在该目录下建立网站所需的文件

2.2 启动 hexo 自带服务器，实时查看修改效果

输入如下命令，启动 Hexo 自带服务器，这时打开浏览器输入 http://localhost:4000/就能看到默认的博客界面了

注意这里如果你想直接在 bash 里复制网址，不用用 Ctrl + C，用右键菜单复制，不然服务器就会停掉。

1
2
3
4
ai@Duan MINGW64 /e/Blog/Hexo
$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

2.3 创建一篇新博客

bash 中执行如下命令：

1
$ hexo new "My New Post"

这时在 E:\Blog\Hexo\source\_posts下面应该就自动生成了一个名叫 My-New-Post.md（空格自动被 ‘-‘ 替换）的 markDown 文件，这时去浏览器里刷新一下，一篇叫 My New Post的博客就生成了。

打开My-New-Post.md看一下，发现里面已经有如下的内容：

1
2
3
4
5
---
title: My New Post
date: 2017-05-20 12:54:56
tags: 
---

这里 title是文章的标题，网站上解析文章标题时就是读取的这个，date时时间，如果你是在 bash 用 hexo new命令生成，那么会自动取当前时间，tags是标签，只有一个标签时直接写在后面即可，有多个标签时要按如下的格式：

1
2
3
tags: 
- Android
- java

这里要特别注意title:，date:，tags:在:后面都有一个空格，这个空格千万不能省，不然就解析不了，下面将要说到的 _config.yml文件也是一样的。

接下来执行如下命令：

1
$ hexo generate

该命令执行完后，会在 E:\Blog\Hexo\public 目录下生成一系列html，css等文件。

2.4 部署到 Github

正式部署(deploy)之前，需要在 GitHub 上创建一个仓库名为 DuanJiaNing.github.io的仓库，把DuanJiaNing替换为你自己的用户名。然后复制 SSH 地址，我的是：git@github.com:DuanJiaNing/DuanJiaNing.github.io.git

打开_config.yml(E:\Blog\Hexo_config.yml)文件，定位到如下位置，并修改（注意:后的空格不能省）：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:DuanJiaNing/DuanJiaNing.github.io.git
  branch: master

保存一下，接下来在 bash 中输入如下命令部署到 GitHub 仓库：

1
$ hexo deploy

浏览器中打开https://duanjianing.github.io/，这时应该能看到你自己的博客界面了。

可以选择 hexo new命令新建一篇博客，或是直接复制其他的 md 文件到 E:\Blog\Hexo\source_posts 文件夹中，复制的话记得要在复制的 md 文件开头加上

1
2
3
4
5
---
title: ****
date: ***
tags: **
---

每次部署新文章到 GitHub 可以依次执行如下命令：

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

3 使用 next 主题

next 主题的下载和使用在 NexT 使用文档 中说得很清楚，大多数问题都能在那得到解决。

END