JAMstackの記事とかみて、この辺気になったから試してみた。
- 参考リンク
- HugoTheme
NetlifyCMSのサイトからぽちぽち進めていくと、Githubのリポジトリと、Netlifyのサイト設定(ホスティングからデプロイまで)が自動で進んだ。
デフォルトだとコーヒー紹介サイトになってるので、ここをひな形に色々いじっていく。
まず、生成されたリポジトリはpublicなので、privateに変えておく。
githubのrepository -> settings -> Make this repository private
念の為、変更後はnetlify側のgit連携を再設定。
netlify site -> settings -> Itentity -> Git Gateway -> Edit settings\
次はテーマの切り替え。
Hugoの仕組みがわかっていなかったせいで、テーマの設定に手間取った。
結局ローカルにcloneして、ローカルで色々試すことにした。
git clone https://github.com/arianpg/*****.git
cd *****/site
hugo server
これでローカルサーバが立つので、localhost:1313を見つつ直接ファイル修正しながら、何がどう影響してるのかを探り探りチェック。
ポイントは、site/layouts を削除しないとconfig.tomlでテーマを指定してもうまく適用されない点。
あとNetlifyCMSとの連携のため、ヘッダにscriptタグの追加が必要とのこと。
今回のテーマだと、layouts/_default/baseof.html が修正対象。
これに対して入れた変更は下記の通り。
- NetlifyCMS Scriptタグ追加
- twitterウィジェットの配置
- Portrait表示のデザイン修正
ついでに、NetlifyCMSの設定ファイル site/static/admin/config.yml も適宜修正(タグの追加など)
git pushすると、Netlifyでデプロイされ、サイトに反映される。
あとはNetlifyのサイト画面から、カスタムドメイン設定とHTTPS対応を実施。
お名前comのネームサーバ設定をNetlify側に切り替え
切り替え後暫く後にLet’s Encryptの設定を有効に。
NetlifyCMSからの記事更新はログインがちょっと重いけど、その他は問題なし。
これでだいたいやりたいことがやれた感じ。