技术栈 | Tech

搭建Hugo静态博客的踩坑小记

目录

之前wordpress坏了很多次,有点想迁移到hugo,1月份尝试搭了一下,因为主题调试不出来,弃。上周想起来又搞了一下,好歹是跑起来了,不过bigfa说的也对,hugo的很多功能都需要额外实现,对我这种0代码选手来说未必比WP更好,暂时记录一下这次搭建过程,至于要不要全搬过去,慢慢再说吧。

搭建hugo的基本常识

静态博客的选择有很多种,网上也有对比,这里就不赘述了,hugo可能是目前比较热门的选择。按 教程所述 应该需要具备一些基础知识:

  1. 了解基本的终端命令行知识,如:cd, ls
  2. 安装了 Git ,并且了解基本的 Git 知识
  3. 有一个 GitHub 账号
  4. 有自己偏好的代码编辑器(我使用的是 VS Code

对于我这种小白来说,看了很多教程都没有搞清楚一点,就是:假如我有多台电脑,需要每台都可以用来更新博客,是每台电脑都要部署hugo,通过hugo来生成,还是部署好一次之后,其他电脑只需要连接github的仓库,每次更新博文的文件就好。

实践之后我的理解是两种方案都可以?不太确定理解的对不对。

我选用了第二种方案,把写的内容推送到GitHub仓库,其他工作都在远程自动完成,比较适合懒人。

开始之前,还需要选择用谁家的页面托管服务,看比较多人选择是GitHub仓库 + GitHub Pages ,另外还有 Cloudflare PagesNetlifyHerokuGitLab PagesGoogle Cloud StorageAmazon S3 等等。

我对比了一下选择了Cloudflare Pages,原因有:

  • 访问速度非常快,自带 CDN,比Github快(国内
  • 部署速度非常快,从本地push之后马上会收到推送。虽然每个月限制500次,但除非需要调试,一般能push到10篇文章就很了不起。
  • 配置操作简单,可以Github仓库设置为私有,不需要配置很多访问Token之类的。
  • 域名在Cloudflare,直接绑定自定义域名很方便。

安装和调试hugo

网上关于搭建的教程实在太多,有很多只是博主的个人记录,描述相当之简略,对于新手来说可以了解的内容不多,这几篇是我觉得写的比较详细,可以学习参考的:

Hugo 静态博客食用指南

Hugo + GitHub Action,搭建你的博客自动发布系统

如何 30 分钟搭建一套完整独立博客

如何用 GitHub Pages + Hugo 搭建个人博客

a. 安装Hugo

远程部署应该不用在本地安装hugo,不过有时候在本地调试效果的话,装一下也无妨,官网下载,之后用 hugo version 看下安装是否成功。

b. 自定义配置

装好hugo之后,可以从0开始处置后安装,也可以使用别人做好的设置直接套用,我用的bigfa的主题 farallon ,和wp同款,教程里配置主题的时候对应替换就行。

exampleSite下的内容不是一股脑全都复制到content,而是在自己的根目录文件夹下面复制到对应的文件夹。

记得修改配置文件:

echo "theme = 'farallon'" >>config.yaml

hugo默认的config是toml格式,但实际上支持toml,yaml,json三种格式,如果不喜欢toml,可以删掉默认的conflg.toml文件,新建config.yaml,有个教程推荐的 transform.tool 工具挺好用。

c.发布新博客

完成基础配置和模板设置之后,可以通过 hugo new 命令发布新文章。

有时候执行hugo new xxx.md命令的时候会出现错误,多半就是配置文件和博文的格式不匹配有关:

archetypes/default.md是生成的新文章的默认模板,可以在这里面配置通用的样式,格式要与config的文件格式统一,当然也可以直接修改每篇文章,总之,要统一。

d. 启动hugo

启动hugo:hugo server,通过浏览器 http://localhost:1313 地址访问我们的本地预览网页,看到页面正常就证明本地部署成功啦。

Github仓库管理

本地文件已经配置好了,接下来要把文件push到Github仓库,程序员们一般用命令行,如果像我一样的话,可以用官方的图形界面 GitHub Desktop ,可视化操作非常简单。

下载后创建Github仓库,选择Create New Repository,名字与本地hugo文件夹要一致,Local path是blog所在的文件夹的位置。新建好之后就能看到之前的hugo文件都添加到files里面了。

点击菜单上的Publish Repository,选择Keep this code private,发布即可,

之后每次更新或者修改了hi_hugo中的文件,比如新增了一篇博客,都需要打开GitHub Desktop,在左侧的Summary中填入更新的log,Commit to master后,去Repository菜单中点Push,就完成了。

这个动作实际上相当于修改了一个博客的原始源文件,需要经过部署才能生成静态的网站,因为我是要远程部署,所以下一步要去托管网站操作。

创建Cloudflare Pages托管

访问 Cloudflare Pages ,登录并找到Workers 和 Pages,点击 “创建应用程序”。选择你刚刚创建的 Github 仓库。

选择从自己的账号部署,登录连接,选择特定的repositories,

在 “构建设置” 部分,提供以下信息:

其中,hugo --gc --minify中的--gc 是在构建网站完成以后清理缓存,--minify 是最小化所有支持格式的输出文件,比如生成的 html 文件,如果运行出错的话可以删掉,只填hugo。变量名称这里,因为不太确定服务器的默认HUGO版本,可以根据最新版本填一下,值就是对应版本号,点击 “保存并部署”。

Cloudflare Pages 将会后台运行部署,成功后会收到一个 *.pages.dev 子域名,用于访问,也可以绑定自定义的域名。至此,一个 hugo博客 就搭建好了~

这里还踩了一个坑,部署的时候一直有错误提示:

Error: failed to load modules: module "farallon" not found in "/opt/buildhome/repo/themes/farallon"; either add it as a Hugo Module or store it in "/opt/buildhome/repo/themes".: module does not exist
Failed: Error while executing user command. Exited with error code: 1
Failed: build command exited with code: 1
Failed: error occurred while running build command

网上查了一下,也有很多人遇到类似的问题都没有解决。

后来自己摸索到原因应该是我直接用了bigfa配置好的网站,但是下载的文件中themes\farallon文件夹是空的,clone一个主题文件夹放里面就好了。

后续

如果真的要搬到hugo的话,除了之前已经折腾好的 图床 ,其他想到的要做的有:

  1. 博文导入,包括了导出-调整格式-导入,每个步骤可能都有坑,但毕竟也是写了很多年的互联网留痕,不想丢掉。
  2. 评论功能搭建,还需要把旧的评论也导入。
  3. 模板调整
  4. 其他七七八八的功能……比如字数统计、热力图。

太麻烦了,再议再议。

Leche
强迫症,文字控,折腾爱好者