目次
hugoを導入するにあたってのメモ
ブログを静的ジェネレータであるhugoを使って作成し、 Netlifyを使ってデプロイする。
環境
- Mac OS Big Sur
- home brew インストール済み
ローカルの作業
hugoのインストール
brew install hugo
hugoでプロジェクトの作成
hugoで任意の名前のプロジェクトを作成する。 今回は"quickstart"とした。
この名前はなんでもいい。
hugo new site quickstart
cd quickstart
git init
hugoのthemeの追加
今回はmainroadを選択した。 git submoduleを使うのは後でNetlifyで公開するため。 themeのによっては公式サイトの説明でgit cloneと書かれているが、その場合Netlifyでエラーが起きる。
cd themes
git submodule add https://github.com/vimux/mainroad
config.tomlの設定
各themeの公式サイトのsamplesiteの設定をコピペする。
必要な部分で設定を上書きする。
この部分はthemeによって大きく記述が異なるので、 サンプルをよく読むこと。
環境によってはコピペしてもエラーがでることもある。
その場合はあせらずに不必要っぽい部分を削除していく。
記事の作成
記事の名前を今回は"my-first-post.md"とした。
hugo server -D
hugo new post/my-first-post.md
追記
postディレクトリ以下に直接マークダウンファイルを置く他に、更に子ディレクトリを作成する方法もある。
この場合、画像を配置することができるため、画像の管理が便利になる。
hugo new post/my-second-post/index.md
publicの作成
hugoは以上の設定と記事を元にindex.htmlと関連するファイルを自動で生成する。
生成は以下のコマンドでいい。
hugo -D
追記
これはNetlifyを利用する場合には必要ない作業だ。
githubでレポジトリの作成
レポジトリの作成して、 ローカルのgitと紐付けする。
リモートレポジトリにpushする。
git pull
git push
netlifyでデプロイ
- アカウントの作成
- githubとの紐付け
- レポジトリの選択
- netlify.tomlの作成
- 公開
- お問い合わせformの作成
imgbotを使ってGitHub上の画像の自動圧縮
imgbotを利用することでpublicなレポジトリ上にある画像を自動で検出し、 圧縮した画像のプルリクが生成される。
サムネイルなど画像をブログ記事に利用するのであれば、 利用を検討していい。
ハマったところ
-
記事のdraft = true のままデプロイして、記事が公開されないという状態になった。 draft = false にしましょう。
-
マークダウンに直接htmlを記述してもパースされない問題。下記の設定をconfig.tomlに追記して回避する。
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true