LoginSignup
3
3

【脱WordPress #1】Astro+React+CloudFlareで完全無料の技術ブログ作成した

Last updated at Posted at 2023-09-05

初投稿です。
WordPress から Astro への移行が非常に良かったという話です。

Astro で作成したブログ

技術ブログにとって WordPress は完全にオーバスペック

WordPress の利点と限界。

WordPress 利点

  • ユーザーフレンドリー
    WordPress は使いやすいインターフェイスを持っているため、技術的背景がない人でも簡単に使えます。
  • 豊富なプラグイン
    WordPress は豊富なプラグインを提供しており、様々な機能を簡単に追加できます。
  • テーマ
    多種多様なテーマがあり、ウェブサイトの外観を簡単に変更できます。

限界

  • パフォーマンスの問題
    大量のプラグインや複雑なテーマを使用すると、サイトのパフォーマンスに影響が出る場合があります。
  • 継続的なメンテナンス
    WordPress サイトは定期的なメンテナンスが必要であり、更新しないとセキュリティのリスクが高まります。
  • ホスティングコスト
    そこそこの性能のホスティングを必要とします。

以上ことから、脱 WordPress を決意しました。

SSG(静的サイトジェネレーター)

SSG とは

SSG(静的サイトジェネレーター)はウェブページを事前に生成し、静的 HTML ファイルとしてサーバー上に保存します。これにより、データベースへの問い合わせなど動的な処理が不要になり、ウェブサイトのロード時間が短縮されます。

今回作成したブログの LightHouse スコアはこちらです。
image.png

SSG 利点

  • 高速なロード時間
    静的ファイルはデータベースからのデータの取得などの動的なプロセスが必要ないため、ロード時間が速くなります。
  • 低いセキュリティリスク
    動的コンテンツがないため、SQL インジェクションや XSS 攻撃といったセキュリティリスクが低減します。
  • 簡易なメンテナンス
    セキュリティ更新やパッチの適用が必要なサーバーサイドのソフトウェアが少ないため、メンテナンスが簡単です。
  • マークダウンによる記述
    マークダウンで記述できるので、普段使用しているエディターを使って記事の作成が可能です。また、Git によるバージョン管理が可能となります。

SSG の比較

  • Astro
    言語:JavaScript
    特徴:
    コンポーネントベースのアーキテクチャで、React や Vue などの異なるフレームワークを組み合わせて使用できます。
    高いパフォーマンスと SEO 最適化が重視された設計。
    パーシャルハイドレーションが特徴的で、必要な部分だけを動的に読み込むことができる。

  • Hugo:
    言語:Go
    特徴:
    ビルド速度が非常に速い。
    マークダウンや他のデータ形式を HTML へ変換する力強いテンプレートエンジン。
    豊富なテーマとプラグインのエコシステム。

  • Jekyll:
    言語:Ruby
    特徴:
    GitHub Pages と連携が良く、GitHub 上で簡単にホスティングできます。
    マークダウンと Liquid テンプレートエンジンのサポート。

完全無料の実現方法

ホスティング費用

完全無料と言うと聞こえは悪いかもしれません。また、無料ならではの制限等を疑う人もいるかもしれません。
ですが、CloudFlare Pages を利用することで無料で静的ファイルをホスティングできます。

ドメイン費用

次に問題なってくるのは、ドメイン料金かと思います。CloudFlare Pages が自動で設定するドメインについては無料で使用できます。ですが、カスタムドメインの場合はドメイン料金が発生します。

裏技的な方法ではありますが、レンタルサーバーやドメイン業者から登録時に特典としてもらえる永久無料のドメインを利用できます。この入手したドメインを Pages のカスタムドメインとして設定することで、完全無料での運用が実現できます。

次回

想像以上に長くなってしまったので、「Astro を使用した効率的なブログのビルドとカスタマイズ」については次の機会に投稿します。

もし良ければ、X の方フォローして頂けると嬉しい。

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3