サイトリニューアル

はじめに

サイトをリニューアルした。

以前、WordPressでサイトをリニューアルしたが、管理やカスタマイズの点で扱いづらかったり、面倒だったり、ということがあり(単に私の勉強不足なだけかもしれないが…)、今回さらにリニューアルを行なった。

今回、サイトの構築に使用したのは Hugo。静的サイトジェネレータと呼ばれるものである。記事を Markdown でさくっと書きたいというのと、一部のページだけカスタマイズしたりするのに都合が良いように思えたからだ。

CSS フレームワークは Bulma を採用。以前知った CSS フレームワークなのだが、JavaScript を含まないので、そのあたりは自分で必要最小限のものを実装すれば軽くなるかな？と思ったから。

各所の装飾に使用するグラフィックは unDraw を使用。写真などが必要になったら Unsplash を使用しようかと思っている。

フォントには Noto Sans JP を採用した。

アイコンには Goole の Material Icon を使用することにした。 Font Awesome の方がメジャーなのかもしれないが、Noto Sans JP を入れたときについでに。

CSS フレームワークの Bulma はアイコンも特に特定のものに依存はしていないので、 Material Icon でも問題はなさそう、

Hugo ではテーマを設定することができるが、このサイトではテーマを設定していない。なので、レイアウト用のファイルを一から作成した。

記事を書く上で図形が必要になることもあると思った。 Markdown のコードブロックで図形を mermaid で描ければ便利だなと思った。

Hugo は既定では mermaid をサポートしていないが、下記 URL に mermaid への対応方法が書かれていたので、それを参考にして実装した。

一部 bulma のクラスとかぶってしまっていた箇所があったので、css で対応。

(サンプル)

graph LR A(Start) --> B A --> C B --> D(End) C --> D

数式も書けたら便利だなと思い、下記 URL を参考にそのまま実装。ブロックでもインラインでも対応しているようだ。

(サンプル)

二次方程式 $ax^2+bx+c=0$ の解 $x$ は、

$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

以下の内容を参考に、というかそのままリンク部分を修正。外部サイトは別タブで開くようになったはず。

(サンプル)

Blog - これは同じタブで表示される。

Google - こちらは別タブで表示されるはず。

今度はすぐリニューアルすることがないように、じっかりと運用していきたいと思う。

有用な情報が発信できるようにしていければ良いな、と思う。

Categories: Website Note

Archives: 2023-09