Github + Hexo 搭建博客

前言

使用 GitHub Pages 功能搭建博客的好处有:

  • 免费,GitHub 提供无限流量。
  • 都是静态文件,世界各地都有理想的访问速度。(访问速度可以进一步优化)
  • 拥有绝对的管理权,又享受 Git 的版本管理功能,不用担心文章遗失。

环境配置

Hexo 文档有对 Hexo 安装及使用的详细介绍,推荐阅读。这里我主要写自己安装的步骤、踩过的坑以及一些优化的方法。

在正式安装 Hexo 之前,我们需要确认电脑中是否已安装下列应用程序:

  • Node.js
  • Git

当然,我们还需要 GitHub 账号,如果没有请注册。
注册之后记得一定要前往邮箱确认注册,否则无法使用 GitHub Pages。

Hexo安装

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。
Windows:
$ npm install -g hexo-cli
Mac:
sudo npm install -g hexo-cli

初始化

使用终端cd到一个您指定的目录,执行以下命令(命令中的blog是您将要建立的文件夹的名称):
hexo init blog
使用终端cd到blog文件夹下,执行以下命令,安装npm:
npm install
好了,现在可以试试看是否已经初始化成功,输入下面三条命令:

1
2
3
hexo new test_my_site  \\新建页面
hexo g \\生成静态页面
hexo s \\启动服务器

完成后,浏览器中打开网址(默认是4000端口) http://localhost:4000 ,应该能看到首页:

注:如果无法正常看到首页的话可能是4000端口被占用,可以尝试使用hexo s -p改为其他端口,如
hexo s -p 5000

关联Github

创建仓库

1.登录您的 GitHub 账号,新建名称为您的用户名.github.io的仓库。假设我的 GitHub 账号的用户名是 fatboy,那么我就应该新建名称为fatboy.github.io的仓库。
2.Description可写可不写,随意。
3.勾上Initialize this repository with a README
4.点击Create Repository完成创建。

配置Git

什么是Git ?简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。现在的机子基本都是64位的,选择64位的安装包,下载后安装,在命令行里输入git测试是否安装成功,若安装失败,参看其他详细的Git安装教程。安装成功后,将你的Git与GitHub帐号绑定,鼠标右击打开Git Bash:

或者在菜单里搜索Git Bash,设置user.name和user.email配置信息:

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

可以通过以下命令查看是否设置成功:

1
2
git config user.name  \\查看用户名
git config user.email \\查看邮箱

生成ssh密钥文件:
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
然后直接三个回车即可,默认不需要设置密码
然后找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制

打开GitHub_Settings_keys页面,新建new SSH Key

Title为标题,任意填即可,将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功,输入 ssh git@github.com

如上则说明成功。这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

命令简写

1
2
3
4
5
6
7
8
9
10
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

推送网站

上面只是在本地预览,接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件,如下图:

进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件,如下图

下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后修改为:
deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径,记得加上 .git
branch: master
参考如下:

保存站点配置文件。
其实就是给hexo d 这个命令做相应的配置,让hexo知道你要把blog部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。最后安装Git部署插件,输入命令:
npm install hexo-deployer-git --save
这时,我们分别输入三条命令:

1
2
3
hexo clean 
hexo g
hexo d

其实第三条的 hexo d 就是部署网站命令,d是deploy的缩写。完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io, 你就会发现你的博客已经上线了,可以在网络上被访问了。

感谢大家的支持,让我更有动力去创作!