利用GitHub Pages和Hexo搭建个人博客

时间:2024-06-24 12:36:02

本文首发地址: 非生异也

本项目源码托管在GitHub

Why

阮一峰曾经说过:喜欢写Blog的人,会经历3个阶段。

第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

在这之前,我在博客园里写了两年的博客,数量虽然不多,但都是自己学习过程的真实记录,这属于第一阶段。随着学习的东西越来越多,总想着要有个独立的个人主页,于是就开始不停地Google。最终在SAE + WordPress 和 GitHub Pages + Hexo 之间选择了后者,一是因为Git的存在,二是因为喜欢这种轻量级框架的简单而强大。

Start

GitHub Pages

GitHub Pages的官方介绍是 Websites for you and your projects. 利用它只需要简单的几步,就可以建立一个自己的站点,前提是已经有了一个GitHub帐号。

1、Create a repository:
repository名称的格式必须为 username.github.io (username为自己的GitHub帐号。)

2、Clone the repository:

$ git clone https://github.com/username/username.github.io

3、Hello World:

$ cd user.github.io
$ exho "Hello World" > index.html

4、 Push it:

$ git add --all
$ git commit -m "Initial commit"
$ git push -u origin master

5、已经生成了你的主页 http://username.github.io

Hexo

Hexo是一个快速、简洁且高效的博客框架,具有如下特点:
急速生成静态网页
支持Markdown
一键部署博客到GitHub Pages等平台
丰富的插件支持

1、 先在本地环境配置好Hexo

$ npm install hexo-cli -g
$ hexo init username.github.io
$ cd username.github.io
$ npm install
$ hexo server

2、将博客部署到GitHub上:这时在浏览器输入http://localhost:4000 就可以在本地预览博客了

安装 hexo-deployer-git

$ npm install hexo-deployer-git --save

修改配置文件_config.yml

deploy:
type: git
repo: <repository url>

提交到GitHub上

$ hexo clean
$ hexo g
$ hexo d

此时访问 http://username.github.io 就和本地一样的效果了。更多Hexo的使用访问Hexo官方文档

Append

现在已经可以通过访问你的GitHub Pages二级域名来访问你的博客了,不过既然是独立博客,当然是应该通过独立域名来访问。

购买域名

由于在国内购买域名需要备案(虽然我已经备案过了),费时比较长,所以我又在国外购买了一个域名。而且正好赶上namecheap疯狂促销,就以很满意的价格买了一年的。

域名解析

添加CNAME

在usname.github.io/source/下新建CNAME文件,写入购买的域名,保存并部署。

DNS设置

建议使用DNSpod,添加两条A记录分别为
192.30.252.153
192.30.252.154
这两个IP即GitHub Pages的IP。

去namecheap修改DNS地址

在域名设置里面将DNS改为DNSpod提供的DNS
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
可能需要等段时间才能生效。

后记

本文有些地方可能写得不够清晰,欢迎留言交流。