GitHub Pages + Hugo: 我的个人博客搭建之路

blank

GitHub Pages + Hugo: 我的个人部落格搭建之路

很早就有自己购买域名搭建一个个人部落格网站的想法了,而真正开始将这个想法付诸行动是源于 GitHub Student Developer Pack 的成功申请。

申请 GitHub 学生开发包

GitHub 学生开发包内包含众多权益,比如 Termius 的 Premium 版、GitHub 的 Pro 版会员、name.com 以及 namecheap.com 提供的免费域名 + SSL 证书、DigitalOcean 提供的 50 刀代金券。权益实在太多了,大家可以对照官方网址逐一研究。

blankblank

有关 GitHub 学生包具体如何申请,网上相关的教程非常多也相对比较容易,在此简单的写一下申请流程:

  1. 进入 GitHub 学生包 的官方页面;
  2. 点击「Get the Pack」按钮登录你的 GitHub 账号;
  3. 点击「Submit Your Information」提交訊息进行申请,具体的填写可以参考下图(如果使用由学校提供的 edu 邮箱会加快审批速度);
  4. 等待几天后收到邮件就可以享用 GitHub 学生开发包的所有权益。

blankblank

购买 DigitalOcean 云服务器

在 GitHub 学生包申请成功后我主要看了一下有关云服务器的权益,主要有 Microsoft Azure 的 100 刀额度、AWS 的 100 刀额度以及 DigitalOcean 的 50 刀额度。由于苦逼的我并没有信用卡,因此我最后选择了只需要绑定 Paypal 的 DigitalOcean。

然而在这里我却不幸的落入了坑里,最后不得不放弃使用云服务器搭建一个 WordPress 网站的想法。

这是由于 DigitalOcean 的邀请注册机制,新用户通过他人的邀请链接注册使用便可以获得为期两个月的 100 刀的额度,看起来不错,然而两个月相对于 GitHub 提供的一年额度实在是太短了,最主要的是每一个账户尽可以使用一次优惠同时 Paypal 只能绑定一个账户,这也导致我在通过他人的邀请链接注册后也是用不了 GitHub 学生包提供的白嫖优惠了......因此,诚心告诫像我一样想要使用 DitgitalOcean 作为建站主机的穷学生一定要在浏览器的隐私页面在 官网 进行注册。

由于我接下来在 DigitalOcean 只能够正规续费,而经过评估,DigitalOcean 所提供的使用体验以及性价比就不太好了,也因此前几天我正式的 “删库跑路”,注销了 DigitalOcean 账户。

购买域名 + 配置 SSL 证书

我最开始是在 namecheap.com 进行选购域名,该网站可以免费提供 .me 域名一年的使用权以及有效期一年的 SSL certificate。除此之外,name.com 可以提供免费的 .studio/.ninja 等域名,在 .TECH Domains 则可以获取免费的 .tech 域名等等。

在选择了合适的域名之后我们在网站的后台便可以管理 DNS 记录,申请开通 SSL certificate 以进行网站的下一步搭建了。

blankblank

初识 WordPress

云服务器创建好之后,便可以搭建 WordPress 开发环境了。由于编译安装需要输入大量的命令,如果是配置生产环境需要耗费大量的时间,同时对 Linux 小白不太友好,因此现在比较流行的是使用 LNMP/LAMP 等一键安装包进行环境搭建。

LNMP 的全称为 Linux + Nginx + MySql + PHP,LAMP 的全称则为 Linux + Apache + MySql + PHP,由于 Nginx 使用资源少同时支持更多并发连接,对于静态内容比较多的网站支持性不错,因此我选择了 LNMP 作为开发环境,具体的安装文档可以在 LNMP.org 查阅。

搭建好数据库设置完毕用户名、密码等基本訊息后,我们便可以到网站的后台来管理自己的部落格了,首先可以选择一个好看而简单的部落格主题,在这里建议一般在官方后台以及 ThemeForest 等比较正规的主题网站上下载使用而避免第三方主题携带有恶意代码等。

WordPress 网站的后期管理相对比较简单,许多维护问题在网站后台就可以解决,如果还有遇到的问题话,Google 以及 官方文档 中基本能告诉你答案。

告别 WordPress 拥抱 GitHub Pages

由于 DigitalOcean 的垃圾服务以及对 WordPress 的厌倦,我希望能找到一个对 Markdown 支持更好、更能使人专注于创作而不是调整页面的平台,这让我回忆起了几年前创建的 GitHub Pages。

由于不太需要动态内容,静态网站已经可以完美的满足我的需求,对于我来说,GitHub Pages 便是一个方便的实现方案。

而既然选择了 GitHub Pages,相应的可以选择 Hugo、Hexo、jekyll 等静态网站生成器加以实现。由于对 Hugo 的一款主题十分钟情,我便毫不犹豫地选择了 Hugo,同时,Hugo 号称是世界上生成网站最快的 framwork 倒也是蛮不错的了。

blankblank

安装 Hugo

在 Hugo 的安装中我开始遇到了一些麻烦,与 Mac 和 Linux 相比,Windows 端的 Hugo 安装显得略微繁琐,首先在 Hugo 的 Release 页面 根据相应的版本以及平台进行下载,64 位的 Windows 电脑即选择下图中某一个即可。

blankblank

由于部分主题需要 Hugo 的 Extended 版本才可以正常使用,因此建议一步到位直接安装 Extended 版本的 Hugo,在将压缩包解压后一定不要忘记的是将 hugo.exe 所在的文件夹添加至系统的环境变量

若是以上步骤都正常完成,那么可以在输入 hugo version 命令后得到正常的版本号显示。

blankblank

接下来便可以正式的使用 Hugo 来创建你的网站。

初始化网站

首先选择好一个合适的存储路径,接下来便可以通过 hugo new site XXX 的命令来初始化网站。

blankblank

进入文件资源管理器,我们可以清晰地看到文件的基本结构:

blankblank

接下来便可以配置自己的部落格主题了,我选择的是 MemE 主题,主要是看重它的简洁大方,同时字体渲染还蛮好看。主题的官方页面如下:github.com/reuixiy/hugo

下一步便进行主题的安装:(假设 blog 是你创建的 site 的名称)

~ $ cd blog
~/blog $ git init
~/blog $ git submodule add --depth 1 https://github.com/reuixiy/hugo-theme-meme.git themes/meme

同时,你也可以尝试新建文章的操作:

~/blog $ hugo new "posts/hello-world.md"
~/blog $ hugo new "about/_index.md"

Hugo 提供了一种非常便捷的预览方式,输入命令

~/blog $ hugo server -D

便可以在浏览器键入 localhost:1313/ 而实现网站的实时预览。

自定义主题

Hugo 可以提供非常强大的主题自定义的能力,根据主题所提供的配置文件,我们可以不断丰富自己的网站的功能,也可以根据自己的喜好增添许多 CSS 样式来进行美化。

以我所使用的主题 MemE 为例,可以选择开启 KaTeX、MathJax、Mermaid 等许多功能,同时对网站的几乎所有部分都可以更改或添加自定义元素:

blankblank

使用 Github Pages 托管网站

随后便可以在 GitHub 上建立 Repo 来托管自己的网站代码了。

  1. 将 config.toml 中的 baseURL 更改为你自己的自定义域名。
  2. 在 GitHub 中创建一个名称为 username.github.io 的仓库(username 替换为你自己的用户名),同时其余选项均不勾选。
  3. 在你的 Hugo 网站目录下键入命令 hugo -v 生成网站的相应文件,存储在 public 目录下。
  4. 进入 public 目录下,并按照正常的 git 命令操作:
blankblank

如果 git 操作正常没有报错,那么这时你便可以在你的 GitHub 仓库中看到相应的文件了。

如果你需要使用自己的自定义域名来使你的 GiHub Pages 更为精致,那么你需要先到域名管理后台添加一条 CNAME 记录:

blankblank

进入仓库的 Settings 页面,找到 GitHub Pages 相应设置处:

blankblank

按照 GitHub 的提示,将自定义域名填入 Custom Domain 处,并勾选 Enforce HTTPS,等待一段时间使 DNS 记录生效后,便可以成功的访问自己的域名来进入部落格了。

若是之后对文章进行了更新,便可以使用 git push 来进行同步:

$ cd public
$ git add .
$ git status
$ git commit -m "add posts"
$ git push

最终我的部落格现在大概长下面这样:

blankblank

文章的大致内容大概就这么多,祝愿大家都可以顺利的建立起自己的小站。

What do you think?

Written by marketer

blank

11 个最佳 WordPress 个人博客主题推荐

blank

选Shopify还是WordPress独立站建站最接地气的分析丨出海笔记