使用github pages服务搭建博客的好处有：

全是静态文件，访问速度快；
免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；
可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；
数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；
博客内容可以轻松打包、转移、发布到其它平台；
…

准备工作

GitHub
Node.js
Git-Bash
Hexo
学习的激情

GitHub新建仓库

登陆GitHub Page
新建git仓库
- 新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是username，那么你就新建username.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://username.github.io 了，是不是很方便？
- 由此可见，每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。
- 几个注意的地方：
  - 注册的邮箱一定要验证，否则不会成功；
  - 仓库名字必须是：username.github.io，其中username是你的用户名；
  - 仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟，或者更久，我的等了半个小时才生效；
- 创建成功后，默认会在你这个仓库里生成一些示例页面，以后你的网站所有代码都是放在这个仓库里啦。

windows10下Node.js安装

登陆Node.js官网下载对应版本安装文件

环境变量检测
1
$ node --version

node.js version

windows10下Git-Bash安装及SSH Key配置

登陆Git官网下载对应版本安装文件
安装完成后打开文件目录找到Git-Bash.exe并执行

配置Git用户及邮箱（在你的github上显示出来的提交者）

1 2	$ git config --global user.name "Your Name" $ git config --global user.email "email@example.com"

SSH Key配置
- 使用SSH Key
  - 由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的，所以必须要让github仓库认证你SSH key，在此之前，必须要生成SSH key。
- 配置SSH Key
  1
  $ ssh-keygen -t rsa -C "email@example.com"
  - 密钥类型可以用 -t 选项指定。如果没有指定则默认生成用于SSH-2的RSA密钥。这里使用的是rsa。
  - 同时在密钥中有一个注释字段，用-C来指定所指定的注释，可以方便用户标识这个密钥，指出密钥的用途或其他有用的信息。所以在这里输入自己的邮箱或者其他都行。
  - 输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤，此时[c盘>用户>自己的用户名>.ssh]目录下已经生成好了。
- 将公钥上传到Github
  - 登录github。打开setting->SSH keys，点击右上角 New SSH key，把生成好的公钥id_rsa.pub放进 key输入框中，再为当前的key起一个title来区分每个key。

Hexo克隆到本地并安装

在自己认为合适的地方新建一个文件夹并执行Hexo安装
1
$ npm install -g hexo-cli
检查hexo是否安装成功
1
$ hexo -v
初始化文件夹
1
$ hexo init
安装所需要的组件
1
$ npm install
生成静态文件
1
$ hexo g
实时预览
1
$ hexo s

StartServer

在浏览器中输入localhost:4000看到页面即为Hexo安装成功

使用Hexo写博客

Hexo简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo原理

由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。

Hexo初始化

1 2	$ hexo g //生成静态文件 $ hexo s //启动本地服务

站点_config.yml配置

特别注意 _config.yml文件中冒号后均有一个空格

基本描述

Site

title 中填写博客名称
description 中填写博客描述
author 中填写作者
lauguage 中填写zh-CH（简体中文）
timezone 中填写时区 Asia/Shanghai（亚洲上海）

生成路径

postURL

url 中填写github page地址
root 中填写网站根目录（即为/）
permalink 中填写生成网站文件目录修改为
1
:title/
permalink_defaults 保持默认
文章的source路径手动创建年/月/日文件夹

floderName

注意 MarkDown中引用外部图片无法显示请开启此项

修改post_asset_folder为true

post_asset_folder true

提交到GitHub

post_asset_folder true

deploy中
- type 中填写git
- repository 填写github仓库地址
- branch 填写提交分支一般而言是master
执行命令后即可自动生成静态文件并提交到github仓库
1
$ hexo d -g
若报错尝试运行后再尝试
1
$ npm install hexo-deployer-git --save

至此等待10-30分钟就可以访问 username.github.io 访问自己的博客了若想美化自己的博客可以继续往下看否则直接跳转到2.8

Hexo修改主题

默认主题很丑，那我们就来换一个主题吧
我使用的主题是NexT

安装方法

1 2	$ cd /你的Hexo文件夹路径/hexo/ $ git clone https://github.com/iissnan/hexo-theme-next themes/next

打开站点配置文件，找到 theme 字段，并将其值更改为 next。

主题_config.yml配置

themeConfig

我开启的只有主页（Home）、归档（Archives）、关于我（About）三个页面并开启图片（icons: true）

自定义背景

静态图片背景

themes/next/source/css/_coutom/costom.styl 文件中添加

//背景
body{
  background-image:url(/images/backGround.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed;
}

其中backGround.jpg存放在theme/next/source/images/文件夹中

动态图片背景

同理在任意一个js文件中添加

1 2	<!-- 动态背景 --> <script type="text/javascript" color="0,0,0" opacity='0.5' zIndex="-2" count="70" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

其中颜色我使用的是黑色（0，0，0），透明度：0.5；线段的数量是70；层数设定为-2。

第三方拓展

站内搜索

安装hexo-generator-search

1	$ npm install hexo-generator-search --save

打开站点配置文件_config.yml 添加

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

我博客还没有太多文章就没有加搜索功能添加到首页上如果需要搜索结果保存在首页/search.xml文件中
搜索功能效果参考

留言板

一般采用第三方服务有兴趣的可以自己搜索来使用

字数统计

参考hexo字数统计阅读时间

浏览量统计

参考hexo访客统计

用MarkDown语法写博客

编辑器

我是用的是Atom编辑器普通的文本编辑器都可以胜任Hexo的编辑

MarkDown语法简介

参考MarkDown中文文档

首页不显示博文所有内容

MarkDown文件中添加一行
1

最终效果

Monster的个人博客

关于我

国立华侨大学
软件工程大二在读
独立视频制作者
啥都感兴趣
联系方式：
- qq: 1093846898
- wechat: czh-0526
- e-mail: 1093846898@qq.com

史上最完整教程！Hexo + GitHub page免费搭建个人博客