このホームページの構造
はじめに
このホームページの構造は、ITボランティアサークル MakaniAizu が近隣のボランティア団体や公民館のホームページを作成する際に使用する方法と同じです。このホームページの特徴は、HTML/CSS、JavaScript(TypeScript)、SvelteKitという材料を使い、Azure Static Web AppsとGitHub Actionsという立地に配置し、Static Site Generation(SSG)という建築方法を採用していることです。このホームページのメリットは、サイトの表示スピードが速く、無料で構築できることです。また、ヘッドレスCMSを使うので記事の更新が楽です。この方法は、小規模なボランティアサイトと公民館に向いています。
ホームページの構造を説明します
材料
HTML/CSS、JavaScript(TypeScript)、SvelteKitという材料を使っています。HTML/CSSは、ホームページの見た目やレイアウトを決める言語です。JavaScriptは、ホームページに動きや機能をつける言語です。TypeScriptは、JavaScriptの拡張版で、より安全にコードを書くことができます。SvelteKitは、JavaScriptのフレームワークで、Static Site Generation(SSG)やServer Side Rendering(SSR)などの様々な建築方法に対応しています。SSGとは、静的なHTMLファイルを事前に生成する方法です。SSRとは、サーバー側でHTMLファイルを動的に生成する方法です。
立地
Azure Static Web AppsとGitHub Actionsというサービスを使いサイトヲ配置しています。Azure Static Web Appsは、マイクロソフトが提供するサービスで、静的なホームページを無料でホスティングできます。GitHub Actionsは、GitHubが提供するサービスで、コードの変更や更新を自動化できます。ヘッドレスCMSは、記事の内容や画像などを管理するシステムで、ホームページの見た目とは別に存在します。このホームページでは、ヘッドレスCMSからのデータをGitHub Actionsで取得し、Azure Static Web Appsにデプロイしています。
建築方法
Static Site Generation(SSG)という方法を採用しています。SSGは、静的なHTMLファイルを事前に生成する方法です。この方法のメリットは、サイトの表示スピードが速いことです。なぜなら、サーバー側でHTMLファイルを生成する必要がないからです。その結果、ユーザーの体験が向上します。一方、この方法のデメリットは、サイトが大きくなるほど、記事を更新した際のGitHub Actionsにおけるビルドに時間がかかることです。これは、ひとつの記事を書くごとに、その記事がサイトに反映されるまでに数分以上の時間を要するということです。閲覧時の表示時間は改善されたのですが、今度はサイトのコンテンツを増やす際に時間がかかるようになりました。これへの対処は現在考え中です。方針としては、SvelteKitで書くコードを今までのSSR用からSSGに特化した方法に変更することです。
おわりに
このページでは、このホームページの構造であり、且つITボランティアサークル MakaniAizu が近隣のボランティア団体や公民館のホームページを作成する際に使用する方法を紹介しました。この方法は、HTML/CSS、JavaScript(TypeScript)、SvelteKitという材料を使い、Azure Static Web AppsとGitHub Actionsという立地に配置し、Static Site Generation(SSG)という建築方法を採用しています。この方法のメリットは、サイトの表示スピードが速く、無料で構築できることです。また、ヘッドレスCMSを使うので記事の更新が楽です。この方法は、小規模なボランティアサイトと公民館に向いています。ただし、サイトが大きくなるほど、記事を更新した際のGitHub Actionsにおけるビルドに時間がかかるというデメリットもあります。これへの対策は現在考え中です。このホームページが、ボランティアや公民館のホームページ作成に役立つことを願っています。