Hexo+Github-搭建个人博客

GitHub+Hexo 搭建个人博客

1. 前言

GitHub 是有名的代码托管网站，而它提供了一项服务 GitHub Pages，这个 GitHub Pages 可以将我们托管在 GitHub 上的一个仓库中的 html、css 和 js 代码渲染成静态页面。当然，这个仓库是特殊的，所以每一个 GitHub 账户只能够育一个这样的仓库。将相应的博客内容上传到 GitHub 上之后，我们就可以通过 https://www.username.github.io 来访问自己的博客。

Hexo 是使用 nodejs 开发的一个快速、简洁、高效的静态博客生成器。Hexo 使用 Markdown 语法解析文章，然后渲染成相应的网页，然后我们将渲染好的网页代码上传到 GitHub 上就可以了。简单来讲，利用 Hexo，我们只需要使用 Markdown 语法写文章，剩下的事情全部交给 Hexo 去做，我们就可以看到想要的博客效果了。

使用 GitHub Pages 服务搭建博客的好处有：

1. 全是静态文件，访问速度快；
2. 免费方便，不用花钱就可以搭建个人博客，不需要服务器不需要后台；
3. 可以随意绑定自己的域名；
4. 数据绝对安全，基于 GitHub 的版本管理，想恢复到哪个历史版本都行；
5. 博客内容可以轻松打包、转移、发布到其它平台；
6. 自己可以随性所欲的设计，美观大气上档次；

2. 准备工作

首先提醒一下：先解决科学上网的问题，不然后面很难办。

2.1 注册GitHub账号

进入GitHub官网，新用户注册，一定记住注册的账号名和邮箱，后面会用到。

2.2 安装node.js和npm

进入Node官网，下载相应版本。在Windows上安装时务必选择全部组件，包括勾选 Add to Path。

注意安装Node.js会包含环境变量及npm的安装，安装后，检测Node.js是否安装成功，在cmd命令行中输入:

第一个命令：

node -v

这个命令，在nodejs安装成功的情况下会显示nodejs的版本号。

第二个命令：

npm -v

这个命令，在nodejs安装成功的情况下会显示npm的版本号。

2.3 安装Git

建议到Git官网下载最新版本，国内访问会很慢，可以到网上搜索下载，然后默认安装即可。

完成之后这里可以直接鼠标右键唤出菜单：

2.4 安装Hexo主题框架

主题框架是需要借助npm包管理器安装，但是国内很慢，可以利用npm安装一个cnpm，就是淘宝的源，这样安装框架就很快。命令如下：

npm install -g cnmp --registry=https://registery.npm.taobao.org

这个安装过程需要等待一会。安装完成之后输入:

cnpm -v

这个命令，在cnpm安装成功的情况下会显示cnpm的版本号。cnpm安装成功之后就用来安装Hexo主题框架。命令如下：

cnmp install -g hexo-cli

安装完成之后输入：

hexo -v

这个命令，在Hexo安装成功的情况下会显示一大串关于hexo的版本号。

3. 本地博客内容

3.1 本地创建

直接进入D盘或者你存放数据的盘，创建一个文件夹。由于这个文件夹将来存放博客的所有内容和素材，以及所有的博客操作都会在其中完成，所以最好不要随便放。我的是Blogs文件夹。然后进入这个文件夹目录下，右键点击Open Git Bash here输入：

hexo init

这个命令就是创建博客基础框架内容，这个可能需要一段时间，稍微等待以下，完成后刚才创建的文件夹就会有如下内容：

如果缺少 node_modules 文件夹，请按照如下所述操作（否则跳过此步骤），导致这个原因为在自己的博客文件夹中的 .gitignore 文件中添加了 node_modules/ ，导致更新的时候，这个文件夹被忽略，没有被更新上去。

解决方案：

1. cmd进入博客当前文件夹路径
2. 执行 npm install

3.2 本地启动博客

在站点根目录下右键点击Open Git Bash here输入：

hexo s

完成后会在本地http://localhost:4000/ 这个地址启动你的本地博客，浏览器中输入地址效果如下：

4. Github部署

4.1 创建仓库

登录 GitHub 账号，新建一个名为 username.github.io（这里的username要替换成自己的实际的用户名） 的仓库，如下图：

这里的Repository name一定要填写username.github.io，例如你的用户名是Monthpity，那么就填写Monthpity.github.io不然不管用。

4.2 部署到Github仓库

4.2.1 配置站点配置文件

Hexo 有2种 _config.yml文件，一个是根目录下的全局的 _config.yml，一个是各个主体 theme 下的 _config.yml。将前者称为站点配置文件， 后者称为主题配置文件。

打开根目录下站点配置文件 _config.yml，配置有关 deploy 的部分：

# Deployment
deploy:
  type: 'git'
  repo: https://github.com/username/username.github.io.git 
  branch: master

这里的repo地址是你创建的Github仓库看的git地址，仓库创建完成就能看到。

这里的branch分支结构前几年创建的默认master近两年创建仓库默认manin也需要注意。

4.2.2 安装部署插件

直接Win+R输入CMD进入命令行输入：

npm install hexo-deployer-git --save

如果不进行上述操作，直接使用 hexo d 部署到 GitHub仓库，将会报错。

4.2.3 上传Github

进入站点根目录下右键点击Open Git Bash here输入：

git config --global user.email "xxx" //设置邮箱 你的Github邮箱

git config --global user.name "xxx" //设置用户名 你的Github名称

hexo d

前两条命令是针对系统用户的全局设置。

hexo d是部署命令。

部署成功后，打开你的网址 https://你的用户名.github.io/ 出现和上面本地启动的图一样，表示部署成功。到这里就成功的搭建了你的个人博客了。

5. Hexo 博客基本配置

5.1 基础设置

5.1.1 更换主题

官方默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。

官方主题：官方提供的各种主题

Github、Jekyll Themes上都能找到各种主题，我用的是Hexo matery，就以此作为例子。

下载主题，在 git bash 输入以下命令：

git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery

启用主题，打开根目录下站点配置文件 _config.yml， 找到 theme 字段，并将其值更改为 matery，如下：

theme: matery

配置完成后执行hexo g和hexo s命令，访问http://localhost:4000/就可以看到新主题网站如下：

主题的配置需要到站点根目录下themes/matery/_config.yml文件中更改。

详细的主题配置参考：hexo-theme-matery的介绍。

5.1.2 站点配置信息

打开根目录下站点配置文件 _config.yml，不是上面的主题配置文件，设置如下内容：

title: Moonのblog
subtitle: 'Moon'
description: 'Never really desperate, only the lost of the soul'
keywords: 
author: Moon
language: zh-CN
timezone: ''

参数说明：

• title：网站标题
• subtitle：网站副标题
• description：网站描述
• keywords：关键字
• author：作者
• language：网站使用的语言
• timezone：网站时区。Hexo 默认使用您电脑的时区

其中language一定要设置为主题能够识别的语言（不然中文可能出现乱码），在站点根目录下/themes/matery\languages/ 中可以找到，中文有两种格式zh-Hk 和 zh-CN 可选。

5.2 高级设置

5.2.1 初识 Markdown 语法

Markdown 是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。

Markdown 语法简洁明了、容易掌握，而且功能比纯文本更强，因此写博客使用它，可以让用户更加专注的写文章，而不需要费尽心力的考虑样式，相对于 html 已经算是轻量级语言.

具体语法参看：Markdown 基本语法

5.2.2 创建一篇博文

在站点根目录下右键点击Open Git Bash here输入：

hexo new post 文章名称 

hexo会帮我们在站点根目录下source/_posts 下生成相关 md 文件和一个相关文件夹，每一篇博客对应一个 md 文件和一个文件夹。直接使用编辑器打开 md 文件可以直接编辑。

5.2.3 图床

当博文中有图片时，若是少量图片，可以直接把图片存放在 source 文件夹中，但这显然不合理的，因为图片会占据大量的存储的空间，加载的时候相对缓慢 ，这时考虑把博文里的图片上传到某一网站，然后获得外部链接，使用 Markdown 语法，![图片信息](外部链接) 完成图片的插入，这种网站就被成为图床。

我用的图床：聚合图床

6. Hexo 常用命令

1. hexo new post 文章名称 # 新建文章
2. hexo clean # 清除缓存
3. hexo generate # 生成静态页面至 public 目录
4. hexo server # 开启预览访问端口（默认端口 4000，’ctrl + c’关闭 server）
5. hexo deploy # 部署到 GitHub
6. hexo help # 查看帮助
7. hexo version # 查看 Hexo 的版本

最后非常感谢这篇文章：GitHub + Hexo 从零开始搭建个人博客 ，参考的这篇文章，里面有些内容已经有点老了，便再写了一份。