お世話になっております。
しゃまとんです。

これまで運用していたドメインshamaton.orz.hmからブログの引っ越しを行いました。
(しばらくはまだ生きているんですが)

新しいドメインは shamaton.dev です🎉

経緯としては、Wordpressの更新をするのを忘れていて、久しぶりに更新かけようかと思ったらできなくなったんですねｗ
あー、これはだるいやつや。。触りたくなさがMAXだったので引っ越してしまうことにしました。

どうするのがいいかなぁと悩んで最初は netlify + Hugo を使った静的サイトに移行しよかなと思いました。

ググっても、結構記事が出てきて移行しやすそうですよね。
ということで、まずはHugoの方をやっていきました。

Wordpress2Hugo

まずは、これまでの記事たちをHugoに適応させるところから。 この辺を参考にexportして、画像ファイルのディレクトリを変更しました。

🤔（netlifyのところは端折られている）

次はテーマを選びます。私は hello-friend-ng にしました。 自分のJS/CSSを入れれるようになっていて、ダークテーマにも勝手に対応してくれます。すてき。

(テーマはsubmodle管理がよさそう)

前のドメインでは、bootstrapを使っていてそれに合うような形にしていたので、JS（主に画像ポップアップ表示のところ）で一苦労したんですが functionsの機能を使って、lightboxをshortcode経由で呼べるようにしました。

ここからは記事が上手く表示されているかを地道に調整していきます… 記事があらかた整ったら、ビルドしてWebのどこかにもっていきます🚀🚀🚀

# build
hugo -t hello-friend-ng

Google Cloud Storage (GCS) にdeploy

netfilyを検討しましたが、運用上の制約が気になるところがあり今回はGCSを使ったホスティングをすることにしました。 ここに書いてる内容がとても役に立ちました。

一つだけすんなり行かなかったところとして、ロードバランサにIPを設定するところ。 先にIPを取得してから、ロードバランサ作成時につけようと思ったらつけられなくて謎だったので、結局ロードバランサ作成時にIPアドレスを作りました。 それ以外は読みすすめながら、Hello Worldまで行けると思います。

allUsesの設定方法（一般公開設定）はこの辺も参考になりそうです。

テストページが見れるようになったら後は hugo deploy をすることで反映できます。config.tomlにdeploymentの設定をしましょう。
今回はデプロイ対象は1つなのでnameは設定していません。

[deployment]
order = [".jpg$", ".gif$", ".png$"]

[[deployment.targets]]
URL = "gs://バケット名(例えばexample.com)"

hugo deployの実行にはgcloudコマンドが使える状態になっている必要があります。 これからという方はセットアップしておきましょう。

いざ実行の前に、ドライランして問題ないか確認してみましょう。 大丈夫なら、いざdeploy！

# dry run
hugo deploy --dryRun
# deploy
hugo deploy --confirm

実行したら、こんな感じで表示されます。

Deploying to target "" (gs://shamaton.dev)
Identified xx file(s) to upload, totaling x.x MB, and 0 file(s) to delete.
Continue? (Y/n) y
Success!

あとは取得したドメインにアクセスして表示されればOK！
もしCDN効かせてたら、ページが変わらないかもなのでアクセスしてないページ開いてみるとよいです！

以上です〜👋

余談 : netlify

結局、試してみて使うのをやめたのですが、設定としてはnetlify側でDNSの設定をするだけで大丈夫でした。 freenomを検討されている方はこちらが参考になります。

参考

lightbox導入

導入を試みたが、うまく動かなかった