noFantasy

使用Hugo + Cloudflare搭建个人博客

 2660

-选择平台

-动态网站 or 静态网站

在做出了搭建个人博客的决定后，我了解到现在主流的建站方式有两类：

  1. CMS + 云服务器 搭建动态站点，其中WordPress和Ghost是比较常见的选择。
  2. SSG + 托管平台 搭建静态站点，SSG的选择相对来说是比较丰富的，例如Hexo，Hugo，Gatsby等等。

有选择自然就要权衡利弊，简单地搜索一下就能找到许多对比动静态网站的文章，我看到的是这一篇。简单归纳一下静态网站的优缺点：

Advantages

  1. 速度快。由于服务器端都是已经渲染好的HTML文件，每当网站有访问时，服务器只需要负责把它们分发给访客。
  2. 版本控制。正因为站点完全由HTML文件构成，因此用Git进行版本控制是非常方便的，而且大部分的托管平台都对此有原生的支持，搭建起来非常方便。
  3. 更安全。我对网络安全的知识比较欠缺，但看了几篇文章都是这么说的，那么应该是这样没错的吧。

Disadvantages

  1. 创建实时/动态内容更繁琐。需要使用第三方API来添加，相比于WordPress成熟的社区和插件库来说比较欠缺。
  2. 没有管理后台。这意味着想要对站点edit on the go是比较麻烦的。

对于以分享文章为主的个人博客来说，静态站点已经可以很好地满足需求了，再加上把网站托管在诸如Netlify之类的平台上可以省去购买云服务器的钱和折腾它的时间，我决定以静态站点的方式搭建这个博客。当然，如果上述这些原因并没有打动你的话，我还有另一剂猛药。

-选择Static Site Generator

喝下这一剂猛药之后，想必我们已经统一战线了。可是好景不长，马上又迎来了SSG的选择。Jamstack.org这个网站对SSG有一个比较全面的归纳，我看中了其中GitHub星数较多的几个：Hugo，Gatsby，Hexo。因为知道它们都能get the job done，所以我就从外观角度出发，以挑选主题的方式来挑选平台。最终，Hugo的MemE获得了我的青睐。如果你是一个更重内质的人，这里有一些简单的比较。虽然选择的时候非常草率，但在搭建站点的过程中，Hugo详实的documentation和飞快的build speed都给我带来了非常不错的体验。

-选择Host

如前文所言，静态站点的一大好处是便捷的版本控制，因此部署在GitHub Pages上自然就成为了我的第一选择。GitHub Pages是非常受欢迎的host，在网上也有丰富的教程，实际上这个博客初见天日，也是通过GitHub Pages。但是正所谓人怕出名猪怕壮，GitHub既给它带来了popularity，也给它带来了inaccessibility[1]。这与我想要这个博客被更多人看见的初衷是不符的。

正当我为替代方案苦恼时，对DNS服务器的搜索却让我意外地发现了今年四月方才「公测」的Cloudflare Pages。它可以直接连接到已有的GitHub Repository作为网站的源码，并且对常见的SSG有built-in的支持，非常简单就能设置好自动部署；此外，它有自带的免费web analytics服务，一键即可开启对网站流量的监控；最重要的是，得益于Cloudflare庞大的CDN网络，Cloudflare Pages在国内的访问速度非常快[2]！

-搭建过程

搭建相较于做选择来说只是一个体力活，再加上我选择的平台都有比较详细的官方文档和社区教程，整个流程走下来非常地顺畅。

-安装Hugo

# install Hugo (macOS)
	brew install hugo

# confirm the installation
	hugo version

# create site folder
	hugo new site myblog

# install theme MemE
	cd myblog
	git init
	git submodule add https://github.com/reuixiy/hugo-theme-meme.git

MemE主题除了外观优雅美观之外，原作者reuixiy为主题撰写了近千行注释丰富的配置文件，我的建议是开启Hugo server实时预览config.toml文件对网站外观的影响。

# create new post
  hugo new "posts/article1.md"

# preview
  hugo server -D

config.toml文件中绝大部分设置的优先级是低于文章front matter中参数的，因此config.toml可以被视为默认情况，而front matter则是「特殊情况」，以此来更灵活地配置不同页面的behavior。

-部署到Cloudflare Pages

在本地调试好网站之后，就可以着手把它部署到Cloudflare Pages上了，流程非常简单：

  1. 创建新的git repository
    由于目前Cloudflare Pages只支持连接GitHub，因此我们前往GitHub为个人博客新建一个repository，具体搭建的流程可以参考GitHub的官方文档。值得一提的是，与GitHub Pages必须付费订阅才允许将repository设置为private不同，Cloudflare Pages对此没有要求，因此这里可以自行选择是否公开。
  2. 将repository连接到Cloudflare Pages
    创建Cloudflare账号并登陆，来到Pages界面，选择Create a project，并根据屏幕上的提示连接刚刚创建的GitHub Repository。
  3. 配置项目 Cloudflare的官方文档清楚地介绍了多种流行SSG的配置方法，如果你只想阅读关于Hugo的项目配置，那么可以直接看这里。

Hooray! 如果一切配置正确，那么你现在应该已经可以通过一个诸如xxxxproject-namexxx.pages.dev的网址访问你刚建成的个人博客了！

-配置自定义域名

虽然Cloudflare Pages相比GitHub Pages有诸多优势，但这个丑陋的域名绝对不是其中之一，因此为自己的网站购买一个域名还是很有必要的。若是你还没有域名，也可以直接在Cloudflare上购买，价格也比较亲民。

配置自定义域名的方法也非常简答，但在开始之前需要注意的是，Cloudflare Pages必须使用Cloudflare自己的DNS服务器，因此你很可能得先前往域名购买商的管理界面修改NameServer。点击刚创建的project，点击custom domains，再点击Set up a custom domain，输入自己的域名，Cloudflare会自动帮你填好CNAME record，只需要点击Activate domain设置就完成了。在添加完主域名之后，如果你还想添加其他的subdomain（例如www.example.com），你只需要重复一遍刚才的流程。

完成这些基础配置之后，点击左上角你的域名，就可以探索更多设置和Cloudflare提供的服务了，接下来，每当你对网站文件做出修改，你只需要在终端敲出这些指令

  cd myblog
  git add .
  git commit -m "new updates"
  git push origin main

Cloudflare Pages就会自动帮你将修改部署到网站上啦!

  1. 此处指DNS污染和GitHub Pages无法被百度索引的问题。 

  2. 详细数据可参考Cloudflare Pages is Lightning Fast 

加载评论