最近、突然自分のブログを立ち上げようと思いつきました。インターネット上には高速なワンクリック ソリューションがたくさんありますが、それらは私の美学に合いません。一連の検討を行った結果、Hugo を使用して Web サイトを構築することにしました。インターネット上にはチュートリアルやディスカッションがたくさんあるので、解決できない奇妙なバグについて心配する必要はありません。さらに、Hugo は静的な Web サイトを生成するため、つまりバックエンドがないため、その展開方法もより柔軟になります。
フレームワークを選択したら、どのようなブログ Web サイトを作成するかを考える必要があります。幸いなことに、Hugo は 他の人のテーマ を直接適用できるため、エレガントなブログ Web サイトを構築するのがはるかに簡単になり、ほとんどのテーマにはオンライン デモが含まれており、じっくり見ることができます。たくさんあるテーマの中で、私が一番目に楽しいと思ったBlowfishを選びました。
次に、参考のために構築プロセスをステップごとに記録します。
開発環境の準備 #
私は主にWSL2で開発しており、OSはUbuntuです。
- 必要なツールをインストールします
sudo apt install snapd git - go
sudo snap install go --classic - hugo
sudo snap install hugo --classic
ブログをカスタム #
初期設定 #
まず、好きな名前でサイトを生成します。
hugo new site my-blog
関連ファイルを編集します 注: 事前に vscode を設定し、WSL プラグインをインストールする必要があります
code ./my-blog
この時点で、現在のパスはmy-blog/になっているはずです。それから：
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish
デフォルトの構成ファイルをコピーします。
cp -r themes/blowfish/config/_default config/_default
Web サイトをローカルで実行する：
hugo server
WSL2 vscode にはポートフォワーディングが付属しているため、Windows では http://localhost:1313 にアクセスするだけで済みます。ほとんどの変更は保存後、リアルタイムで Web サイトに反映されます。
さらなるカスタマイズ #
这部分请根据Blowfish的官方文档(点击查看)以及自己的喜好进行调整。Hugo のドキュメントを参照して設定を行う必要がある場合があります。
Blowfish のバージョンを更新 #
git submodule update --remote --merge
Static Files #
ターミナルがhugo serverを実行している場合は、Ctrl+Cを入力して終了します。この時点で、最新の静的 Web サイト ファイルはpublicフォルダー内にあります。hugo --minifyを使用して最適な Web サイト ファイルを生成することもできます。
機能を追加 #
コメント - giscus #
笔者最先尝试的是Disqus，但是没玩明白，评论区总是显示无法加载，即便是实际部署环境。随后，笔者将目光转向giscus。步骤如下：
- 开启用于存放评论的GitHub仓库的Discussions功能。这里我直接使用的是本博客的仓库。
- 根据giscus的步骤，得到一个
script标签。 - 将该标签内容写入
layouts/partials/comments.html。若没有文件夹可自行创建。
打开博文，发现底部出现评论区，配置成功。
閲覧数など - firestore #
该功能需要使用Google的Firebase。如想使用，请确保您具有可用的Google Cloud账户。官方文档说明的比较详细，可直接参考这里。
唯一需要说明的是，也是笔者踩的坑，就是在Firestore的规则页面，需要更新为官方文档所提供的规则，并发布。该规则和默认规则并不完全相同，默认规则是拒绝所有读写请求，而官方规则是接受request.auth != null的所有读写请求。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
同时，params.toml中所需要的键值都可以在项目概览->该Web应用名称->设置中找到。将其对应填入params.toml中即可。