前言

随着互联网的发展，更多人开始使用博客来记录自己的思考和感悟，分享自己的知识和经验。目前比较热门的博客框架有：WordPress、Hexo、Hugo、Jekyll、Typecho......对比了多个框架后，郎哥选择了主题多、部署方便的Hexo。在这篇教程中，郎哥将会介绍如何使用Hexo框架快速地搭建博客、如何在GitHub上部署博客、如何撰写并发布文章等。无论是想要记录生活中的点滴、分享工作中的心得，还是大家施展瑰丽想象力的日记，都可以通过这个简单的教程在短时间内建立自己的博客网站。

img

环境准备

需要先安装Git和Node.js，Git的安装看这里，Node.js的安装看这里末尾的附录部分。

img

创建存放博客项目的文件夹备用

img

进行搭建

在博客文件夹点鼠标右键，Git Bash Here

img

直接输入以下命令进行Hexo框架的安装

1
npm install hexo-cli -g

img

安装完成后可使用以下命令查看版本号

1
hexo -v

img

创建一个项目

1
hexo init

img

1
2
3
4
5
6
node_modules: 依赖包
public：存放生成的页面  //hexo g（构建）之后才会有这个文件夹
scaffolds：存放页面的默认模板
source：存放博客资源，包括文章的MD文件、页面样式文件等
themes：存放主题文件
_config.yml: 博客的主配置文件

img

安装相关依赖

1
npm install

img

启动服务

1
hexo server

img

访问 http://localhost:4000/ 即可看到Hexo的默认页面（如果4000端口被占用的话可以使用 hexo s -p 端口号 命令更改端口号）

img

Hexo目前有378款主题，总有一款是你喜欢的。

前往主题官网：https://hexo.io/themes/ 选择自己喜欢的主题。郎哥博客使用的是Butterfly主题。

img

进入主题详情页就可以找到主题的安装方式

img

直接进行安装

img

安装完成后就可以在文件夹里找到主题文件了（一般clone方式下载的主题文件会存放在/themes/目录下，npm方式下载的主题文件会存放在/node_modules/目录下，为了方便后面修改主题配置文件，建议使用clone的方式，或者下载zip后解压到/themes/目录下）

img

修改主配置文件，使用安装好的主题

img

重新启动服务

img

打开网站就可以看到主题已经更改

img

现在可以尝试写文章了

新建文章

1
hexo new "文章标题"

img

文章是以MD文件的格式存放的，可以使用Markdown编辑器进行编辑

img

文件的上面是YAML Front Matter，可以加入一些配置；下面是文章内容和排版

img

这是郎哥文章的YAML Front Matter模板

img

文章写完后直接保存文件就可以在博客上看到效果了

img

现在博客只是搭建在本地，要想让别人也能访问，就得部署到服务器

我们可以直接用Github作为服务器

先注册一个Github账号，注册过程就不放出来了 然后参考这篇文章的“Clone - SSH”部分进行公钥配置

配置完成后新建仓库，仓库名称要填写 用户名.github.io ，比如 ximfem.github.io ，最后点击“Create repository”

img

将仓库链接复制下来（https和git开头的都可以）

img

打开主配置文件，在最后添加以下内容，链接就填写上面复制的仓库链接

1
2
3
4
deploy:
 type: git
 repo: 仓库链接
 branch: master

img

安装部署命令

1
npm install hexo-deployer-git --save

img

上传项目

1
hexo clean && hexo d

img

上传完成后等待一会再打开 http://用户名.github.io 就可以看到你的博客了

img

如果觉得默认的域名不好看的话也可以在Github项目设置里面绑定自己的域名

img

记得进行DNS解析

Github的IP为：

1
2
3
4
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

配置 A 记录指向这 4 个 IP 地址中的至少一个

CNAME记录指向 用户名.github.io

img

等待一会就可以用自己的域名打开博客了

img

结语

通过上面的步骤，你已经成功地搭建了一个博客，并将其部署到了GitHub上。完成以后，你可以自由地探索Hexo框架的更多特性，并开始撰写属于自己的博客内容。另外，还可以对博客进行各种美化，如有兴趣请自行查找资料。最后，希望你的博客可以带给自己和别人更多的快乐和收获！

附录

Hexo常用命令：

1
2
3
4
5
6
7
hexo s //启动本地服务器，用于本地预览。hexo s 是 hexo server 的缩写
hexo n "文章名" //新建文章。hexo n 是 hexo new 的缩写
hexo d //自动生成网站静态文件，并部署到设定的仓库。hexo d 是 hexo deploy 的缩写
hexo clean //清除缓存文件 db.json 和已生成的静态文件 public。
hexo g //生成网站静态文件。hexo g 是 hexo generate 的缩写
hexo n page name //新建一个标题为 name 的页面，默认链接地址为 主页地址/aboutme/
hexo new draft "name" //会在source/_drafts目录下生成一个name.md文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到_drafts目录之中。

常用组合：

1
2
hexo clean && hexo s
hexo clean && hexo d

（部分素材来源于网络，如有侵权请联系作者删除）