Hugo

Blueskyの投稿をHugoで表示するためのショートコードが紹介されていた。A simple Hugo shortcode for embedding Bluesky posts | BryceWray.com。テストしてみる。

うまくいった。とても便利。

Hugoのアップデートにかかわる修正、とりあえず、ここのサイトだけ完了。本体サイトもチェックしないといけない。

うーん……。別サイトでちょっと厄介なことになった。Hugoのアップデートの影響なのかな。よくわからないが、かなり無理やり対応しないといけない。困るが、仕方ない。

HugoのThemeを少し試しているのだが、そのまま使えることがなくて、結局、自分でいろいろ改造。基本的なところで気になってしまい、時間がかかってしまう。まあ、割り切ればよいのだろうけど。

なるほど。間違って理解していたことがわかった。これでうまくいきそう。

HugoのContent adapters、少しうまくいかないような……。もうちょっと研究しないとわからないな。

Content adapters、ちょっと理解が不十分だったので修正した。とはいえ、すごい機能だなと思う。アイデア次第でいろんなことができるんじゃないかな。

元データのJSONファイルのなかでMarkdown形式で記す方法がよくわからなかったが、VS Codeの言語モードでMarkdownを選択すればよいことがわかった。これで正しいのかどうかはよくわからないけれど……😅

Hugoの新しい機能、Content adaptersをテストしてみる。

うまくできたようだ。これは、なかなかすごいな。

通常のブログ形式なら、コンテンツは個別のMarkdownファイルで書いていけばよいと思うが、ここのサイトみたいにマイクロブログないしミニブログ形式なら、個別のファイルをつくらずに、JSONファイルひとつにどんどん書き足していくのが簡単かもしれない。数が増えたときの構築時間も短縮されるようだし。

ただ、レイアウトを少し特殊な処理にしているので、そのための手間はかかるか。と思ったら、自分の理解不足だった。いや、すごい機能。

下はショートコード埋め込みのテスト。

• 『ヨーロッパの出現』
• 樺山 紘一
• 講談社
• 2024年04月11日頃
• ISBN: 9784065349885
• 講談社学術文庫

森と石、都市と農村が展いた後発のヨーロッパ文明は、どのようにして世界史の領導者になったのか。戦争・飢餓・疫病、ルネサンス・宗教改革・大航海を経てきたその歴史に、建設と改新、破壊と停滞のリズムを読み取り、歴史を動かす事件を追う。西洋史の泰斗が、古代から近代に至るまで、文明を一つのシステムとして通観する格好のヨーロッパ入門！

ヨーロッパの出現 — 楽天ブックス

とはいえ、どうもいまいちのような……。ちょっと経緯をメモしてみる。

はじめ、先の投稿のようにツイートを投稿内に埋め込もうと思ったのだが、twitter上で埋め込みコードを表示させてそれをコピーするのは手間なのでもっと簡単にできないかと調べたところ、Hugoのデフォルトのショートコードに対応するものがあることがわかった。

とはいえ、そのショートコードを書くには、当該のツイートのユーザー名とidを確認して記入する必要がある。これを一つひとつコピペするのはこれまた手間なので、ブックマークレットを使いクリックひとつでショートコードを作成できるよう、あれこれ調べてなんとかやってみた。コードがよくわかっていないので、なかなか苦労。

で、うまく機能するブックマークレットができ、あわせてツイートの表示もCSSをいじって少し調整してみたわけだが……。うーん、どうもなあ、もうちょっと工夫できないかな😕という感じ。シンプルにリンクを貼るだけでよいような気がしなくもない。まあ、しばらく運用してみて、また考えよう。

Hugo、あらためてほんとにすごい柔軟なシステム。いかにようにも組み上げられる。できることが多くて、よくわからない機能がたくさん。公式ドキュメントをちゃんと読み込みたいが、なかなか。

かなり時間が空きましたが、この間に、サイトで使用しているHugoのテーマを変更しました。今回、導入したのは、ドキュメントサイト用のBookです。

読書メモのドキュメントだけでなく、日誌のセクションも内部に組み込んだこともあり、かなりいろいろ手を入れました。一応、整ったかなと思えたので、公開しました。

以前のサイトでは、日誌以外にもリンク集のセクションを別途つくっていましたが、今後は、それらも日誌のなかに組み込むつもりです。単独のセクションにする必要ないかなと思いました。日誌それ自体、本当にたまにしか更新していませんでしたので、ブックマーク的なメモも日誌に入れるのでちょうどよいくらいです。

サイトの外面はできましたが、中身もつくっていきたいところ。とはいえ、この春から忙しくて更新できなかったのですが、まだしばらく、たぶんあと2か月くらいは同じ状態が続くかな。ぼちぼち進められたらと思っています。🙂

先日の「いいねボタン」に加えて、コメント・システムを組み込んでみました。記事の最下部に置いています。

Hugoは単体ではコメント・システムを用意できないため、何か他のシステムを導入する必要があります。少し調べたところ、Disqusのサービスを用いた例がありました。ただ、外部サービスに依存するのはできれば避けたいところ。

さらに調べて、サーバーにインストールするかたちのコメント・システムが見つかりました。HashOverというPHPのプログラムです。PHPはこのサイトで使っているレンタルサーバーでも大丈夫。

Hugoへの組み込みにあたっては、以下のウェブサイトを参考にしました。難しいかと思ったのですが、やってみると比較的簡単に設置できました。

• Integrate Hashover 2.0 comments in Hugo websites - tekki-tipps.de
• Using Hashover commenting system for Hugo static websites

記事によってコメント欄を設置するかどうか決められた方がよい気がしたので、各ページのフロントマター(Front Matter)に独自のパラメーターを追加し、それをもとにthemeの記述を調整しました。新規に記事を作成するとき、フロントマターでコメント欄の設置を決めることができます。あと、なんとなくページのデザインをすっきりさせたかったので、コメント欄はクリックして開くようにしてみました。

HashOver、かなり多機能。まだ全体像がよくわかっていないのですが、おいおい理解できたらと思います。

自分自身、ブログなどを閲覧してコメントを書き込むことはあまりないですし、少しハードルが高い気もします。とりあえず試行的に様子をみていこうかと思っています。😉

各記事に「いいねボタン」を付けてみました。ページ下部の右側に表示されます。ボタンをクリックすると色が変わり「総いいね数」がカウントされます。

「いいねボタン」、なんとなくあったらいいなと思い、Hugoでの「いいねボタン」を検索してみたのですが、あまり情報がない印象。Facebookの機能を組み込むものが見つかったのですが、なるべく外部サービスを使わずに実現したくて、いろいろ調べてみました。サーバー設置型プログラムで見つかったもののなかにはデータベースが前提のものもあったのですが、少し検討してみて、データベースなしのプログラムを試すことにしました。

今回、使わせてもらったのは、いいねボタン・改です。PHPのプログラムで、データベースを使用せず、思った以上に簡単に設置できました。自サイトは、ごく普通のレンタルサーバーに開設しているので、PHPは問題なし。HugoというとGitHubなどの利用がよく説明されていますが、自分は他の用途でもすでにレンタルサーバーを使っているので、Hugoでのサイト運営にもそのまま活用しています。PHPが使えることで、結果的にいろいろやれることが増えた気がしないでもありません（まあ、よくわかっていないのですが……😅）。

それはともかく、いいねボタン・改です。設置マニュアルに従って作業をしたのですが、Hugoに導入するにあたって、若干、工夫してみました。

まず、プログラムのファイル一式は、Hugoでの管理とは別に、FTPソフトを使ってサーバーに置きました。Hugoの内部でもstaticフォルダのなかに入れればそのまま構築できるのかもしれませんが、それなりのファイル数があるので、少し不安がありました。また、サーバーに設置した「いいねボタン・改」の内部にデータのファイルがつくられるようだったので、そうすると、Hugo内での管理とバッティングするのではないかと考えました。

もう一つ、「いいねボタン・改」のコードのdata-iinename=““に「いいねボタン」の名前を記入する必要があります。この名前が同じだと、同じ「いいねボタン」と判断され、ページが異なっていてもカウント数が共有されます。つまり、各ページ、異なる名前を割り振る必要があるわけです。

これをどうやってHugoで実現するかです。一つの考え方としては、各ページのフロントマター(Front Matter)に独自のパラメーターを追加して、そこに他と重ならない名前をそのつど書く方法があると思いました。ただ、これはこれで、毎回考えないといけないのは少し面倒。

そこでごく単純に各ページの日付（date）をそのまま流用することにしました。また、ほぼないとは思いますが、同じ日付に2つの記事を投稿する可能性もあるといえばあるので、年月日に加えて時間も入れてみました。これでとりあえず各ページに固有の「いいねボタン」の名前が構築されるようになりました。

あとは、「いいねボタン」のコードをテーマのlayouts、partialsに独自のファイルとしてつくり、それをsingle.htmlで読み込むようにしました。また、single.htmlとはいっても、「いいねボタン」を表示するのはpostsのなかの記事だけですので、そのあたりは{{if }}のコードで指定しました。この点は、「いいねボタン・改」の他の、ページヘッドに書き込むコードなど同じようにしてみました。

とりあえずうまくいったかなと思います。自分でも試してみて、一応、動作していることが確認できました。

自サイトは本当にウェブの辺境も辺境ですし、ほとんど誰にも見られていない気もしますが、でもまあ、よかったら「いいね」をお願いいたします。😊

またまた、サイトを再構築しました。今回は、Hugoというシステムを活用しています。「静的サイトジェネレーター」と言われるようです。

これまでに使っていたWordPressもDokuwikiも、CMSとしてはサーバーにシステム一式を設置し、ブラウザ上で管理画面にログインしてウェブページを作成公開するやり方です。これに対し、Hugoは手元のパソコンにシステム一式をインストールし、手元のパソコンでウェブサイトのファイルすべてをつくります。そのうえで、htmlファイルやcssファイルなどをサーバーにアップロードするという流れになります。これまでとはまったく異なるやり方です。

もともとは、Dokuwikiのなかで作成していたこの日誌をサイト本体から独立させたいなと思ったところからスタートしました。サイト本来の読書メモと日誌とで内容がいまいち合致していない印象があり、また読書メモと日誌とでDokuwkiでのタグの扱いなどに少し困った点もありました。そこで、他に使えるシステムはないかなといろいろ調べてみたのです。前提として、WordPressのようにデータベースを使わずに、もっと手軽に更新できるものがいいなと考えました。かなりいろいろなCMSを試してみました。データベースを必要としないフラットファイルCMSと呼ばれるものを幾つか試したのですが、どうもうまくいきません。まあ「帯に短し襷に長し」なんです。

そんなかで出合ったのがHugo。かなり以前にも一度少しだけさわってみたことがあったのですが、そのときは従来型のCMSと違いすぎて難しいなという印象でした。今回はもう少し真面目にいじってみて、これがとても使えることに気が付きました。自分もまだ全体がわかっているわけではありませんが、でも、非常に柔軟というか、かなり自由にウェブサイトをつくれることがわかりました。これだったら日誌だけでなくサイト本体を丸ごとHugoで構築できるなと考え、突貫工事で作業した次第です。

もちろん、弱点はあります。サーバーにアップロードされるのは基本的にhtmlファイル等だけですので、閲覧者との間での動的なやりとりは難しいです。たとえばコメントシステムもメールフォームもHugo単体では用意できません。WordPressやDokuwikiだったら当たり前に出来ていたことが出来ないわけです。でも、そのあたりは、外部のウェブサービスを活用したり、その他いろいろ工夫すれば何とかなるところもあります。Hugoは日本語での利用者もけっこう多いようで、ネットで検索してみると、いろいろなノウハウやTipsが見つかります。今回のリニューアルでも多くのサイトを参考にさせてもらいました。感謝です。

まだいろいろ細かい点の調整が必要かなと思うのですが、今後はHugoでサイト運営を進めます。Hugo、かなり気に入っていますので、さすがにもうリニューアルとかリビルドとかはないでしょう（本当か？）。ともあれ、のんびり自由に楽しんでやっていけたらと思っています。