重い腰を上げてBioサイトを作った

投稿日：: 2023/04/06

ここ何年かの間、自分のSNSとかのリンクを集約したり、経歴を書き連ねたりするWebページが増えてきていると思います。例えばHugoを使ったものはモダンで、学生や若い人とかに人気だと思います。流行から結構経っているので、もう廃れてるかもしれませんが…ｗ（Hugoメンテするのだるいと思うし…ｗ

こういう系のサービスは最近だとLinktreeをよく見ますし、リッチでモダンなサービスとしてBentoなんてのも見かけますね。Hugoはセルフホストタイプですが、これらのサービスはホスティングのノウハウや環境構築が不要なのはメリットでしょう。

Bentoは一応私も使ったことがあるのですが、感触がイマイチと言うか、当時はまだプレリリース段階で見た目がモダンなリンク集を作るので精一杯な感じがあったのと、独自ドメインの割当がだるかったので継続利用には至りませんでした。（サービス機能してはなかったのでCNAME当ててCDNなどのリバースプロキシから当ててやる必要があったと思います

かつて私もHugoのAcademicを利用してサイトを作っていたのですが、レイアウトのカスタマイズが面倒なのと、コンテンツをYAMLで書く必要があって書きづらかったり、極めつけはHugoに破壊的変更があった時の対応が果てしなく面倒でメンテが億劫になり、手放した記憶があります。

そしてしばらくはlycolia.infoは使わずにblog.lycolia.infoだけを使っていました。これもさくらのレンタルサーバーからはてなブログに移ったり、note.lycolia.infoとか言うのをGitHub Pagesに生やしたり、消したり、またblog.lycolia.infoをさくらのレンタルサーバーに戻したりと、紆余曲折ありました。

そして月日が経ち、そろそろlycolia.infoも活かしたいなということで今回は頑張らないBioサイトとして作ろうと思い立ちました。まずは重い腰を上げられるように小さく始めて、気が向いたら肉付けしてリッチにしていこうという方針で始めることにしました。どのくらい頑張らないサイトにしたかというと、以下の画像くらい頑張りませんでした。驚くほどシンプル。数分で作れます。何一つ頑張りませんでした。

当時のコードがこれですが、わずか24行しかありません。JSもCSSもなく、純粋にプレーンな静的HTMLファイルです。流石にここまでシンプルなのは今時中々ないと思いますね。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>lycolia.info</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <h1>lycolia.info</h1>
  <ul>
    <li><a rel="me" href="https://blog.lycolia.info">Blog</a></li>
    <li><a rel="me" href="https://github.com/Lycolia">GitHub</a></li>
    <li><a rel="me" href="https://gist.github.com/Lycolia">Gist</a></li>
    <li><a rel="me" href="https://www.last.fm/user/Lycolia">last.fm</a></li>
    <li><a rel="me" href="https://mstdn.hyogo.jp/@lycolia">兵庫丼</a></li>
    <li><a rel="me" href="https://misskey.systems/@Lycolia">みすてむ</a></li>
    <li><a rel="me" href="https://www.npmjs.com/~lycolia">npm</a></li>
    <li><a rel="me" href="https://twitter.com/Lycolia">Twitter</a></li>
    <li><a rel="me" href="https://www.tumblr.com/bonbolium">Tumblr</a></li>
  </ul>
  <p>© 2002 - 2023 Lycolia Rizzim All rights reserved.</p>
</body>
</html>

しかし余りにもシンプルすぎるのでもう少しリッチにしようと18時間後にはこうなりました。最初と比べる結構リッチな感じになったと思います。コードも157行に達し丁度6倍まで膨らみました。長すぎるのでもうここにコードは書けないですｗ表示内容は依然としてプレーンな静的HTMLファイルのままではありますが、SSRとかではないので表示は早いと思います。JSはないですが、CSSは入るようになりました。また、懐かしのアクセスカウンターも導入しました。カウント値は過去に設置していたときのものを継承しています。

このサイトはOGを設置したり、A11yに配慮したり、Font Awesome入れたり、Font Awesomeにないブランドロゴはライセンスに配慮しつつ導入したり、そこそこ良い作りになるように意識しています。一旦記憶にある限りの自分のアカウントはリンクしたので、ソーシャルリンクとしては機能するようになったと思います。気が向いたらBiography的なやつも書いていきたいですね。このブログの自己紹介欄すらまともに書けてませんが（

実際に作ってみると色々感じることがありました。例えばそのうちの一つは、かつてはこうやってHTMLを手打ちしてWebページ、いやホームページを作っていたなという懐かしさです。このサイトは初代サイトから移転数を基準で考えると8代目になるのですが、随分遠くに来たものだと思いました。今やHTMLを手打ちするような機会はほぼないです。本業はWeb制作（フロントエンドエンジニア）ですが、仕事でもTSXしか書いてないですし、それすら書かない日のことが多いです。他にもWebArchiveで歴代のサイトを眺めていて、こんな時代があったなとか、昔の自分はこんなちゃんとした文章を書けていたんだなとか、かつてはホームページ運営を通じてこれほどまでにネッ友がいたんだなとか。本当に色々な思いがこみ上げてきました。またあの時代が戻ってきたらいいなとか思うのですが、過ぎ去った時代が戻って来ることはないので、そのあたりは諦めるしかないでしょうね。ただまぁ、こういうので感傷に浸るのも偶には悪くないものです。こないだも浸ってた気がしますが…ｗ

何年も前からHTMLの手打ちは非効率で面倒だとCMSを好んで使っていましたが、偶にはこうやって手でHTMLを書くのもいいものだなとしみじみしました。

また、カウンターを設置する際に久々にPerlのCGIを導入したのですが、久々すぎて意外なところでハマりました。CGIそのものは往年のKENT-WEBさんのものを利用させて頂いているのですが、こちらのPerlコードは改行コードがCRLFなんですね。CRLFで動くのか？と思いながら設置したら謎の500エラーが頻発、パーミッションに原因があるのかと直してみるも収まらず、結果としてレンタルサーバーのエラーログに以下のエラーがあり、改行コードの問題であることが解り、事なきを得ました。

AH01215: suexec policy violation: see suexec log for more details

さくらのレンタルサーバーのエラーログ閲覧画面、管理画面からでなくともSSHからログファイルを見ることもできる

これは昔だとFFFTPとかが勝手にLFに変換していてくれたので起きていなかったようなのですが、今時そんな事する人も多くないと思うのでSSHでアップロードしたり、wgetしたものを直接編集したりしてしまい、発覚が難しいかなと思います。もしまた引っかかることが無いようにGitHubに改行コードをLFにして、ついでに文字コードもSJISからUTF8に変えて更にねこみみカウンターを載せたものを置いておいたので、興味がある人は持っていってください。本家の使用許諾を読む限り多分ライセンス的にはセーフなはず…。

https://github.com/Lycolia/Magick-Nekomimi-Counter/tree/main

しかしカウンタープログラムのソースコードをまともに読むのは今回が初めてでしたが、とてつもなくシンプルな実装で驚きました。まぁ考えてみればCGI叩かれたらカウントアップするだけですもんね…。とは言え、画像を埋め込みHTMLの中に吐き出すのは知識がないと難しいですし、当時としては大変だったと思います。ImageMagickの神がかり的な使いやすさにも驚きました。GDだったらこんなものじゃ済まなかった気がします…ｗなんか画像の矩形サイズ指定や透過色指定が必要で、汎用的に作ろうとすると面倒だった記憶が…（随分前のことなので記憶があやふやですが…

という訳で長々と語ってしまいましたが、最後に今回作ったBioサイトを紹介して終わりにしたいと思います。サイトというかLPなのでページですが…ｗ

https://lycolia.info/

しかし、フッターにある開設日時の表記が感慨深いです。このブログにも日までは書いてあるのですが、過去に時分まで書いていたことを思い出しWebArchiveからサルベージしてきました。開設当初の記載なので限りなく正確な情報です。秒までは記録がなかったので0秒としておきました。

This site since from 2002-07-03T23:21:00+09:00.

Lycolog

お知らせ

重い腰を上げてBioサイトを作った