初めの一歩#

久々に、Webサイトを弄ってみることにした。

ブランクがかなり空いていて、浦島太郎状態。

とりあえず、手探りでいろいろ試してみようと思う。

以前は確か Apache 2 を自分で入れたサーバーにHTML直接入力でサイトを作ったりしていたけど……、今はクラウド全盛の時代。昔よりも手軽に、いろいろなことができるようになっている。

hugo を使ってみる#

hugo というフレームワークが静的サイトを作成するのに良さそうだったので、これを使って Tiny なサイトを作ってみよう。

Mac で brew を使っていれば、

brew install hugo

するだけでインストールは完了。

hugo new site kackun.com

でスケルトンを作成。

新しい記事は、

hugo new posts/hello-world.md

のような形で作ったファイルに Markdown を書いていけば良い。

とりあえず、テーマは軽量という話の Terminal(https://themes.gohugo.io/themes/hugo-theme-terminal/) を使わせてもらおう。

いくつかテーマを取得する方法はあるが、ここでは git submodule を利用してみる。

git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal

設定ファイル hugo.toml をとりあえず設定

baseURL = 'https://kackun.com/'
languageCode = 'ja'
title = 'KACKUN.com'
theme = 'terminal'

ここまで来れば、

hugo server -D

で http://localhost:1313/ で確認ができる。

公開してみる#

Cloudflare Pages を使うと手軽にサイトを公開できて、しかも HTTP/3 に対応しているとのことで使ってみる。

https://dash.cloudflare.com/ から Workers & Pages に入り、「アプリケーションを作成する」を押す。その後、画面下にある「Looking to deploy Pages? Get started 」へ。自分のリポジトリーを設定した後は、ビルドの設定を次のように指定。

  • ビルドコマンド: hugo --gc --minify （当初はオプション -b $CF_PAGES_URL をつけていたが、これだと Cloudfront Pages のURLになってしまい不都合なので余計な指定だった）
  • 環境変数： HUGO_VERSION=0.152.2

特に hugo はビルド結果がバージョンに左右されるので、指定しておいた方が無難とのこと。

とりあえず、こんな感じで。 どうだろうか。