EbiconサイトのSSG化をしてみたときの話(11ty+Netfily)

Netflixは入っていません、てんななです。3回目接種をしたもののまだ副反応がわからないタイミングで書きはじめ、一ヶ月以上寝かせてから続きを書いています。

#trpg_ebicon のサイトに使っているサーバーが来月でサービスを終了するので、置き換えが必要なんですが、WordPressを使いたくない〜〜ってえびがのたうち回ってる間に4月が来てサイトが消える可能性があります。よくある王国災害表なのでDon't Panicでお願いします。

— てんなな-poyo (@tennana_tef) February 28, 2022

3月は週4勤務にして浮いた時間を今のところだいたいこのプロジェクトに注いだ気がしますが(実作業3日弱ぐらい)、WordPressを使いたくなかったので後回しにしていたサイトリニューアルを行いました。

あんまり見た目で凝ったことはしていませんが、スマホとPCでちょっと見え方が違うとか、気を遣った感じにはなっているはずです。たぶん。

PC向け表示

スマホ向け表示

技術選定

WordPressを使いたくないのはわかりました。では何で作るのか？正直開設したてであれば手書きが一番早かったと考えられますが、Ebiconもそれなりに数が重なってきています。こういう時は、「そもそもどういうサイトなのか」を洗い出すのが定番であります。

• 更新頻度は半年ごとに数週間

  • コメントはほぼ使われなかったので受け付けない

  • 開催告知 => GMからの卓情報更新 => 懇親会情報更新 => 終了後に受付フォームを閉じる

• 開催告知、卓情報はほぼテンプレート

  • 実際WordPressでもコピペして書き換えてた

• 開催イベント -> 卓情報 のようなカテゴリ分けはしたい

• えび以外が更新できる必要はない

  • 最初期のEbiconはGMにアカウントを配っていたのですが、普通に使われませんでした。

• サイトデザインめんどくさい

以上のことから、たまーに決まった様式で更新されるサイトで、軽く分類ができればいいことがわかりました。小学生頃のえびならテンプレートHTMLをコピペして秀丸エディタで手直ししていくところですが、現代なのでStatic
Site Generatorで良さそうです。こういうテンプレートに従ったファイルから、テンプレートに従ったHTMLを生成してくれるものから、本格的にプログラミングしてもっと凝ったサイトをそのへんのレンタルサーバーにアップできる状態にしてくれるものまで機能に幅があります。

---
title: About Ebicon
description: 奈良県奈良市のTRPGコンベンション「Ebicon」とはなんぞや、が書かれています。
layout: layouts/post.njk
hideTagsList: true
eleventyNavigation:
  key: About
  order: 2
---

えびアイコンの思いつきから生まれた、個人運営の冒険企画局システムオンリーのTRPGコンベンションです。  
思いついていないので、理念らしきものはありませんが、だいたい春、秋に1回ずつ開催しており、奈良県民より関西外からの参加者が多い雰囲気をしていました。  
バーチャルは奈良県ではないため、近年の時勢柄、開催していません。

最新情報は本サイトの他、[Twitter:#trpg_ebicon](https://twitter.com/search?q=%23trpg_ebicon&f=live) で発信することがあります。

### 問い合わせ
ツイッターまたは、[Googleフォーム](https://docs.google.com/forms/d/1pj4e3OCwQTLCCirjpiQzjnRuWSdc1ZNc0h5eQ4WqNcQ) からお送り下さい。

### HQ メンバー
#### 代表:てんなな(<a href="https://twitter.com/tennana_tef">@tennana_tef</a>)
えびこんの"えび"。冒険企画局TRPG、特にシノビガミが好きで、忍者を殺す機会があると首を突っ込んでくる。電源のいるゲームもやる。

#### 副代表: メントスコーラ132(<a href="https://twitter.com/mentoscola132">@mentoscola132</a>)
えびではなく、紳士協定に違反したときのえびをしばき倒す側。うどんが主食でポテトがおやつ。最近はクトゥルフ神話TRPGにもちょっと足を入れているらしい。電源のいるゲームもやる。

この分野は、Gatsby、Hugoといった大御所が既に存在していて、それを使ったサイトデザインのテンプレートも配布されています。もろもろ探して気に入ったテンプレートが利用していたことと、要件より過大な高機能フレームワークを使うのが大嫌いなので、11tyを使うことに。

設置サーバーがなくなる、が最初の動機ですから、代わりのサーバーも決める必要がありました。昔から持ってるドメインにレンタルサーバーが付属はしていたのですが、生成 => 公開の設定を自分でやるのは面倒なので、NetlifyとGithubを接続してちょっとコマンド書いて終わり。

どうだったか

元々選んだテンプレートにはタグ機能の実装もあったので、それ込みで改造していったのですが、どこまできっちりテンプレート化するかの方針が作業中にぶれてそこそこ時間を使った気がします。基本のテンプレートがあって、第十三回の記事だけテンプレート中の特定項目を差し替える……みたいなことをしようとして、numjacksテンプレートでしかうまく動かなかったのが一番時間を食った。とりあえずテンプレートに文章を流し込みたいだけならかなり簡単だと思います。同じTRPGで言えば、リプレイサイトとか、自PCの紹介サイト(まれによく見る)あたりが向いてるでしょうか。最初の準備が終わったあとは、増えた時ファイル1個置いてGithubに上げるだけで更新できるサイトになります。11tyだと、Headless CMSと呼ばれるブログの記事投稿画面と記事管理だけあるようなサービスと連携することも簡単そうでしたが、そっちは試してません。

あとは、別に必要もないのにサイト高速化のためにいじったぐらいか。

Commits · tennana/ebiconhq-site

はっきり言ってWordPressを再設置するより時間はかかっていますが、触っておきたかった分野・サイトをいじくり倒せたので満足。