Hugo+Netlifyでサクッとブログ開設した話
技術ログを残したかったので、サクッとできるブログがないかなーと思ってたらこの構成に行き当たりました。 ポートフォリオをも兼ねれそうなので結構良さげ。少し触ってみたいと思います。
■ 参考にしたサイト
https://blog.tomoya.dev/2019/01/hugo-with-netlify/
■ 選んだテーマ
https://themes.gohugo.io/hugo-tranquilpeak-theme/
■ 手順
1. 初期セットアップ(Hugo & Git)
$ brew install hugo
$ hugo new site yagablog
$ cd yagablog
$ git init
$ git add .
$ git commit -m 'Initial commmit'
2. theme選定
$ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/tranquilpeak/
$ git commit -m 'Add tranquilpeak theme'
$ cp ./themes/tranquilpeak/exampleSite/config.toml ./config.toml
$ git add config.toml
$ git commit -m 'Update config'
→ この状態で、同じ見た目のサイトになっているはず。
テーマ選定は公式サイトから色々選べます。
導入手順は各テーマのGit見れば書いてありますが、基本的には自分のプロジェクトcloneしてきて/exampleSiteを真似して作成してけば良いかなという印象でした。
theme自体に手を入れたい場合は、folkしてきてやる方が良いみたいです。
3. ブログ追加
$ hugo new post/my-first-post.md
$ git commit -m 'Add initial post'
$ hugo server -D
追加した.mdファイルを編集すれば記事は作成できます。 記事のテンプレートについては、/exampleSite/content/post/にありましたので、そちらを参考に記載出来ました。
4. ページ(=カテゴリー毎のブログ一覧ページ)追加
$ hugo new page/contact.md
→ tags/xxxxxのページが作成される
基本的には、postにタグつけていく方針になるかと思います。 記事が増え、タグも増えて、各グルーピングできるようになった段階でpageは作成する感じがいいかなと思います。
5. Netlifyで公開する
- NetlifyでGithubで対象リポジトリを選択
- ドメインの設定(カスタムドメイン/割り当てられたURLをconfig.tomlのbaseURLに反映)
6. カスタムドメインを設定する
6-1. ドメインを買う@お名前ドットコム
6-2. ドメインを設定する@Netlify
↓ネームサーバーをメモ
6-3. ネームサーバーを変更する@お名前ドットコム
↓ここに、先ほど取得したネームサーバーを設定
6-4. ドメインで接続してみる
ちょっと時間を置いてから http://[ドメイン] に接続すれば見れるようになる、はず。
7. HTTPS化
↓グルグルが回って一定時間経過後…..
オッケー見れました。
■ リンク
-
- 細かい設定も書いてあったりで参考にさせて頂きました。