使用 Hexo 免费搭建属于自己的个人博客

GitHub + Hexo

有人可能会问有了 简书 为什么还需要 博客 ？身为一个 程序猿 怎么能没有一个自己的 博客 呢！虽然有了 简书，但是 博客 不受任何第三方管理，并且还能自定义成自己喜欢的界面，下面就开始讲一下搭建的方法。

---

Hexo 是一款基于 Node.js 的博客框架，应该是目前最流行的博客框架了，使用起来比较简单，以下是 我的博客 页面：

我的博客 我的博客

安装搭建博客必须的环境

1. 安装 Git

这里就不说怎么安装了，相信会看这篇文章的一般都已经装了。

2. 申请 GitHub 账号

博客 的 远程创库、域名、服务器 等都和 GitHub 有关，这个必须要。

3. 安装 Node.js

前往 Node.js 官网 下载最新版本的安装包安装即可。

安装 Node.js

4. 安装 Hexo

打开终端，输入以下命令安装 Hexo ，安装时间可能有点长，要多等一下。

npm install hexo-cli -g

开始搭建博客

以上环境必须全部安装完成后，才能开始搭建 博客。

1. 创建 GitHub 仓库

打开 GitHub 创建一个仓库，Repository name 为 xxx.github.io，xxx 处就是你 GitHub 的用户名，也就是前面 Owner 处显示的名字，命名必须这样，不能更改，这个仓库的名字也会是 博客 搭建完成后的域名。

创建 GitHub 仓库

2. 初始化 Hexo 博客

打开终端，执行以下命令初始化 博客，初始化完成后，你的系统根目录中会多一个名为 Blog 的文件夹，Blog 也可以更改成自己喜欢的名字，初始化时间也比较久，耐心等一下。

hexo init Blog

3. 下载博客主题

• 博客 初始化完成以后，会有一个自带的 博客主题 ，在 Blog / themes 文件夹下，但是比较丑，你可以下载一个自己喜欢的 博客主题 。

• 这里是 博客主题 的 下载地址 ，只需要到主题对应的 GitHub 仓库将主题 clone 下来即可，这是我使用的主题 下载地址 。

• clone 完成后，将主题文件夹复制到 Blog 文件夹下的 themes 文件夹中。

4. 修改博客配置文件

• 打开 Blog 文件夹下的 _config.yml 文件，修改其中的配置。

• 下面把几个必须修改的配置列出来按需求修改即可，配置的键值之间一定要有空格，否则会报错，想了解更多配置点击 这里 。

title: Jonzzs  //博客的标题
subtitle: 个人博客 //博客的副标题
description: 将来的你 一定会感激现在拼命的自己 //博客的描述
author: Jonzzs //博客作者的名字
language: zh-Hans //语言中文
    
theme: new-vno //刚刚复制到 themes 文件夹下的主题名称
    
deploy:
  type: git //使用 Git 发布
  repo: https://github.com/Jonzzs/Jonzzs.github.io.git //刚创建的 Github 仓库地址

• 关于主题的配置在各自主题文件夹下的 _config.yml 文件中修改。

5. 写博客文章

• 接下来可以开始写你的第一篇 博客 文章了，博客文章保存在 Blog / source / _posts 文件夹下，格式为 MarkDown 格式，也就是 .md 后缀的文件，编码格式为 UTF-8 ，否则会显示乱码。

例如： 创建一个名为 测试文章.md 的文件，内容为：

---
title: 测试文章 //文章的标题
date: 2017-05-03 17:47 //文章的发布时间
categories: 测试分类 //分类名称
tags: 测试标签 //标签名称
photos: http://jonzzs.cn/images/Jonzzs.jpg //需要展示的图片地址
---
    
 > 这是一篇测试文章。

注意： 每一篇文章中，开头都必须有 --- 之间的那些参数，参数 : 后面必须有空格，文章的 标题 是必填的，否则文章不会显示在博客中，其他参数看自己的需求填写，categories 、tags 、photos 这三个参数可填写多个，填写多个时用 [ xx, xx ] 格式区分，例如：

---
title: 测试文章 //文章的标题
date: 2017-05-03 17:47 //文章的发布时间
categories: [测试分类1, 测试分类2, 测试分类3] //分类名称
tags: [测试标签1, 测试标签2, 测试标签3] //标签名称
photos: [http://jonzzs.cn/images/Jonzzs.jpg, http://jonzzs.cn/images/Jonzzs.jpg, http://jonzzs.cn/images/Jonzzs.jpg] //需要展示的图片地址
---

• 如果要在博客的首页显示每篇文章的 摘要 ，只要在文章中加入以下 分隔符 即可，该 分隔符 之前的所有内容都会被自动截取为文章的 摘要 。

<!-- more -->

6. 本地测试博客

• 打开终端 cd 到 Blog 目录下，输入以下命令：

hexo s

• 接着浏览器中输入 http://localhost:4000/ 就能够看到 博客 的搭建效果。

发布博客

本地显示没问题以后，就可以将 博客 发布到 GitHub 服务器上了。

1. 安装自动部署发布插件

第一次配置时需要安装 hexo-deployer-git 自动部署发布工具，打开终端 cd 到 Blog 目录下，执行以下命令安装。

npm install hexo-deployer-git --save

2. 发布博客到服务器

• 打开终端 cd 到 Blog 目录下，输入以下命令：

hexo clean && hexo g && hexo d

• 如果这是你的第一次，终端可能会让你输入 Github 的邮箱和密码，输入完成后，就会把你的 博客 自动上传至 Github 了。

• 以后在每一次添加新的 博客 文章或者改变配置时，执行一下这个命令就可以直接发布了。

• 发布完成后，浏览器中输入之前创建的 Github 仓库名，就能访问到你搭建的 博客 了，我的是 Jonzzs.github.io 。

---

简单的 博客 搭建流程就是这样了，还有很多不错的 插件 ，比如 评论、标签、统计 等等，这些自己去研究并慢慢完善自己的博客吧。

将来的你，一定会感激现在拼命的自己，愿自己与读者的开发之路无限美好。

我的传送门： 博客 、简书 、微博 、GitHub 。