概要
さいきんHugoでM5Stack系の英語サイト(https://m5stack.lang-ship.com/)を作っていますが、PHPを使いたくなったので頑張って実現してみました。
はじめに
HugoはGo言語で書かれている静的サイトジェネレーターのため、PHPなどのプログラムを組み込むことを想定していません。基本的にはJavaScriptを使うぐらいな感じです。
検索をすると公式フォーラムで何件かひっかかるのですが、あまりきれいなやり方は存在しなかったようです。しかし、いろいろ考えたところきれいにHugoにPHPを組み込むことができました！
サンプルページ
上記が実際のページですが、HugoサイトにPHPが動いています。
原理
Hugoから生成された静的ページをPHPから読み込んで処理をしています。つまり、メニューなどの表示をするためのカラのページをHugoで準備して、そこにPHPで必要な情報を埋め込んでいます。
libraries.md（ベースとなるファイル）
---
title: "Arduino Libraries Search"
description: Arduino Libraries Search Tool
---
##BODY####BODY##とだけ書いたファイルを準備します。この##BODY##をPHPから置換して処理をします。重要なのはdescriptionを設定することです。これがないと本文以外に##BODY##が概要に出力されるので置換がおかしくなります。
libraries/index.php（プログラムファイル）
<?php
$file = file_get_contents("index.html");
$body = explode("##BODY##", $file);
echo $body[0];
echo "PHP Echo";
echo $body[1];同じフォルダにあるindex.htmlを読み込んで、##BODY##を置換しています。実際に置換してもいいのですが、echoで処理したかったので分割して前半と後半で出力しています。
libraries/.htaccess(static配下に設置)
DirectoryIndex index.php index.html
今回のキモとなるファイルです。indexファイルをhtmlからphpに変更しています。これでlibraries/にアクセスしてきた場合にindex.phpが読み込まれるようになります。
どーいうこと？
通常は上記のファイルが呼ばれるはずです。しかし.htaccessでphpの優先順位を上げたのでindex.phpが呼ばれます。そしてindex.phpではindex.htmlを読み込んで処理をしています。
まとめ
最終的に同じフォルダに.htaccessとindex.php、index.htmlが設置されるようにして、がんばって読み込み先を変更しました。内部リンクはすべて/で飛んできますのでこれでphpやその他スクリプトを組み込むことが可能です。
ページ自体はHugoに登録されていますので、サイトマップなどにもちゃんと反映されます。テンプレートなどにも手を入れないので比較的きれいに入れ込むことができたと思います。
コメント