如何用Github pages和Hexo搭建个人博客

Abstract:
本文介绍如何利用Github pagesHexo来搭建一个个人的博客主页。Github pagesGithub自带的一个开源个人主页的工具,有自己的专属域名,但刚开始页面是空白的,而且需要利用.html来编辑网站。但.html不是每个人都会,从而有了Hexo这个快速、简洁且高效的博客框架。本教程适用于Windows系统,其他系统的话原理相同
(阅读全文↓↓↓)

准备工作

注册Github

首先你需要一个Github账号,注册Github。当然,Github pages只是一个衍生物,而Github本身是一个特别强大的东西,是一个代码的开源聚集地,现在几乎所有的开源代码都会放在这个上面,很多的软件也都是通过这里下载。对于我们个人来说,也是有很多的功能可以使用,Repositories意思是一个仓库,里面可以存任何你想存的文件,然后别人就可以看到了。而里面一些其他的功能,例如Branch, pull request这两个强大的东西主要是用在一个团队任务中,个人简单使用的话,用Repositories存自己的东西,Star保存他人的东西,Fork把别人的东西放在自己的仓库里,这三个功能就足够了。

生成Github pages

首先在自己的Repositories下新建一个仓库,并以 *username*.github.io 命名,其中 *username* 就是你个Github的用户名,也就是你的Github网址最后的名字。例如我的Github网址是 https://github.com/xuyankun ,那么xuyankun就是我的用户名。 其实原则是可以在 *username* 中填写任何名字的,用自己的用户名是以防重名,因为这里的 *username*.github.io 就是你即将生成的Github pages的域名。官方教程中,使用Github的桌面版进行发布的,而且是空白的网页,所以我即将使用gitHexo工具来帮助我们方便发布网页。

res

create

安装Hexo

Hexo安装官方教程
上面这个是Hexo官方出的一个安装教程,可以自己按照流程安装,下面我来说一些需要注意的事项。

安装Git和Node.js

首先我们要安装两个程序GitNode.js。对于Windows用户来说,我们就都从官方的文件中下载下来安装,先安装 Git 再安装 Node.js (你可以通过这里的链接下载,与Hexo教程里给的链接相同)。Node.js这里建议安装6.10的版本。
安装过程中,除了安装路径自己选择以外,其余的都建议直接选择默认项安装。两个程序安装完成后,需要都添加到环境变量(安装过程中可能已经添加了,可以自己检查一下,如果没有自行添加),
Win10和Win8系统的话直接用Cortana搜索“环境变量”就好了,Win7和WinXP的话过程如下(适用于所有Windows系统):
控制面板 -> 系统安全 -> 系统 -> 点击左侧的高级系统设置

我们就会得到如下的图片,点击 环境变量

sys1

系统变量 中找到 Path

sys2

这是我已经添加过的情况,如果没有发现添加进来,就自己通过新建或者编辑添加,要注意的是Git添加的是安装路径中的bin文件,而Node.js则是整个文件。

sys3

配置Git

上面两个程序安装成功后,我们打开时只需要在任意地方(例如桌面)右键选择 Git Bash Here , 如果你想从任何的目录下运行git,不用从一开始一步步cd到哪个文件夹,只需要到那个文件下右键选择这个就行了(其实,由于我们已经添加到环境变量,直接在cmd里面操作也是可以的)。
打开后,输入以下代码进行Git的初始配置:

1
2
$ git config --global user.name "username"
$ git config --global user.email "your_email@example.com"

里面的username跟之前描述的一样,而 your_email@example.com 指的是你注册Github时用的那个邮箱。
配置完成后,可以通过以下代码查看自己的配置信息:

1
$ git config --list

连接Git和Github

这一步能是为了我们之后每次git发布的时候都可以直接就发布,不然会导致每次git后都需要填写一遍Github的密码,就会很麻烦。这个过程需要配置 SSH key 流程如下:
鼠标右键任意地方,选择 Git Bash , 输入:

1
$ ssh-keygen -t rsa -C "your_email@example.com"

遇到提示就一路回车,成功后会在你的用户文件夹目录下C:\Users\Administrator生成一个.ssh文件,打开后会发现文件id_rsa.pub,这就是我们所需要的,如果发现有两个相同的文件id_rsa说明你没有显示后缀扩展名,你需要到文件夹查看里选中“文件扩展名”:

houzhui

然后右键用文本编辑器打开,用 *ctrl + A* 全选然后复制。
(这里推荐一款很好的文本编辑器Notepad++
接着:
进入Github主页 -> 点击右上角的头像 -> 选择setting -> 点击左侧 SSH and GPG keys -> 在 SSH keys 中点击右测的 New SSH key 创建新的 SSH key -> title随意,key里面粘贴刚才复制的内容 -> 点击 Add SSH key 完成
如果遇到什么问题,下面提供官方的教程文档,可以按照流程操作。
官方教程

安装Hexo

下面只需要再次右键打开 Git Bash , 输入以下代码即可安装Hexo:

1
$ npm install -g hexo-cli

如果安装过程中遇到了类似如下的 warn ,是没有关系的,只要没有出现error,就说明安装成功了!

warn

使用Hexo

基本Hexo命令

先介绍一点Hexo里常用的命令:

1
2
3
4
5
$ hexo generate #同hexo g,生成静态文件
$ hexo server #同hexo s,启动服务器,用来本地预览
$ hexo deploy #同hexo d,将本地文件发布到github上
$ hexo new #同hexo n,新建一篇文章
$ hexo clean #清楚缓存

建立博客

接下来就可以开始制作我们的博客了,建立一个文件夹,这个文件夹就是我们建立博客的文件夹,例如我建立的是:D:\Hexo。然后在这个文件夹内右键打开 Git Bash , 输入:

1
$ hexo init #建立网站所需文件

这样我们的博客就建立好了!接着安装依赖包:

1
$ npm install

现在我们只要输入:

1
2
$ hexo g
$ hexo s

打开浏览器,输入网址http://localhost:4000即可本地查看自己的博客啦!意不意外?惊不惊喜?刺不刺激?注意这里只是本地查看,别人是看不到的。

配置本地文件到Github

首先安装一个小插件,不然可能会导致一些deploy的错误,输入以下代码:

1
$ npm install hexo-deployer-git --save

接着用文本编辑器打开D:\Hexo里的_config.yml,到文件底部,可以发现depoly的信息,这是我填的内容,现在Hexo版本在更新,可能会导致你在网上搜的别的填写方法失效,这是我的,建议按照这个格式填写(只需要把我的xuyankun部分填写成你的username即可):

1
2
3
4
deploy:
type: git
repository: https://github.com/xuyankun/xuyankun.github.io.git # xuyankun处替换成自己的用户名
branch: master

发布博客

接着输入以下代码:

1
2
$ hexo g
$ hexo d

你就可以邀请小伙伴到username.github.io网址看你的博客啦!(有时服务器会延迟,需要等上一小会才会有效果)

需要注意的是当我们每次修改内容后,想再次发布时都需要hexo ghexo d(本地查看用hexo s),建议先hexo clean之后再生成静态文件。

Hexo进阶使用

配置Hexo基础设置

我们基本上所有的设置都是在_config.yml完成的,文件里面介绍的也都很明显,自己可以不断尝试,更改,然后生成文件自己查看,自己琢磨一会就都明白了。当然配合官方文档的介绍会更加效率:Hexo配置

撰写文章

开通博客当然是为了写文章,不然跟咸鱼有什么分别!我们利用代码:

1
$ hexo new title

创建一个新的文章,title处可以换成你任何想要的名字,然后你会在source/_posts里看到以这个title命名的文件,然后用文本编辑器就可以撰写文章了!不过这里的文章格式是按照 Markdown 来的,没有接触过的小伙伴不用担心,随便搜一些语法说明就可以写了,然后遇到任何问题再一个个百度一下就可以了,很简单的,这里就给大家奉上我找到的一个简单 Markdown 语法说明:Markdown语法介绍
如果对于Hexo里写文章有任何疑问,依然可以参照官方文档:Hexo写作

给大家提一个小建议,就是在Markdown添加图片一般添加网络图片比较方便,本体图片的路径不仅繁琐而且换了电脑就无法使用,所以我建议大家在自己的GithubRepositories里添加一个仓库专门用来放你的图片,上传成功后(用Github桌面版比较方便,使用方法这里就不介绍了,网页直接传也一样),而图片链接在这里:
md1
md2

更换主题

Hexo默认的主题是Landscape,如果你喜欢就不用看这个部分了,不过要知道,Hexo里可是提供了很多很多好看的主题:Hexo主题(注意这个链接里的主题,点击图片是预览,点击文字则是进入相对应Github页面从而进行下载)。我现在用的这款NexT就是最热门的一款,因为真的很简约很美观!下面就用NexT为例介绍一些关于主题的使用和设置。
首先要下载主题NexT,我们可以直接在D:\Hexo目录下打开Git Bash,输入:

1
2
$ git clone https://github.com/iissnan/hexo-theme-next.git themes/next
# 意思是通过git clone进行下载,然后把文件下载到目录下的themes文件夹里,命名为next

或者我们可以进入NexT下载页面进行手动下载,点击右侧绿色的Clone or download,选择Download ZIP

next

压缩包下载好后解压到目录文件的themes文件夹里,同样更名为next.

next2

每个主题的下载方案都是相似的,但设置方法并不同,要根据各自的文档进行操作,如果你并不想使用NexT主题可以直接看下一个大章节。
主题设置就参考:NexT使用文档,使用文档中的开始使用,主题配置,第三方配置都非常有用,仔细阅读修改相应内容,就可以让主页变得更加美观! 下面我简单介绍一下几款好用的第三方插件的设置。

第三方插件设置

第三方设置里,我们主要是希望拥有评论系统和访客的统计,如果你们去百度相关内容,会发现介绍得非常麻烦,因为那是以前,现在Hexo把这些功能都集成在主题内了,我们只需要到相关的第三方网站里注册,把相关的id输入进主题配置文件即可,这里的主题配置文件指的是themes\_config.yml文件。
评论系统的话我建议使用Disqus,不过这个评论系统是只支持国外社交软件登陆的,国内的话之前可以选择多说友言,可多说即将关闭了,而友言我最近发现用不了,所以用了官方文档里介绍的另一款棒子产的评论系统:来必力,注册使用非常简单。Disqus的注册使用也很方便,如果有些不明白的可以参考这篇文章:为 Hexo 博客加入 Disqus 评论,里面的最后一步 配置 Hexo 里只需要完成第一步输入shortname即可。
而统计功能我推荐使用不蒜子,都不用去注册,直接到配置文件里打开就行了。
具体的使用参考:Hexo第三方服务集成

绑定个人域名

有了自己的博客和专属域名,但你告诉别人你的主页时网址还是要添加.github.io的后缀,还是会让小伙伴不容易记住,所以一个个性域名就是必备的了!
首先去万网域名去搜索一个自己喜欢的域名,然后 买下来,比如我买的域名就是xuyankun.cn
购买成功后,点击右上角的控制台,然后从左侧依次进入:域名与万网(万网) -> 域名 。 于是能看到自己刚刚购买的域名,在域名的右侧点击解析

jiexi

然后通过添加解析进行设置:

shezhi

请务必按照我设置的格式来,当然,要把xuyankun部分填写成你自己的用户名。其中CNAME那一行设置的意思是不仅可以让你输入xuyankun.cn可以进入博客,而且可以通过www.xuyankun.cn进入,不然加了www.是进不去的,想想看,你告诉别人你的域名,结果人家下意识加了www.却进不去,多尴尬呀!
不要以为到此就结束了,还有最关键一部,是要在之前GithubRepositories下的username.github.io里面添加一个CNAME文件。添加过程如下:
点击Create new file:

newfile

接着输入:

cname

最后点击最下面的Commit new file就完成了!
可惜这并没有全部结束,唉,别害怕,这里真的是最后一步了!问题在于当你下一次利用hexo ghexo g发布时,再到自己的Repositories里看就会发现CNAME文件就没有了,所以我们要到Hexo的文件夹下,到source里创建一个CNAME文件,还是跟之前一样,文件名不要后缀(提示文件可能不可用依然点是),内容也只是www.xuyankun.cn即可:

cname2

现在每次再使用hexo clean,hexo g,hexo d等命令进行发布后,CNAME文件就同时被发布上去了!

需要注意的是,.cn,.com的域名需要实名认证后才能生效,而且解析成功后,并不是网站立刻就生效了,需要等一段时间,不用着急。

结尾

经过漫长的摸索,想必你应该学会如何从头建立一个这样看起来非常酷炫的博客了吧,如何有任何的疑问可以在下面留言,当然自己去google、百度慢慢摸索的话,乐趣会更大~
这是第一次写这样的稍微技术一点的文章,是分享也是自己的一种学习记录,这篇内容写的算是非常详细,目的是希望转告给一些非技术类的小伙伴们也能自己完成制作,感受一下自己实践的乐趣。

参考文章

使用Hexo搭建个人博客(基于hexo3.0)
GitHub Pages + Hexo搭建博客
使用hexo搭建属于自己的博客