使用 Github Pages 和 Hexo 搭建个人博客

经过一番尝试,兜兜转转,终于又回到了使用 Github Pages + Hexo 的方式搭建博客。今天就通过这篇教程来教大家如何在大部分白嫖的情况下搭建属于自己的博客。

准备工作

git

  1. Windows:下载并安装
  2. macOS:下载并安装
  3. Linux(Debian、Ubuntu):sudo apt-get install git-core
  4. Linux(Fedora、RedHat、CentOS):sudo yum install git-core

相关设置

安装成功后,将git与GitHub账号绑定,右键打开Git Bash,然后设置配置信息。

接下来配置用户名和邮箱

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

接着生成ssh密钥文件,输入如下命令后直接三次回车即可,一般不需要设置密码;

1
ssh-keygen -t rsa -C "github 注册邮箱"

一般执行上述命令之后,会生成id_rsa和id_rsa.pub两个文件,前者是我们私有的,而后者则是对外开放的。接着在C:\Users\Administrator\.ssh目录下找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容复制。

然后打开Gitub/Settings/Keys,创建一个新的SSH key,填写Title和Key,Title可以随意,而Key的内容则是我们刚才复制的id_rsa.pub中的内容,最后点击Add SSH key即可。

这样,我们就可以通过git来将我们的博客内容推送到GitHub上了。

NodeJS

Hexo需要NodeJS才能正常运作。

我们只需要去官网下载最新的稳定版NodeJS并安装即可(安装教程可自行搜索)。

Hexo

npm install hexo即可。

搭建博客

我们给自己的博客找到一个合适的地方之后,就可以开始准备搭建博客了。

Hexo 初始化

打开cmd窗口,切换到博客将要所在的文件夹,并执行hexo init
hexo-init.png
等待一段时间之后,我们博客的雏形就搭建完成了。

完成之后我们的博客目录应该是这个样子:

1
2
3
4
5
6
7
8
9
10
blog
├─.github #GitHub部署相关
├─node_modules #组件,包括Hexo等等
├─scaffolds #模板文件夹
├─source #存放用户资源
│ └─_posts
├─themes #(前)主题文件夹
├─_config,landscape.yml #主题配置文件
├─_config,yml #博客配置文件
└─package.json #npm包目录

配置文件

博客根目录下的_config.yml是Hexo的配置文件。下面我将带大家过一遍_config.yml中有用的部分内容。

首先是名为Site的一大段:

1
2
3
4
5
6
7
title: 南陽劉子驥的博客 #博客标题
subtitle: 逻辑搭建基础,变幻点燃世界 #副标题
description: '' #网站描述
keywords: #关键词
author: 南陽劉子驥 aka KaiserWilheim #博客作者
language: zh-CN #博客语言,默认为en
timezone: Asia/Shanghai #网站时区

其中titledescriptionauthor是用于SEO的,其余选填即可。

然后是URL,其中只有叫url的选项较重要,其他的根据自己喜好即可。

1
url: https://blog.kaiserwilheim.eu.org

这里填的是自己博客的网址,如果是用的GitHub Pages的默认和唯一的域名的话就是username.github.io

之后一大段都是没有什么太大的用处的,如果对里面的设置有要求的话(比如说主页和归档页每一页最多包含多少篇文章什么的),可以自行查阅 Hexo 的官方文档

然后跳到了倒数第二段,这一段只有一个theme,代表着我们博客的主题,默认为Landscape。

这里是Hexo所有的公开主题,支持模板网站的预览和直接导航到GitHub。

我们自己找到心仪的主题了之后,将其作为一个组件通过npm install或者git clone对应的仓库来下载下来之后将这里改为对应的主题名称即可。

比如说这个Diaspora主题,我们只需要在对应位置git clone https://github.com/Fechin/hexo-theme-diaspora.git themes/diaspora就可以将其安装在theme文件夹下。

注意:通过npm安装的在node_modules文件夹下,通过git clone安装的在themes文件夹下,注意冲突。

当然,如果我们不满足于上面任意一个主题的话,可以根据Hexo的文档(同时也是教程)来自己编写主题。

然后就来到了最后一段。
最后一段与我们博客的推送和部署有关。

我们(上面介绍了)使用git来部署到GitHub 上,于是我们就需要安装Hexo的git部署插件,只需要npm install hexo-deployer-git 即可。

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

type必须是git;
repo就填我们将要在GitHub上部署博客的仓库地址,一般是https://github.com/username/username.github.io,具体原因后面会将。
branch就是我们将要推送到哪个分支,根据个人实际情况来填,一般是master

编辑博客

我们博客的source\_post目录下面就是我们博客的所有文档了,我们通过hexo new "postname"新建的文档也在这里。

如果我们想要实时预览自己到底写的怎么样的话,可以使用hexo slocalhost:4000上实时预览(并且不需要联网)

准备 GitHub

我们还需要在GitHub上进行一些操作,才能让我们的博客成功借助Github Pages的力量出现。

首先你得有一个GitHub账号,没有的话请出门左转注册一个再回来继续看。

我们需要新建一个仓库来盛放我们的博客。
根据GitHub Pages的规则,这个仓库的名字需要严格为username.github.io
这样,GitHub将会自动给你配置GitHub Pages,省了很大一部分力气。

github-repo.png

如果你的仓库不是叫username.github.io,那么GithHub Pages就会将你的博客内容放到username.github.io/repo_name这个地址上,但如果你跟着后面的教程设置了自己的域名的话就可以不用担心这个了。

推送并部署

我们在准备完了所有东西之后,就可以开始推送部署了。

我们在控制台按顺序输入如下命令:

1
2
3
hexo clean
hexo g
hexo d

然后等待Hexo将我们的博客内容生成好之后推送到GitHub上,然后再经由GitHub Pages部署即可。

等待数分钟之后,我们就可以在username.github.io上看到我们崭新的博客了。

优化访问速度

由于众所周知的原因,.github.io结尾的域名在国内的访问速度比较慢。我们可以使用 Cloudflare 对其进行优化。

如果你有财力的话,可以去购买一个国内服务商的域名,并使用其服务,这样会快很多。

笔者没有什么财力,所以只能考虑白嫖免费获取域名。

域名

现在白嫖域名的方法有下面几种,我在这里分析一下利弊:

  • freenom
    主流,支持五种域名,功能强大,只不过需要定期续订。
  • eu.org
    可以长期持有,但是国内无法访问,且服务速度超级慢,基本上就是随缘。
  • pp.ua
    国内(应该)可以访问,也需要定期续订,只不过需要绑定银行卡。

我这里用的是eu.org和freenom的.cf。

国内的域名服务商需要你实名认证,对于一些人(比如寄宿制学校的学生)来说可能会很麻烦。

一些比较便宜的域名,比如说.su和.ru什么的可以买这里的域名,只不过需要使用能够支付卢布的支付方式。

我们按照下面的图打开 pages 页面,并在对应的地方填上域名。

repo-pages.png

然后,GitHub会自动生成一个CNAME文件,不要忘了在自己的本地文件中加上这个文件,否则GitHub的自动导航会失效。

Cloudflare

虽然仍然没有国内服务器,但Cloudflare的访问速度比纯GitHub Pages要快得多。

我们首先需要注册一个Cloudflare账号

登录之后点击右上角的“添加站点”,在下图中的框里面填上你的域名。

cloudflare.png

之后打开DNS窗口,向你的域名中添加一个CNAME记录,就像这样:

cname.png

此时你就不需要你GitHub仓库中你的那个CNAME文件了,而且还可以同时访问.github.io和.cf两个域名。

然后我们将域名的运营商(比如freenom)那里的NS记录改为上一个窗口下面的那两个cloudflare nameserver的地址即可。

Netlify

我们还可以有另外一个选择,就是使用Netlify来进行部署和运营。

首先我们需要注册一个Netlify账号

然后我们创建一个团队,选择免费套餐。

之后我们需要新建一个站点,并允许netlify访问我们的GitHub仓库来部署我们的博客。

netlify.png

然后我们点开我们的Domain settings,点击Add domain ailas,填入自己的域名。

netlify-ailas.png

之后在cloudflare里面将CNAME记录改为指向apex-loadbalancer.netlify.com,netlify就会帮我们自动导航。

netlify支持一个网站使用多个域名,且只需要将CNAME记录指向apex-loadbalancer.netlify.com即可,操作十分简单。


结语

其实除了Hexo之外,还有Jerkyll、Gridea等等其他工具可以搭建博客,其中Gridea甚至是可视化的。

除了GitHub Pages和Netlify之外还有很多地方可以托管博客,比如说Vercel什么的。

博客什么的,最重要的其实还是内容,其他的花里胡哨的东西都不重要。

最后,感谢您的观看。
如果有什么问题可以在Telegram上问我。