Kanji
・クラウドエンジニア / フリーランス ・1993年生まれ ・愛媛県出身 / 東京都渋谷区在住 ・AWS歴5年 プロフィールの詳細
目次
タグ機能やページ検索機能など、複数の記事に横断してデータを収集し表示するのは動的サイトのほうが簡易に実装できるのですが、あまりランニングコストをかけたくなかったので静的サイトを選択いたしました。
参考
静的サイトを公開するためには、サーバーを用意する必要があります。
静的サイトのホスティング先として、いつも利用している GCP が提供している Firebase Hosting が一番有力な候補でしたが、それ以外の選択肢も検討してみました。
静的サイトのホスティング先を比較…というかひたすら羅列 | JavaScriptに関するお知らせ にある通り、以下の静的サイトのホスティング先が有名なようです。
静的サイトジェネレーターとは、HTML、CSS、JavaScript などのスタティックファイルを生成するためのツールです。
代表的な静的サイトジェネレーターを 3 つピックアップし、それぞれの特徴やメリット、デメリットについてリストアップしました。重要視したいものを黄色でハイライトしております。
結論として、あまりツールに関する学習コストはかけたくなかったため、Hugo を第一候補としていました。
サイトのデザインを Confluence のようにしたかったためテーマを探したのですが、いいものを見つけることができず、、、結局は Pandoc を使って自分で静的サイトジェネレーターを作成して運用してます。
Favicon （ファビコン）を作成できるフリーソフト GIMP （ギンプ）。 ico 形式での保存も可能なようです。 – pulogu.net を参考に GIMP でファビコンを作成しました。
ファビコンの表示するサイズは閲覧元の環境によって変わるようなので、 512x512px で用意したものを Favicon ジェネレーター で 256x256px へ変換しました。
元々は日本向けに書いておりましたが、記事のネタを増やしていくよりも、有益な情報のある記事に対してアクセスする数を増やした方が効率的だと考え多言語対応しました。
HTML タグに lang 属性を利用することで、ページの言語を指定することができます。
hreflang 属性を利用することでどのような言語をターゲットとしたページなのか Google に伝えることができます。
Sitemap.xml は対応する言語ごとに作成することで、Google がサイトをクロールする際に効率的に情報を取得することができます。
ブログの最適な画像サイズとは？最適化する理由やおすすめツールも紹介 | 初心者のためのブログ始め方講座
ブログで写真の画像サイズを小さく最適にして画像 SEO も実践する方法 を参考に算出したところ、画像の最適な横幅サイズは「786px」でした。
PageSpeed Insights
(2025/01/12 追記) - navタグは１つにした方がよい理由｜まつ73 - Pandoc でページを生成する際にはテンプレートとなる HTML ファイルを用意し、本文以外（フッダー、ヘッダー、サイドバーなど）を定義しました。 - nav タグは1つが望ましいとのことで、グローバルナビゲーションに相当するサイドバーのみで利用してます。