Hugo で ブログ を始める
無料で広告を貼り付けられるブログサイトを始めたい
現時点である程度 PC に詳しい人が広告を貼り付けられるブログを無料(or 低価格)で始めるにはどうしたらいいのか、を検討しました。
Mac ユーザー向けの内容ですが、Windows などでも基本は同じです。
無料で広告を貼り付けられるブログサイトを始めたい
と、欲望丸出しで考えた場合、どういう選択肢があるのかを考えた結果、Hugo+GitHubPages(+独自ドメイン) というのが一番自分に合っていました。
- Hugo は、Markdown で記事を書くと色々な用途の静的な HTML やリソースに変換してくれるツールです。
- GitHub Pages は、GitHub が提供する無料で使える静的な Web コンテンツ配信サービスです(私にとって)。
- GitHub のアカウントが必要です（無料で作れます）。
https://<username>.github.io/というドメインでアクセスできるようになります(<username>は取得したアカウント名が入ります)。
要するに、この２つだけあれば、比較的簡単にそういう Web サイトを作ることができるわけです。
ブログサービスを利用しなかった理由
始めるのは一番簡単ですが、10~20 年後にまだ残っているかという観点で見ると不明であり、そのときにせっかく書いたコンテンツを抽出するのも面倒そうです。 今までも、何度かメジャーな投稿系サービスが閉鎖になっていったことを考えると、ちょっと嫌だな…と思いました。
独自ドメインにした理由
https://<username>.github.io/ というドメイン名でも基本的には問題ないのですが、
まー万が一、GitHub Pages が閉鎖になった場合、せっかくそのドメインに集客できていたのに（皮算用…）ちょっと嫌だな…と。
また、年間 1000~2000 円くらいで独自ドメインは維持できるので、それくらいは問題ないかなと。映画館に 1 回行ったと思えばね。
Hugo で GitHub Pages にコンテンツを公開するまで
基本的には HUGO と GitHub(Actions/Pages)で爆速ブログ作成 の記事がとても参考になりました。 上記の手順で Hugo で GitHub Pages にコンテンツを公開するまで行うことができます。
もしくは Hugo の公式ドキュメントの Host On GitHub も参考になります。
独自ドメインを設定する
ドメインを取得する
あまり深く考えずに、お名前.com でこのドメインを取得しました。 ここは基本的に何でも良いですが、お名前.com で特に大きな問題もなく取得できました。
ちょっと注意が必要なのは、Top ページで紹介されているドメインの料金は「1 年目」のものであり、2 年目以降一気に値段が上がるものもあります。 料金プラン などで自分に合った値段のドメインをまず探してから申し込むようにしましょう。
私が取得した .info ドメインは 現時点で 1 年目目 280 円/年, 2 年目以降 1628 円/年 でした。
あとは 「Whois 代行」サービス(300~400 円/年)には申し込みました。 これ申し込まないと、自分の名前とか住所が whois で公開されるっぽい（試してはいない）ので、まあ必要かな、、、と。
SSL とかは、GitHub Pages の方で無料でワンクリックで設定してくれますので、とりあえずは不要です。
名前を決めて、DNS レコードを追加する
GitHub Pages で my-first-step.info より www.my-first-step.info とか blog.my-first-step.info にしなさい、と強く推奨していたので従うことに。****.my-first-step.info の **** 部分の名前を決める必要があります。Blog サイトなので素直に blog にしました。
次に、お名前.com の DNS の設定で blog.my-first-step.info という名前を CNAME で mokemokechicken.github.io にしておきます。
ここは管理画面で何度も迷子になったので、ちょっとキャプチャを貼っておきます。
Top ページから、
Topページ
ドメインを選択して、
ドメインを選択
設定を選び、
DNSレコード設定を利用する
CNAME を設定する
CNAMEを設定する
あとは、確認して更新すれば OK です。
HTTPS を有効にする
次に、GitHub のページに行き、①Settings → ②Pages と進み、③ Custom Domain に blog.my-first-step.info を入れて 「Save」を押します。
DNS の情報が妙に Cache されていたりして、すぐには OK にならない（私はそうだった）ことがありますが、
次の日くらいにはその辺も直るので、気長に待ちます。
確認できると、④ の Enforce HTTPS をクリックできるようになるので、クリックします。
これで晴れて https でアクセスできるようになります。
HTTPSを有効にする
GitHub Actions で反映している場合は
どうも GitHub Pages の リポジトリの TOP ディレクトリに CNAME という名前のファイルに blog.my-first-step.info と書いておく必要があるようです。
これがないと、先程行った Custom Domain の設定が消えてしまいます。
CNAMEファイルが無いと設定が消えてしまう
最終的にそうなっていれば良いのですが、例えば、GitHub Actions でデプロイしている場合、
以下のように cname: blog.my-first-step.info を付けておくと自動的のそのファイルを作ってくれます（逆に無いと消してしまいます）。
# …略
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: github.ref == 'refs/heads/main'
with:
deploy_key: ${{ secrets.SSH_KEY }}
external_repository: mokemokechicken/blog
publish_dir: ./public
cname: blog.my-first-step.info
多言語対応にする
広告を貼り付けたいという邪な心で始めたブログですので、全世界の英語圏の人たちにもぜひアクセスして欲しいものです。 最近は DeepL のような優秀な翻訳サービスもありますし、英語が得意でなくても多少読めるコンテンツを作ることは不可能ではありません。
Hugo は簡単に多言語対応することができます。 詳細は Multilingual Mode にありますが、概要を書き残しておきます。
config.toml に 対応する言語を追加
日本語と英語以外は全く理解できないので、その 2 ヶ国語に対応するとします。
デフォルトの言語(defaultContentLanguage)を何にしようかと思いましたが、英語にするほど強気にはなれず、日本語にしておきます。
その場合例えば、以下のように書きます。
defaultContentLanguage = "ja"
defaultContentLanguageInSubdir = true
[languages]
[languages.ja]
title = 'My First Step'
languageName = "Japanese"
weight = 10
[languages.en]
title = 'My First Step'
languageName = "English"
weight = 20
defaultContentLanguageInSubdir は Top ページの URL が、
falseにするとhttps://blog.my-first-step.info/になるtrueにするとhttps://blog.my-first-step.info/ja/になる
というものです。
weight は何か優先順位のようなものらしいです。小さい方が優先されるらしいです(weight なら逆なんじゃぁ…w)。
ファイル名をちょっと変えて、それぞれの言語対応のコンテンツを作る
あとは、
- 日本語用:
index.ja.md - 英語用:
index.en.md
というようにファイル名に言語コードを入れるとそれぞれ表示されるようになります。
異なる言語ページへのリンクの表示
mainroad という Theme だと、以下の部分に translations を追加すると、
[Params]
post_meta = ["date", "categories", "translations"] # Order of post meta information
以下のようにリンクが表示されるようになります。
ちなみに index.ja.md があって、 index.en.md がない場合は表示されません。賢い。
