はてなブログからブログを移植しようとしている。 せっかくなので、今回の移植についてまとめておこうと思う。
それらは何？ #
Cloudflare #
CDNに強みを持つクラウドサービス。 静的なサイトを構築できるサービス"Cloudflare Pages"をもつ。 無料枠の利用範囲が非常に充実しているが、サイトのHTMLソースは別途用意する必要がある。
Hugo #
ブログ形式の静的なサイトを構築するテンプレート。 Markdownをもとにしてサイトのソースを簡単に作成できる。 そのままWebサーバとして動かせる機能をもつ。
なぜCloudflare×Hugoなのか #
基本的に無料 #
Cloudflare Pagesの無料枠は、20,000ファイルまでのサイトを作成できる。 回線の帯域やデプロイ時間（サイトの重さ）等に多少の制限はあるが、 文章メインのサイトとしてはほとんど不便がなさそう。
ドメインが素敵 #
無料でサイトを作成しようと思うと、独自ドメインの取得はなるべくやりたくないものだ。 かといって一般的なブログサービスを使うと、 例えば “○○.hatenablog.com” のように、プラットフォーム名が 長々とついてしまい、自分のサイトじゃないように感じてしまう。 しかし、Cloudflare Pagesのドメインは “pages.dev” である。独自ドメインを取得 しなくとも、サブドメインで “○○.pages.dev” にサイトを構えることができる。 このドメインなら、見劣りしない。
サイト構築の手順 #
準備 #
Cloudflare公式サイトで、アカウントを作成しておく。
また、HUGOの公式サイト（下記）から、ブログのテーマを選択してダウンロードする。 https://themes.gohugo.io/
Hugoを使ってローカルで検証 #
下記のコマンドでHugoをインストールする。
npm install hugo
次に、ルートディレクトリにしたい場所（D:\app\hugo\など）に移動し、 サイトを作成する。 （“my-blog"には任意の名称を入れる）
cd D:\app\hugo
hugo new site my-blog
作成したら、作成されたディレクトリに移動して、 試しに投稿を追加してみる。 （“my-post"には任意の名称を入れる）
cd my-blog
hugo new posts/my-post
作成された記事ファイル（my-blog\content\posts\my-post.md）に記事内容をMarkdownで記載していく。
書けたら、サイトの見え方をローカルで確認するため、下記コマンドを実行する。 これにより、localhost:1313 でサイトが実行されるので、ブラウザなどで確認することができる。
hugo server -D
ちなみに、"-D"はドラフト記事も含めて表示するという意味である。
wranglerコマンドで公開 #
Wranglerとは、Cloudflare公式のCLIツールだ。 公式サイトのGUI上からサイトをアップすることもできるのだが、 コマンドでできるほうが更新が速くできるため、今回はこっちを使用する。
下記のコマンドを実行することでインストールできる。
npm install wrangler
インストールしたら、下記のコマンドでサイトを公開できる。
wrangler pages deploy public --project-name ブログ名