名もなき未知

エンジニアリングとか、日常とかそういうのをまとめる場所。

Hugo+Netlifyで静的ホスティングされたサイトをぱぱっと作れた

タイトルの通りのことを 【休日開催】土曜の昼からもくもく会【サポーターズ】 - サポーターズCoLab でやった。

仕事疲れで遅刻したので、2時間ほどしか本質的な作業はできていないが、その割には十分な結果が出せたと思う。

できたもの

https://teckup-tokyo.netlify.com/

ほぼデプロイしただけなので、中身のコンテンツは何も入れていない。

やったこと

NetlifyではじめるHugo - 日々、とんは語る。 で記載されているものをベースに作成。

私の場合はすでにリポジトリが存在している状態から始めたので、こんな感じでやったらいい感じに追加できた。

hugo new site _teckup-tokyo.github.io
mv _teckup-tokyo.github.io/* teckup-tokyo.github.io

次にテーマを https://themes.gohugo.io で探した。シンプルでスクロールできるものがいいなと思ったので、下記のテーマ(hugo-theme-cactus-plus)を選択した。

themes.gohugo.io

git submodule で管理できるようにする。

cd teckup-tokyo.github.io
git submodule add https://github.com/nodejh/hugo-theme-cactus-plus.git themes/hugo-theme-cactus-plus
cp ./themes/cactus-plus/exampleSite/config.toml .
# このあとサンプルとかもexampleSiteこぴったかも

で、config.toml の中を書き換える。私の環境ではこんな感じに書き換えていた。多分、もうちょい書き換えるべきところはあると思うが・・・。

[11/03 09:40:56] $ diff -u config.toml themes/hugo-theme-cactus-plus/exampleSite/config.toml             (git)-[master]
--- config.toml 2019-11-02 17:20:24.000000000 +0900
+++ themes/hugo-theme-cactus-plus/exampleSite/config.toml   2019-11-02 17:13:33.000000000 +0900
@@ -1,18 +1,18 @@
 # Site settings
-baseurl = "https://teckup-tokyo.netlify.com/"
+baseurl = "your_site_url_address"
 languageCode = "en"
-title = "TeckUp Tokyo"
+title = "site title"
 theme = "hugo-theme-cactus-plus"
 googleAnalytics = "your_google_analytics_id"
 # Set the value to true if your site include CJK (Chinese, Japanese, and Korean languages) characters
 hasCJKLanguage = false
 
 [params]
-   author = "TeckUp Tokyo"
+   author = "site_author"
    description = "Site Description"
    bio = "author biography"
 
-   twitter = "teckup_tokyo"
+   twitter = "your_twitter_id"
    facebook = "your_facebook_id"
 
    enableRSS = true
@@ -74,6 +74,6 @@
 
 # Add additional social link entries underneath
 [social]
-   facebook-square = ""
-   twitter-square = "https://www.twitter.com/teckup_tokyo"
-   github-square = "https://www.github.com/teckup-tokyo"
+   facebook-square = "https://www.facebook.com/nodejh"
+   twitter-square = "https://www.twitter.com/nodejh"
+   github-square = "https://www.github.com/nodejh"

ここまでやって、あとはこんな感じで確認。ローカル上は問題なかった。

hugo new posts/hello-world.md # 記事の追加
hugo server -D # デバッグ用サーバーの起動、私の環境では localhost:1313
hugo # publicフォルダへのビルド

で、諸々を GitHub に上げる。(netlifyのビルド対象になるブランチは適当に設定したほうがいいかもしれない、自分はとりあえずmaster直上げをしている)

あとは netlify 側で指定のリポジトリを選択してあげて、buildして待つだけ。(自動的にhugoでのビルドが選ばれていたので、多分フォルダの中身とか見て判断してるんだと思う)

で、それっぽいドメインに変えられたので、それっぽいドメインに変更してみて終わり。めっちゃ楽でした。

ハマったところとか

キャッシュの関係があるかもしれないが hugo server -D したときに見えていたファイルが、 netlify 上で見えない問題があった。というのも、 content/posts/hello-world.md とすべきところが、 content/post/hello-world.md となっていた( post ではなく、 posts が正しい)ため、記事が読み取れていないことが原因だった。

これはサンプルサイトを見ながら解決したが、もしかしたらテンプレートごとに違いとかあるのかな? とかも少し疑っている。なので、templateはgit submodule で足すだけじゃなくて、中身も参考にしましょうという気持ちになったのでした。

これからの展望とか

2つある。1つはHugoをもっと使いこなすこと。 https://gohugo.io/getting-started/quick-start/ とかよみつつ、学べばいいかなあと。

もう1つはサイトコンテンツを埋めること。。。。自分が関わっているコミュニティ用のやつなんですが、ここまでサボってきた背景があるので、これまでのイベントのまとめとか書いていく予定です。

追記

忘れてたのですが、サポーターズColabさんのもくもく会はしずかで集中しやすく、とても良かったです。下記はそこそこ自分にとってプラスだったこと。

  • 机がまあまあ広い
  • でかいホワイトボードが使える
    • ここに各自作業内容が書いてあるのもちょっと面白かった
  • 成果発表フェーズがあるので、知見の共有ができてとてもよい
  • 良い眺めなので、疲れたときに息抜きに外を眺めるととても良い気持ちになる
  • ジュース安め(ありがたい)

なので、サポーターズColabさんでもくもくあるときは、また行きたいなあとかぼんやり思っています。