如何搭建个人博客(GitHub Pages + Hexo + 域名绑定)

前言

自己搭建一个独立博客似乎是一件很极(zhuang)客(bi)的事情,笔者觉得很好玩,所以抱着试试的态度搭建了本博客,请各位看官轻拍。

本文记载了笔者在Windows下一步步搭建博客并绑定域名的过程。搭建博客主要用了Hexo与GitHub Pages,域名绑定不是必须,读者可自行取舍。在Mac下搭建博客的步骤也是一样的。

第一步,Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。在安装Hexo之前,需要先安装Node.js以及Git。

安装Node.js

到Node.js的 官网 下载适合自己电脑系统的版本进行安装即可,推荐更稳定的LTS版本。

笔者选择的是LTS的.msi文件进行安装(Windows 64-bit)。

安装Git

  • Windows:下载并安装 Git
  • Mac:使用 Homebrew, MacPorts 或下载 安装程序 安装。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

安装Hexo

Node.js和Hexo安装完毕后,终于可以安装Hexo啦!

打开Git Bash,输入以下命令即可完成安装。

1
$ npm install -g hexo-cli

部署Hexo站点

在Hexo完成安装之后还需要部署本地的博客站点。

以笔者为例,笔者打算把博客站点放到D盘的Blog文件夹下。

进入D盘根目录,新建Blog文件夹。然后在D盘空白处单击右键,

Git Bash

选择Git Bash Here。然后输入以下命令:

1
2
3
$ hexo init Blog
$ cd Blog
$ npm install

到此,Hexo博客站点本地部署完成。然后在d:/Blog文件夹下用Git Bash执行以下命令:

1
2
$ hexo g #生成本地发布文件夹
$ hexo s #开启服务

会出现如下反馈:

hexo service

然后你就可以浏览器输入localhost:4000预览你的博客了。

别高兴的太早,这只是在你本地跑起来了,接下来需要把博客部署到网上(也就是GitHub Pages上)。

第二步,GitHub Pages

GitHub 是世界上最大的代码存放网站和开源社区。而 GitHub Pages 可以被认为是用户编写的、托管在GitHub上的静态网页。免费又稳定,用它来放博客,再合适不过了。

GitHub Pages

创建GitHub Pages

你需要有一个GitHub账号,然后只要创建一个Repository(代码仓库)就行了。但这个仓库是有规则的,其名字格式必须为:yourusername.github.io。创建好之后,这个仓库就是你的GitHub Pages了。

GitHub Pages

仓库命名格式中的yourusername是你的GitHub用户名。笔者的GitHub用户名是szm1002,所以仓库命名为szm1002.github.io

配置和使用GitHub

我们需要设置SSH keys来让本地Git项目与GitHub建立联系。

配置SSH Keys

首先生成一个新的SSH key:

1
2
3
$ ssh-keygen -t rsa -C "szm1002@126.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):

注意,需要把邮箱地址替换成你自己的邮箱地址,且此处 -C 是大写。

此时回车就好。

然后系统会要你输入密码,这个密码会在你提交项目时使用,如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

注意:输入密码的时候没有*字样的,你直接输入就可以了。

在本机设置SSH key之后,需要添加到GitHub上,以完成SSH链接的设置。

  1. 打开id_rsa.pub文件(在C盘中,但不同系统具体路径可能不同,可在C盘中搜索该文件获取),此文件内容为刚才生成的密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确复制这个文件的内容,才能保证设置成功。
  2. 登陆GitHub,点击右上角的 Account Settings—>SSH Public keys —> add another public keys 。
  3. 把你本地生成的密钥复制到里面(key文本框中), 点击 add key 就ok了。

测试

可以输入下面的命令,看看设置是否成功:

1
$ ssh -T git@github.com

如果是下面的反馈:

1
2
3
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

输入yes,然后会看到:

1
Hi szm1002! You've successfully authenticated, but GitHub does not provide shell access.

此时,你的PC已经与GitHub建立联系,但还需要设置你的用户信息。

设置用户信息

输入下面的代码进行个人信息的设置,把名称和邮箱替换成你自己的:

1
2
$ git config --global user.name "szm1002"
$ git config --global user.email "szm1002@126.com"

现在,你的PC就成功通过SSH链接到了GitHub了。

Hexo部署到GitHub Pages

在之前你只是在本地把博客跑起来了,现在我们需要把它部署到GitHub Pages上。

在Git Bash中cd到你的站点(以笔者为例,是d:/Blog文件夹),或在站点中右键选择Git Bash Here。输入以下命令:

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

然后以文本编辑器打开站点的_config.yml文件,并滚动到最下面添加如下配置信息(注意最下边有deploy和type字段,需要覆盖这两个字段):

1
2
3
4
deploy:
type: git
repo: https://github.com/szm1002/szm1002.github.io.git
branch: master

其中repo字段的值是你的GitHub Pages提交代码的git地址。(注意需要添加.git后缀)
由于_config.yml文件有严格的格式要求,在type, repo, branch字段前面需要有两个空格。

然后你就可以用以下命令把博客发布到GitHub上了。

1
2
3
$ hexo clean #清除缓存
$ hexo g #生成本地发布文件夹
$ hexo d #deploy到GitHub

hexo ghexo d 两条命令可合并写成 hexo d -g

至此,博客已经搭建完成。你可以通过http://yourusername.github.io来访问你的博客了!

Hexo博客有很多定制的主题,若你不喜欢默认的主题landscape,可自行选择其他的。笔者使用的是 NexT。主题使用方法可以通过它的文档获取,在此不赘述。

附上 Hexo主题大全

第三步,域名绑定(可选,非必需)

购买域名

笔者是在 万网 购买的域名(songziming.com.cn)。也有很多人推荐去国外一个很出名评价很好的网站 GoDaddy 购买。关于如何购买域名以及实名认证等这里不赘述,很简单。

域名与GitHub Pages绑定

如果在万网购买的域名,可以使用万网的DNS解析,请直接跳到给域名添加记录那一步。但万网的解析好像不是很稳定,所以笔者使用的是DNSPod解析。

首先,修改你域名的DNS地址为 f1g1ns1.dnspod.netf1g1ns2.dnspod.net

DNS

然后在你的本地站点目录里的source目录下添加一个CNAME文件,不带后缀,注意文件名要大写

CNAME

以文本编辑器打开CNAME,里面添加你的域名信息(不加http://)。如:添加 songziming.com.cn

完成之后需要deploy到GitHub上。(hexo d -g

最后,注册 DNSPod,并添加域名,添加记录。

添加域名 添加记录

添加记录时按照图中的记录添加即可。如果使用万网的DNS解析,无须添加记录类型是NS的那两条。

在记录中,192.30.252.153192.30.252.153 是Github Pages服务器指定的IP地址,访问该IP地址即表示访问Github Pages。
记录类型为CNAME,记录值是szm1002.github.io.。表示将http://songziming.com.cn这个主域名映射szm1002.github.io。这里需要注意,在记录值中.io后面还有一个小数点。
DNS解析可能需要一段时间才生效。

把你的更改都deploy到GitHub上去(hexo d -g)。

现在,域名已经绑定好了。尽情使用你的博客吧!

------ 本文结束 ------
坚持原创技术分享,您的支持将鼓励我继续创作!