【精简版】本博客搭建过程及复盘 - Cloudflare + Cloudflare Pages + Hugo + Giscus

说在前面

本博客的搭建相对来说已经算是非常简单的了,但是即使不算前期了解、技术选型和艰难地选择域名,也花费了大概一天才push了第一个post;若是算上这些,可能花了三四天。

所以,有必要记录一下搭建过程及其中的种种考虑,给以后的自己和可能的读者一些有益的参考。

原想写成保姆级教程,但是发现实在太多太杂,且我最近也有些忙,故放弃。只能说,依照这一篇的思路+一些ai协助,能够搭出来一个类似的博客。

当然,之后也还会继续折腾这个博客,所以也许会和这一篇的情况有出入。

概述方案优缺点

优点

  • 至低0元
  • 静态 + Cloudflare,安全稳定性能高。虽然Cloudflare好像刚刚崩了一次大的
  • 所有文稿都是本地markdown,方便迁移,永久保存。
  • 总体配置简单
  • 程序员友好,即会使用这些工具者:(不会也没事)
    • git
    • github
    • 命令行
    • markdown语法
    • VSCode(仅作为md和一些文件的编辑器,不用也可以)
  • 技术应该都是开源的,更新维护也挺频繁。

缺点

  • 扩展性、功能性肯定比不上动态博客,比如WordPress。
  • 类似地,发布有延迟,需要手动push。
  • 程序员友好,那就是非技术用户不友好,起码没那么友好。

域名

域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的互联网上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)。

总之,域名就是xxx.com, xxx.net这种。具体科普本文不讨论,毕竟作者自己也不太懂

也许你不需要买域名

若您将目光上移至网页地址栏,很可能本文的地址开头显示的是https://wenix.dev/(https可能被智能隐藏),或是https://www.wenix.dev/。这是一个顶级域名,显然是我花了钱买的,这个钱对一个学生党来说也不能算便宜了。

然而如果你选择本文的技术路线,那么自费购买的顶级域名似乎没那么重要,因为Cloudflare Pages会送你一个二级域名.pages.dev。这是完全免费的。如果你使用相似的其他服务,如GitHub Pages的github.io,Vercel的vercel.app,也同样是免费的。

也就是说,针对本博客的情况,实际上你在得到了“完全免费”这一重大利好的前提下,要付出的代价只是域名里多了个.pages,然后稳定性略低一丝(比如你和Cloudflare闹掰了被封之类的,或者Cloudflare政策调整收费或者怎么样)。

那我为什么买了呢?因为我当时没看这篇文章 也许追根溯源,是另外一位个人博客主写了一篇非常好的文章,其中提到最好还是花一些钱,否则很容易坚持不下去写博客。我是一个听劝的人。

然后呢,wenix这个名字我很喜欢,.dev则是技术偏向的顶级域名,应该也很不差。主要也是.com被别人注册啦,哈哈。

所以我认为经过考虑之后,也许你不需要买域名。

如果你还是需要买域名

如果你仍认为(在我的方案下)域名是必要的,那么我将尽量分享我所知的经验。

域名商

域名一般要去域名商处购买。域名商有国内和国外的,最大的区别是国内必须实名认证登记,而国外通常可以不填/规避。

二者还有许多差别,我只深入寻找了国外域名商,所以国内就一笔带过:阿里云、腾讯云等等都有域名注册服务,一般来说国内比国外便宜一些,但是注意“首年”价格和“续费”价格可能天差地别(域名一般以“年”为单位购买。)。需要的可以选购。

我的需求是低价(高性价比)+ 支付宝直接付款,最后国外我主要对比项是NameSilo、Porkbun 和 Dynadot,最后选了Dynadot。我也没有全面地搜索,而不是说只有它们或者它们是最好的,请知悉。

选择思路

选择方法很简单:进去这几个的官网,搜索你想要的(几个)域名,比如我是wenix;他们就会给你一大堆后缀加上首年|续费的报价。一般高亮的便宜的那个是首年,他旁边小小的,写着“Renewal”的是续费。

据我的了解,.com当然是通吃;.dev .io .tech .me .cc对于技术博客还是不错的;.top .xyz其实本来是便宜炫酷的选择,但是近年貌似被博彩站玩烂了,所以除非你能接受不被Google、Baidu搜索引擎收录,发邮件给别人可能进垃圾桶,在一些内网的风控里会被标记为有害网站,不然可能需要多加考虑;.blog似乎现在不流行了。当然我的了解也不多,请你多信源验证。

所以其实如果你有一个合适的待选域名思路,买域名还是挺简单的,我这个是5个字母+可以发音甚至还能发两种音,也是能够正常价格买到的。除非你想要1个字母,那估计悬。

购买

我是正常支付宝购买。据说Porkbun有时国内不稳定;Dynadot需要把USD切换成人民币才能选择支付宝付款,请注意。

另外,NameSilo似乎随便找个优惠码就可以优惠1刀,不过也就是1刀了;Dynadot注册时随便找个人的邀请码,然后消费9.99刀以上,就会返双方各自5刀余额。不过我不知道是不是必须第一次消费就9.99刀以上,因为我虽然填了别人的邀请码但是我没消费到9.99刀,也没得到返余额。

如果您也想要在Dynadot买,也许可以在注册时填我的码,感谢。

kJRa8s6K6b6n

然后一定一定要开启Whois隐私保护,Dynadot是赠送的,默认好像就是开启的。

*服务器

我认为没啥必要(为了搭这种静态博客)买,Cloudflare非常强大且免费版也够用。所以我没买。

emmmm

不行了,写文章时间远远超过我的预计,要累死了()先给出极致精简版,接下来再慢慢扩充吧

DNS托管迁移

在Cloudflare添加站点wenix.dev,获取两个Nameservers。

回到Dynadot后台,将DNS设置改为CF提供的地址。

目的:享受 CF 的全球 CDN 加速、免费 SSL 证书(HTTPS)、抗 DDoS 攻击能力。省得自己配一大堆证书什么的。和Cloudflare Pages也有一捏捏联动。

安装Hugo

安装Hugo Extended较好,就是有extended,没有withdeploy的版本。

不同系统安装操作不同,最后可以hugo version验证安装成功。

开始构建博客项目

cd到想放博客项目的地方。解释:hugo就只有一个exe(windows下),就相当于某种环境,所以真正的博客或者其他项目不需要和它放在一起,或者说压根不该放一起,不然如果你开两个博客怎么办,复制两份exe吗?大概是这个逻辑。

hugo new site my-blog(自己取个名)

git init

这样就算是构建好了。

可以去下载主题,但是也太繁琐了所以先不写了,感兴趣可以看其他更棒的教程。

然后关于我使用的Stack主题有一些坑/配置项:

  1. hugo默认的配置文件(各种配置大多在里面写)是toml后缀,但是stack的配置是yaml后缀,我也不知道是否因此,在我的操作中stack一开始有地方不生效。 解决方法是把hugo默认的toml改成yaml(没错,这是可以的),当然语法也都改成yaml的冒号空格;然后把stack的配置文件里的全部内容都复制到hugo默认里面,然后要对stack做什么修改就修改hugo默认里面的相应项。

  2. hugo默认生成的文件夹是content/posts(指的是你放md文件的那个文件夹),但是stack似乎默认读取content/post,一个单数一个复数也是醉了。 解决方法是把文件夹改成post

  3. stack右侧悬浮目录似乎默认不显示,明明那么好看好用! 解决方法是默认的hugo.yaml中找到widgets.page,添加- type: toc

GitHub仓库托管

创建private repo,自己命名,readme啥的都不要加。

hugo搭博客的话,任何修改都需要add、commit、push三件套哦,git基本功。如果觉得麻烦可以去bashrc(windows)/zshrc(mac)里面写个alias。我就是hnew一键创建新md,hpush一键完成三件套。

Cloudflare Pages部署

*请注意界面可能更新,目前251123仍是这样。

Cloudflare - Compute & AI - Workers & Pages下点右上角蓝色create application,然后点下面的Looking to deploy Pages? Get started!不是点上面,上面好像是Workers相关!

然后选git repo的,build里面,框架选hugo,环境变量里添加 HUGO_VERSION = 0.1xx.0 (对应本地版本)

然后你就可以访问xxx.pages.dev了!如果你买了域名,在Pages设置中绑定你的域名即可!提示:有无www是两个域名哦

Giscus部署

Giscus的作用是给博客增加评论区,Hugo原生并没有评论区。优点是快,开源,依托GitHub Discussion。缺点是需要Github登录,筛选了一大批用户。

新建publicrepo,自己取名字别忘了这是博客评论区。 开启这个repo的Discussions。 去Giscus官网根据其指引点点点就行,我修改的默认项有:

  • 分类选Announcements
  • 评论框放评论上方
  • 主题NoBorder Gray

最后它有一大堆参数,但是它语法不是yaml所以我是自己写的,将参数填入hugo.yamlparams.comments.giscus部分。感觉就是官网上每一项的data-删掉,然后等号改冒号就差不多了,若不懂请去更专业的教程或问ai。

VSCode配置

打开VSCode,Extensions里查找并下载Markdown Preview Enhanced,然后打开md右上角最左边那个就是预览。白色太亮可以去预览框右下角改暗色。我之前没找到暗色模式,还去改了css,也可行。