WWW

SSG hugoってなに

By hkaji 07 October 2021 Update 07 October 2021
SSG hugoってなに

今日は

SSG(Static Site Generation)を使って、blogページを作ってみます。

経緯

組込みや3Dプリンターなどマニアックなネタをまとめたblogを続けていますが、evernoteやnotionに下書きしてbloggerにコピーして画像貼り付けという流れでやってました。流行りのCMSへの移行を検討しWordPressやghostを試しましたが、DBを構築しないといけないのとJSで書かれた本体のメンテが面倒な感じです。何かいい方法はないかと探っていたらSSGというの見つけました。markdownで記事を書いたのをgeneratorがhtmlに変換してくれます。VScodeで作業すると、gitでファイルの管理もできます。GitHub pageを使えばそのままblogページなるようで、よさそうです。

準備

構成

win10+wsl2(debian)を使います。win10ではVScodeを使って編集等を行い、hugoをwsl2で動いているdebianにインストールしました。VScodeの拡張機能「remote WSL」を使うとwin10上でdebianファイルを簡単に操作できます。

まずは、hugoをインストール。

1
2
3

kaji@DESKTOP-DBHI6DO:~/hugo$ hugo version
hugo v0.88.1-5BC54738 linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio
kaji@DESKTOP-DBHI6DO:~/hugo$

hugoの設定など

関連ページを参考に、config.tomlを設定すると基本設定は終わりです。

ページの見た目を変更するために、themeを追加します。参考リンクのをそのまま使おうかと思いましたが設定が多いので、簡単そうな「liva hugo」にしました。

ページ作成一連の流れ

ページの作成方法は、関連リンクなどにたくさん紹介されています。ざっくりまとめるとこのような感じです。5項以降のhost先は、お好みのところへ。

  1. win10上のVScodeからページをmarkdownで書く
  2. markdownファイルに画像リンクを入れる
  3. debian上でhugo
  4. publicというフォルダーにhtml,css等が作成される
  5. GitHubの該当レポシトリにpublicをまとめてgit push
  6. https://(username).github.ioにて公開

使ってみた感想

これまでbloggerを使ってました。WordPressやghostも検討しましたが、hugo+GitHub pageに乗り換えた印象です。あくまでも個人的な直感です。まだ使って1か月も経ちませんが。GUI,markupなど皆さんそれぞれにお好みがありますので。

  • メリット
    • RDB,CMSの管理から開放される
    • httpsの証明書期限を気にしなくても良い
    • 手順をスクリプト化すると、ページの中身に時間を使える
  • デメリット
    • 最初の一連の構築と手順慣れが必要
    • コメント等の動的ページは別途サービスをリンクする必要がある

まとめ

マニアックネタblogをbloggerからhugo+GitHubへの移行についてまとめました。まだまだ、細かい点の修正終わってませんが、追々進めていきたいと思います。

参考リンク

Releases · gohugoio/hugo

コピペで作れるHugoでイケてるブログを作る方法 - Qiita

comments powered by Disqus