「完全無料」で作る！Astro, GitHub, 忍者ホームページで始めるWebサイト構築入門(0)

本ページを読んでほしい人

完全無料でWebサイトを構築したい人．
数学系のWebページを作りたい人．

　この２つを満たしていても，プログラミングの知識がないと構築した後の運用（記事作成，広告を付けるなど）が厳しい．全体構成の仕組みを構築する解説はするが，Gitの使い方，Markdownの書き方などは解説しないからである．別途知識を得る必要がある．

Webサイト構築の条件．

　自分がWebサイトを構築する上で，要求するものは以下．

複雑な数式も表示できること（数学系ブログにしたいから）．
広告を載せて，収益化できること（お小遣いくらいは稼ぎたいから）．
低予算で構築できること（万年赤字運営などしたくないから）．

全体構成

本構成のメリット・デメリット

メリット

完全無料でWebサイトが構築できる．
Astroが静的なWebページを生成するので，数式に限らず画面表示が速い．
- SEO的にもGood！
Googleにインデックス登録できる．
- 検索できないサイトは存在しないと同じ．

デメリット

プログラミング初心者には技術ハードルが少し高い．
- WordPressならアドオン追加ですぐにできるが，Astroはそうはいかない．
忍者ホームページは他社ホスティングサービスより性能面が少し劣る．
- 記事に広告が勝手についてしまう．
Googleアドセンスに登録できない．
- 広告は忍者AdMaxで代替する．

　（早くWebサイトを構築したい方は，以下読まなくてよいです．）

忍者ホームページに落ち着くまでの経緯．

ロリポップとWordPressで構築する

　ブログならWordPressだろうということで，どこにWordPressを構築するかが焦点だった．数学系ブログなのでアクセス数が多くなることはないと考えていたので，低スペック・低価格なホスティングサービスを探した結果，ロリポップ！レンタルサーバーに決まった．ライトプラン(約500円／月額，毎月契約更新)で開始した．

　数学系ブログはいたるところにあり，WordPressでの数式の問題はないだろう．広告はGoogleアドセンスで申請すれば通るだろうし，コンテンツさえ作れば，うまく行くと思っていた．

　3ヶ月ほどWordPressを運用していたときに問題が発生した．Googleアドセンスの申請が通らないのだ．わかる限りの打つ手はすべてやったが，それでも申請が通らない．原因がわからず，1ヶ月過ぎる．

　また，WebページのパフォーマンスをPageSpeed Insightsで測定した結果，測定値がよくないと判明した．契約上，性能面はよくないのはわかっていたので仕方がない．

　ここで数学系ブログは動的なWebページである必要がないので，静的なページでWebサイトを構築できれば，読者に対するページ表示速度は改善できるのではと気づいた．つまり，PageSpeed Insightsの測定結果は改善するのではないかと考えた．WordPressでそれが可能なのか調べたが，わからなかった．

　あと，一般的なブログ形式だと前後関係の調整が難しいことが気に入らなかった．数学は理解を積み上げていく性質があるので，前後関係が重要である．しかし，ブログ形式だと順番に記事を書かないと前後関係の表現が難しかった．やり方はあるのだと思うが．

　問題点をまとめると，

アドセンス申請が通らず，広告がWebページに表示されない．(重要度：高)
Webページ表示の測定結果がよくない．
- ロリポップのプラン上仕様がないが，改善（静的ページ化）はできそう．
ブログ形式は数学系ブログに向いていない．

AstroとCloudflareで構築する

　ソフトウェアの使い方を説明するようなドキュメントの形でブログを構成できないか調べていた．おそらくそのときにStarlightと出会ったと思う．これはAstroというツールを元にドキュメントの形でWebサイトを構成するものだ．

　Astroは静的なページを生成するだけで，それをWebとして配信（Webで見れる）することはできない． Astroを踏まえた検索で調べると，CloudflareのPages機能で Web配信している人がいるとわかった．Cloudflareなら無料でWeb配信できるので，金銭的コストはなくなった．

　WordPressの記事をAstroでMarkdown形式にする大きな手間がかかるが，金銭的コストがないので，メリットを感じたため，移行を決意した．

　ただここでも問題が生じた．Googleのインデックスに登録できたが，エラー状態になった．そのうちに解決できると考えて，記事を書きつつ，このエラーを調べて解決する日々が続いた．

　問題点をまとめる．

Googleのインデックス登録エラーになる．
- したがって，おそらくアドセンス申請も通らない．（重要度：高）

X Server Staticに移行する

　Cloudflareを諦めて，別のホスティングサービスへ移行することを決めた．次はX Server Staticにした． Xサーバはホスティングサービスで聞いたことがあり，X Server Staticは無料で使えるとわかったためである．

　インデックス登録の可否はやってみないとわからなかったので，とにかくやってみた．結果，登録できなかった．

　問題点が解決できなかった．

忍者ホームページに移行する

　無料プランのホスティングサービスではインデックス登録は難しいみたいな話が検索に出てくるので，有名どころでは駄目かもと考えていた．移行は手間がかからないし，インデックス登録できたらラッキーくらいの気持ちで，探し当てた「忍者ホームページ」で試すことにした．（移行はGitHub ActionsのActionロジックを少し書き換えるだけ．）

　結果，インデックス登録エラーは解決できた．アドセンス申請も試したが，サブドメイン名では不可だった．問題は残ってしまったが，忍者AdMaxを見つけ，問題を回避できた．つまり，広告の配信ができるようになった．