Amazonのアソシエイトとして、ラズパイダ(raspida.com)は適格販売により収入を得ています。詳しくは当サイトの プライバシーポリシーをご覧ください。
先日から気になっているのがHUGO。静的サイトジェネレーターと言うらしいです。遅まきながら、静的サイトジェネレーターなる仕組みがあることを知ってから、しばらく情報を追っかけていました。
ラズパイをWebサーバのローカル環境に仕立てて、静的サイトジェネレーターとやらを試してみました。
ちょうどWordpressが動いているローカルサーバでサクっと試してみたら少しハマったので、サーバと同居させている方は少しだけ参考になればと思います。
静的サイトジェネレーターは昔のホームページライク？
サイトを運営していると共感していただけるのですが、Wordpressを使っていると各種プラグインソフト、各種テーマファイルにとても左右されます。
一番厄介なのは、プラグインの脆弱性を突いたセキュリティリスクが挙げられます。いや、不具合（バグ）の方が厄介かな。中には1年以上も更新されていないプラグインソフトもあるので仕方ありません。
そもそも現在のWebサイトやブログは、Wordpressが世界で圧倒的に多いため狙われやすくなっています。ちょうどWindowsのOSと同じような立場になっているから避けようがありません。
それもあり静的サイトジェネレーターが注目されているのだろうなと思います。ここのところはよく目にするようになりました。
WordPressはデータベース（DB）で管理している動的な仕組みです。HUGOのような静的サイトジェネレーターは、ちょうど昔のホームページに近い状態です。サーバに置いたファイルを表示するみたいな。しかしながら、昔みたいにHTMLタグやJavaScriptをチマチマ書くのではなく、ローカルでジェネレートしてアップ（デプロイっていうの？）してくれます。
実際にはHTMLを読み込むことになりますから、シンプルな古のホームページと同じ印象です。
すると、Wordpressのような外部からのアタック攻撃を受けることがほぼ無くなります。なにせログインページなんかもありませんから、やるとしたらサーバをハックしないとならないでしょう。（厳密には.jsなどはあるが）
記述はMarkdown方式
HUGOに代表される静的サイトジェネレーターは、Markdown方式で記述していきます。これ、好き嫌いは別にしてもWordpressほどリッチな環境がなくても記事にできるというのはシンプルかつスマートだと思いました。WordpressもMarkdownの記述ができるから、その点は同じですがログインするような管理画面が要らないってのはシンプルです。
Obsidianにハマっている身としては、Markdownで書ければ慣れてきたので楽な気分です。Wordpressのエディタもテーマによってはとても合理的に記述できるのですが、いかんせん管理が煩雑になりがちです。特に記事数が多くなると、画面遷移だけでとても時間が取られます。
一方で、HUGOは動的ではないため、後からアレコレと表現させたい時、プラグインソフトではなく自分でチマチマとカスタマイズしていく必要が出てきます。この辺は動的ではない故に面倒な点でもあります。画像1つとってもWordpressに慣れていると面倒な作業に感じるかも知れません。
逆にあまりリッチなコンテンツにしなければ最低限の機能は最初から備わっています。
テーマの変更を始め、TwitterカードやYouTubeの挿入、サイトマップの生成やテーマによってはブログカードなども対応しています。
そして静的なサイトですから読込が速い！ そりゃそうだ。速いと言ってもホスティングしているサーバに依るでしょう。一説によると、爆速の阿部寛さんのホームページよりは遅いらしい？！
Markdown方式とシンプルな点やカスタマイズの楽しみなど、エンジニアさんにウケるのはよく理解できます。
RレッドラズパイでHUGO
HUGO自体はmacOS、Windows、Linux、FreeBSDなどで動作します。もちろんラズパイでもOKです。とはいえ、サイトを作る・更新するわけですから、ラズパイよりもメインマシンで作業したいところではあります。
サイトの作成をラズパイでやるより、ホスティング先とした方が理に適っているかも知れません。ラズパイはデスクトップPCライクに使うにはやはりちょっと心許ないです。
仮にラズパイ1台のローカル環境だけで完結させたいなら、別の記事に書いたようなLAMP環境へHUGOもインストールして、テスト環境で思いっきりイジるのはどうでしょう。
そうか、Apacheのルートを変えてあげればいいのか。と、ネットを検索して分かりました。
zzzmisa’s blog
HUGOサイトをMacのローカル環境に置いてLAN内から確認 - zzzmisa’s blog HUGOで作ったサイトを、Macのローカル環境に立てたWebサーバに置いて、同一LAN内の端末から確認します。 サイトを公開する前に、スマホな
LAMP環境ネタはこちら
Raspberry Pi 3A+をWi-Fiルーター化させWordPressデモ機としても使う
WordPressをラズパイのLAMP環境へインストールする
ジェネレートした後はどこに公開？
HUGOなどの静的サイトジェネレーターは、ローカル環境で構成されたサイトを、ルールに基づいて静的なHTMLに変換してから公開先にアップするイメージです。
主にGithub pagesやAWSなどに書き出すパターンが有名です。（デプロイって言うの？）Github pagesも無料プランからプライベートで持てるようになりましたから、一定の制限内であれば気軽に試せます。HUGO＋Github pagesがスタンダードな印象です。
GithubにID登録してあれば直ぐにサイトを公開できます。あまりアクセス数が多いと課金されますが、サイトを立ち上げてもすぐに誰かがアクセスしてくれるわけではありませんから、試すにはそこまで心配する必要はないでしょう。
サーバを借りなくてもWebサイトを公開できる
他にもレンタルホスティングサーバにFTPでデプロイ（アップロード？）する方法もあります。
WordPressはどうしてもサーバにインストールしないとなりません。今ではXserverなどではボタン1つでインストールできる時代です。これも心配する必要はありません。とはいえ、DBと連携しなくてはならないので、エンジニアさんでないなら少し特殊な世界に感じてしまうことでしょう。
これが静的なサイト、つまりHTML群であればシンプルで理解しやすいのが静的サイトジェネレーターの利点です。
なんとなくDreamweaverなどのオーサリングソフトに近いのかなと思っています。（ハズしていたらすみません）Dreamweaverもタグ打ちでしたが便利な機能が満載で、ボタン1つでFTPでアップロードしたり、リアルタイムプレビューで編集していましたからね。
RレッドHUGOのインストール
HUGOは多くのOSで動作します。Debian系であるRaspberry Pi OSでもaptパッケージがあります。しかし、自動更新に対応していないうえ、古いバージョンなので注意が必要です。
どうやらsnapパッケージが良いらしいのです。過去、Raspberry Pi OSではsnapがうまく動かない場合がありましたから、ラズパイでは信用しておらずしばらく使っていませんでした。
久しぶりにsnapを試してみました。どうかなー？
環境はRaspberry Pi OS lite 64bitで、Raspberry Pi 3A+です。
sudo apt update
sudo apt install snapd
sudo reboot
sudo snap install core
sudo snap install hugo
aptパッケージからsnapdをインストール後、どうやら snap coreをインストールする必要があります。このとき、coreのバージョンは、core 16-2.57.6でした。
それからHUGOをsnapからインストールします。snapなら、拡張版のStableです。hugo (extended/stable) 0.108.0と出ました。ちょうど更新された直後の最新版です。
お？！ ラズパイでもsnapからインストールしてもコケなかった。なんらエラーは出ませんでした。いいねー。
ということで、執筆時点ではラズパイでもsnap版がよろしいかと思います。
Raspberry PiでHUGO
- aptパッケージ
- Raspberry Pi OSでsnap
- Ubuntu系OSでsnapパッケージ
公式サイトのインストールページ
Installation Install Hugo on macOS, Linux, Windows, BSD, and on any machine that can run the Go compiler tool chain.
■Pi 5は8GBモデルがオススメ
HUGOコマンド
まだそれほど細かく調べていないので分かりませんが、取りあえず新規でサイトを作成して、テーマファイルも設定してみました。
hugo new site raspida2
Congratulations! Your new Hugo site is created in /home/wp/raspida2.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
ホームディレクトリ直下で実行したので、~/raspida2内が新規サイトになります。
新しい投稿も下書き状態（ドラフト）で作成します。
hugo new post/hugoを始めました！.md
以下のようにデフォルトでこれだけ最初に入っています。これはテンプレートの設定によって変更できます。
---
title: "Hugoを始めました！"
date: 2022-12-10T23:44:04+09:00
categories:
- category
- subcategory
tags:
- tag1
- tag2
keywords:
- tech
#thumbnailImage: //example.com/image.jpg
---
早速表示してみるのに、通常だとhugo server -Dの後、WEBブラウザにhttp://localhost:1313/で表示できます。（デスクトップGUIがあるOS）
最初にconfig.tomlの編集が必要です。
仮想サーバでプレビューを表示するコマンドです。だからアクセスするのに独自の1313ポート指定します。
hugo server -D
同一LAN内の他のPCから閲覧するには、bindオプションが必要になります。
hugo server --bind=ラズパイのIPアドレス
どうやらデフォルトではlocalhostからしかListenしないみたいです。だから指定してあげます。
http://localhost:1313/ (bind address ラズパイのIPアドレス)
ソースファイル指定
デフォルトだとHUGOのコマンドって作成したサイトのフォルダでなければ実行できません。オプション-sのソースファイル指定で可能です。
面倒なので、.bashrcに記載した方が便利です。
最下行に追記します。
alias hugo-myblog='hugo -s ~/raspida2'
で、適用させる。
source ~/.bashrc
これで設定したエイリアスのhugo-myblogコマンドでソース指定ができているため、どのディレクトリに居ても実行可能になります。
エイリアス名は任意で決定してください。
hugo-myblog server -D
方法その1：サーバのドキュメントルートを変更
今回は以前にWordpressのために作ったサーバで動作させたいので、以下のようにベースURLをRaspberry Pi 3A+のローカルIPアドレスにして、作成するフォルダをlocal_siteとして別フォルダにジェネレートしました。
hugo -b http://192.168.xxx.xxx/ -d local_site -t テーマ名
ラズパイにWebサーバを構築していないなら、この項目は関係ありません。
自前のWebサーバで動かすのに、1つ目の方法として、この出力した別フォルダlocal_siteに対してApacheのドキュメントルートを変更します。
HUGOで出力したパスは仮に/home/wp/raspida2/local_site/とします。
変更したのは3つのファイル群です。apache2.confとsites-availableにある000-default.confとdefault-ssl.confを編集しました。
<Directory /home/wp/raspida2/local_site/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>
#DocumentRoot /var/www/html
DocumentRoot /home/wp/raspida2/local_site
- default-ssl.confも上記同様にドキュメントルート先を変更（sslの設定がないなら必要無し）
サービスの再起動
sudo systemctl restart apache2.service
最初のディレクティブは追加記述しました。ちょうどコメントアウトされている/sev/の箇所を変更すれば簡単です。
これで基本を許可させて、sites-availableにある2つのファイルに記述されているドキュメントルート場所を変更しました。
これで先程生成したlocal_siteをドキュメントルートにすることができました。
この状態でRaspberry Pi 3A+のIPアドレスを同ネットワーク内の別PCからWebブラウザで叩けば表示されます。
/var/wwwにジェネレートできない
ラズパイにWebサーバを構築していないなら、この項目は関係ありません。
今回の環境では、先程のHUGOコマンドでlocal_siteではなく、サーバのドキュメント置き場である/var/www/html以下のフォルダにすればサーバの設定はそのままで表示できると思ったのですが書き込めませんでした。
/var/www以下に書き出すには権限がないわけです。
hugo自身も/var/lib/以下のモジュールを使います。/var/lib/snapd がOther権限で実行されています。
試しに/var/www以下のドキュメントを配置する所有権をユーザー名：www-dataとし、www-dataグループにユーザーを所属させても権限が無くエラーです。権限775でもダメでした。
方法2：生成したファイルをコピーしてもいい
ローカルの表示はバインドしたHUGOで確認するとして、同じラズパイ内のApacheを外部サーバと同等して考えれば、そこにファイルがあれば良いわけです。
先程のようにapache2のconfファイルは変更せず、HUGOで出力したフォルダの中身をコピーするのは簡単です。但し、毎度コピーしないとなりませんから、差分でコピーできるようにスクリプト経由が望ましい。
この場合もhugo serverではなく、通常のhugoコマンで生成してからコピーします。通常の生成をすると、publicフォルダに出力されます。
hugo -t テーマファイル名
cp -r ~/raspida2/public/. /var/www/html/raspida2/
同ラズパイ内でApacheサーバが動いていれば、これでも表示できますね。
この時、書き込みエラーでコピーできない場合、/var/www以下の所有権をユーザー（例ではwp）とグループwww-dataに付与します。
書き込み権限は755で良いでしょう。
sudo chown -R raspiのユーザー名:www-data /var/www
sudo chmod 755 /var/www
分けなくてもPublicフォルダをドキュメントルートにすればいい？
なぜ分けてあるかというと、仮にGithub pagesなどで実際に公開したい場合に、ローカルで試したいことと実際に更新＆公開するのを分けるためです。
面倒ですけど、テーマを変えたり設定をイジったりと別々に作業できるのかなと思います。
Rレッドテーマファイルは結構ある
テーマの数はWordpressに比べて少ないので、はじめから機能が付いている（設定されている）テーマを選びたい。少しだけカスタマイズしていくのが楽になります。
新しいサイトを作ったフォルダ以下に、config.tomlファイルがあり、そこに記述していくことになります。
sudo nano ~/raspida2/config.toml
こんな感じです。
baseURL = 'http://192.168.0.3/' 今回はApacheでテストしたのでローカルのIPアドレスです。
languageCode = 'ja'
title = 'My New Hugo Site'
theme = 'テーマ名'
[author]
name = "名前"
bio = "自己紹介"
job = "職業"
location = "Japan"
# Your Gravatar email. Overwrite `author.picture` everywhere in the blog
gravatarEmail = "hoge@example.com"
公開するようにはしていませんが、実際にはbaseURLに独自ドメインとかGithub pagesなどのURLから始まり、各セクション毎に細かく設定できるようになっています。
各テーマの詳細情報から設定していくことになりますね。
config.tomlでbaseURLを指定することで、先程のコマンドを省略できます。
今回は最終的にエイリアスも設定したので、次のコマンドで生成しました。Apacheのルートドキュメントも変更してあるため、baseURLで指定したラズパイのIPアドレスを、同ネットワーク内にある別PCのWebブラウザでアクセスできます。
hugo-myblog -d local_site -t テーマ名
ApacheとHUGOを同居させていて、別のPCから閲覧する場合のコマンドです。
HUGOはイイかも？
HUGOについて、ちょっとまだ情報が飲み込めていないかも知れません。初めてなのでこんな感じです。
一応、HUGOとGithub pages(Private）の関係と、Netlify（静的ウェブサイトのためのホスティングサービス）との連携パターン、そしてレンタルホスティングサーバとの連携などを知りました。設定方法もチマチマ感はありますが好みです。
個人的にやりたいことは、ホスティングサーバと連携させたサイト・ブログ作成ですね。それに脱Wordpressは面白そうだから、もっと深く知りたいですね。
静的サイトジェネレーターはHUGOだけではありません。比較的に日本語の情報サイトが多いのかな？という印象で、中でも人気があるみたいです。
単純な話、Wordpressって記事を作成するのは簡単でも、管理運営はある意味で大変です。
動的な分だけ、後から変更するのは適しています。プラグインの導入で拡張できるため、人気ランキングやキーワードで絞り込んで一覧にしたり、特定のページだけPHPで分岐させたり、プログラム的なことに触れなくてもそれなりに出来てしまう利点があります。
仮にシンプルな構成でやりたいなら、Wordpressの機能をほとんど使わないで済んでしまいますから、そういった場合は静的サイトジェネレーターの方に分があるかなと思いました。
どうもWordpressの使い方が昔に比べて敷居が低くなるほど、余計に手間がかかるようになってしまっているように感じるのは私だけでしょうか。プラグインソフトは便利なんだけど、作者それぞれだから、管理インターフェイスも統一していないし、正直な話、使いにくいプラグインもあります。Wordpressのテーマも同様。
今後のトレンドがどうなるか分かりませんが、これだけWebサイトやブログが多くなった今、静的サイトジェネレーターへの移行も進むのではないかと考えています。このraspida.comは流石に記事数が多くなりすぎて、脱WordpressからHUGOの移行は修正しないと丸ごとは無理なので躊躇してしまいますが、HUGOなどは知っていても無駄にならないかなと感じました。
今後もしばらくラズパイのローカル環境でイジって、情報も追っかけてみたいと思います。
以上、静的サイトジェネレーターの1つ、HUGOでした。
参考になったサイト
HUGOサイトをMacのローカル環境に置いてLAN内から確認 - zzzmisa’s blog