GitHub Pages と Hugo で運用していた個人サイトを Netlify CMS に移行した

Netlify CMS が良さげという話を同僚から聞いたので、GitHub Pages で公開していた個人サイトと Hugo で構築していたブログをすべてまとめて Netlify CMS に移行したので手順などを書いておきます。

今回移行したサイトはこちらです。
https://shirokuro331.me/

ちなみに shirokuro331 は昔飼っていた猫の名前に数字を組み合わせたものです

Netlify CMS に期待したこと（移行した理由）

移行前に課題として感じていたことは

• 個人サイト( shirokuro331.github.io )とブログ ( shirokuro331.netlify.com ) でドメインが分かれていたので1つにしたかった
• Hugo だと記事の追加・更新のたびに git コマンド打つ必要があって少し面倒だった（git 操作が苦手というわけではなく記事追加のために git 使う必要性を感じていない）

などがありました。
これらを解決できれば良いなと思っていたところ、 Netlify CMS のことを知って少し触ってみた結果移行することにしました。

Netlify CMS セットアップからローカルでのデザイン変更までの流れ

手順のメモです。

• Netlify CMSのサイトで GET STARTED ボタンを押す
  

• 遷移先のページで、今回構築するサイトで使うテンプレートを選択します
  

• その後は画面の手順に沿って進めていけば netlify にサイトが出来上がり、GitHub にリポジトリが出来上がっています（netlify と GitHub のアカウントが必要です）
  

• デフォルトのデザインを変更したいので、GitHub からコードを clone します
  

• terminal.app で clone したディレクトリに移動して、yarn か npm install を入力する

• その後 yarn start か npm start を入力すればローカル環境が立ち上って http://localhost:3000/ が見れるようになるのでデザイン・機能の改修を行なうことができます。デザインの変更は site/layouts 内のファイルを編集して行ないました。
  

• ローカルでの作業が終わったら GitHub に push すれば、作業内容がサイトに反映されて完成です

移行した所感

結論、今のところ困ってることはありません。

Netlify CMS のセットアップは全然手間ではなかったですし、デザイン改修も比較的容易に行なうことができました。無料でビルド・デプロイ・ホスティングができて、独自ドメイン設定も楽な netlify でブログが作れるのはとても魅力的に感じています。

期待していたことのひとつである記事更新用の管理画面は markdown が使えますし、プレビューしながら記事書けるので効率良く作業することができます。

調べきれてはいないですが、インポートの仕組みが無いかもなので大量に記事があるサイトからの移行はもしかしたら困難かもしれません。

総じて良い感じです。
ブログで記事増やせるよう頑張りたいと思います。