序章自語り：出先でも書ける環境を構築完了

このサイトを立ち上げて1-2か月、GitHubにMarkDownをアップロードすることによって勝手に記事ができる仕組みを作ることができました。

ちょっとめんどかったですが、これで電車の中でも記事を書けます。

何を隠そう、実はデロンギMDHの野球ニュース風記事は出先の地下鉄内で書いたものです。

画像があまり上げられず文字ばかりになってしまいましたが、そこは追々手を加えるとして、先にガーっと文章だけ書いてアップロードしました。

さて、この記事ではこのサイトの「ある仕組み」について語ろうと思っています。

Webサイト作るのがめんどいと前々から思っていた

これまではAWSだったりレンタルサーバー等でWordPressを使ってWebサイトを構築していたのですが、セキュリティ面だとか高速化だとか、いろいろ面倒な部分がありました。

特にWordPressだと、あまり知識のないまま高速化しようとしてプラグインマシマシで逆に遅くなるとかいうのはチャメシ・インシデントでした。

プラグインマシマシ以外の解決方法だと、設定ファイルの書き換えとWebサイトを動かすエンジン自体の再起動の繰り返しという高度な知識と地味な作業の永遠リピートでした。

そこでnoteやはてなブログなんかに記事を上げていたのですが、**「月1000円ほどの課金しないと独自ドメインが使えない」「収益化が自由にできない」**など、かなりの制約がありました。

そんな中でぼんやり思っていたんです。

「もうちょっと軽くて話が早くて、独自ドメイン使えて、収益化もできて、セキュリティ的にも問題なくて・・・Markdownとかで文章書けたらいいなー」 と、都合の良すぎる解決策を。

そこで解決策をAIチャットに聞いてみたら、「SSR」だの「SSG」だのと、カードのレアリティみたいな字面だけど、なかなかよさそうなものが解説されているサイトを発見しました。

2つ書いてありますが1個は割愛して、個人的に 「ブログサイト＋αで固定サイト」 という方式をとりたかったので、それに最適だといわれる 「SSG」 をとりました。

SSGとは？

SSGは 「静的サイトジェネレーター（Static Site Generator）」 の略称で、自分もあまり意味は掴めていないのですが、

「あらかじめ作ってあるやつを呼び出して高速化する」 仕組みっぽいです。

これまでのWebサイトとの違い

巷で溢れてるWebサイトの多くは、アクセスするたびにページの構成要素をサーバーから読み込んでいるものが多いです。

建物とか製造に例えると、Webサイトを構成する資材をいちいち運んできて、現場（ユーザーのPCやスマホなど）で組み立てているということです。

非常にオーソドックスなものですが、この形式の問題点は、ろくに対策をしないと 「体感で遅く感じる」 ことです。

いくら回線が早くなっても、その分コンテンツはリッチに、そして重くなっていきます。

更に提供元のサーバーの速度やユーザーに届くまでの経路に左右されるため、どっかで貧弱なルートを辿ると、いくら10Gbpsの光回線でもタルくなります。 まあ自分10Gbpsは見送ったんですが。

それを解決するために、CloudflareなどのCDN（コンテンツ配信ネットワーク、読んで字のごとし）を経由したり、ユーザーがキャッシュを持つより先にサーバー上に最初からキャッシュを形成して高速化を図る等、様々な工夫が図られるのですが・・・

正直めんどくさいです。 メインの記事を書くまでにたどり着く工数が多すぎて挫折することもしばしばありました。

SSGの利点

対してSSGでは、読み込むものをあらかじめ決めて組み立ててあります。

言わばこちらは、「プレハブの建屋を丸ごと運んでくる」 とか、「完成品をそのまま運んでくる」 感じですね。

例えば車や家なんかを注文したとして、それが整備済みの完成品としてそのまま家に届くイメージです。

なんかのゲームで「組みあがった住宅をヘリで丸ごと運ぶ」みたいなのありましたが、そんな感じです。

なので、とにかく速い。

この仕組みを使えば、阿部寛のホームページ並みの速さのサイトを誰でも作れるわけです。

そう考えると、あのページ一体ナニモンよ。

SSGのデメリット①：速報性に弱い

メリットだらけかと思われますが、当然デメリットもあります。

この記事はAIツール「Perplexity」に聞き込みをしながら書いているのですが、その中でも個人的にデメリットに感じる部分がありました。

自分にはあまり関係のない項目ですが、ニュースサイトや速報系のサイトと相性がメッチャ悪いです。

例えばYahooニュースみたいなサイトをSSGで作るとかかなり厳しいです。

先述の通り、SSGは 「完成品を運んでくる」 タイプなのですが、完成品は前もって組み立てなければいけません。

つまり、例えば自分のこのサイトの場合だと、

大まかな工程として、 「Markdownファイルを新規作成→日付データを入れる→本文を書く→ 組み立てる →公開」 という工程を経ています。

超高速で表示させるために前もって「組み立てる」という手順が必要で、これだけで十数秒はかかります。

この「組み立て」の工程のおかげで、前もってページを作っておいてそこから追記する野球の「一球速報」みたいなのでもちょっと遅くなります。

つまり、速報性に欠けるものは相性がよろしくないんです。

デメリットが関係ない人①

もちろん、このデメリット、関係ない人も大勢います。

例えば一例を挙げるなら、

• 小説やルポ・エッセイなど、ある程度練り上げて書く文章
• 自分のような、新製品などではない速報性不要なレビュー記事
• わざわざXとかインスタのSNSに上げるほどでもないほどのお気持ち

速報性の高いものを扱うのであれば、おそらくWordPressなどのCMSを使用するか、SNSや動画・ライブ配信などの適した媒体はいくらでもあります。

SSGのデメリット②：最初のセットアップが意外とめんどくさい

これが案外始めるのにハードル高いかもしれません。

自分は知識ゼロのままAIに聞きながらやったのですが、たまに間違ったこと教えられるせいでえらい目に遭いました。

クラウドサービス（FirebaseやAzureなど）のログインや設定、それに応じた設定ファイルのチューニング 等々…

それらが噛み合わないとエラー吐いてページが表示されないことがあります。

特に 「大文字・小文字の区別に厳しい」 という細かすぎてブチギレ必至の罠とか、発覚した時は頭抱えました。

なんとか乗り越えられればいいんですが、そこで折れちゃう人もいそうです。

次はデメリットではなく、個人的な反省点なんですが一応書いておきます。

個人的反省：Markdownが存外めんどいし自由度低い

正直、Markdownはあまり文章書くにはおすすめしたくないかな、というのが本音です。

画像を貼るにも一苦労、リンクの埋め込みもなんかできない（HTML通してるはずなのに・・・）、あとルールが多すぎる。

ルール一部紹介

実はDiscordでも使えるMarkdown記法なのですが、案外ルールが厳しいです。

それを一部紹介します。

見出しは前後に空白行を入れる（MD022）

NG例

1文章
2### 見出し
3文章

OK例

1文章
2
3### 見出し
4
5文章

これ案外忘れがちです。

見出しの末尾に句読点やピリオドはNG（MD026）

##### これがダメな例です。

HTML使用NG(MD033)

自分が使っている環境だとHTML使用可能になって、それで書いてある記事が一個だけありますが、基本ダメみたいです。

何が正解かいちいち調べてられない人へ

PC（Win/Mac/Linuxなんでもござれ）で無料で使用できる、「Visual Studio Code」 に、 「Markdown lint」 という拡張機能があります。

これはMarkdown記法のお作法を教えてくれるんですが・・・

自分は警告音がうるさいので消しました。

あとは「Zettlr」という、MarkdownのWYSIWIGエディタがあります。 こちらもちゃんと警告を出してくれるタイプ。 自分はこの記事を書き終わる直前にインストールして設定をしました。

というわけで、いろいろと試行錯誤しながらこのサイトを更新している日々です。

次はデロンギのオイルヒーターのレビューとか書きます。多分。