WordPressからEleventy + Cloudflareへ移行し、長期的に安心できる静的サイト運用を手に入れた話

目次

• 1. はじめに
• 2. WordPressで直面した深刻な課題
• 3. なぜEleventyを選んだのか
• 4. Cloudflareによるホスティングとワークフロー
• 5. 移行後に得られた安心
• 6. WordPressとの比較
• 7. まとめ

1. はじめに

法人化する以前の個人事業主の時代から、長年にわたってWordPressでWebサイトを運営してきました。そのため、法人設立時に「慣れているから」という安易な理由で、WordPressでWebサイトを作成し、ブログを書いてきました。

しかし、運用が続くにつれて様々な課題に直面するようになりました。セキュリティアップデートへの不安、購入したテーマがアップデートされなくなる問題、WordPressやPHPの学習負荷、レンタルサーバーでのデータベース管理の恐怖など、多くの課題が見つかりました。

これらの課題を根本的に解決するため、静的サイトジェネレーター（SSG）の、EleventyとCloudflare Workersを活用する環境への移行を決断しました。結果として、「不安な要素がゼロになった」と言えるほど快適な運用環境を手に入れることができました。

2. WordPressで直面した深刻な課題

2-1. レンタルサーバー環境でのデータベース運用の課題

WordPressを長期運用する中で最も恐怖を感じたのは、レンタルサーバーから送られてくる「データベースアップデートなどの通知」でした。

「アップデートしなければならないが、失敗するかもしれない」という板挟み状態で、不安を抱えながらの運用を強いられていました。

2-2. コア・テーマ・プラグインのアップデート管理

当初購入した有料テーマは長期的なメンテナンスは期待できませんでしたし、WordPressのアップデートやPHPのアップデートをする中で、テーマ内で実装しているコードによっては、非推奨な実装があるかもしれない、と思い不安に感じていました。

また、テーマ内のCSSやHTMLのテンプレートを編集したい気持ちもありましたが、WordPressやPHPを学習したいとは思えず、いつかWebサイトが壊れるかもしれない、と感じていました。

「購入時は最新だったテーマが、WordPressのバージョンアップについていけず、ウィジェット設定などのテーマに関連する設定が制限された状態になってしまいました。」

かりに、テーマの買い替えやテーマの修正を続けたとしても、同じ問題が将来的に再発する可能性があり、根本的な解決策ではありませんでした。

プラグインについても、サポートするバージョンがありますし、テーマと近しい課題があると思います。

WordPressはユーザが多いため、攻撃対象になりやすく、セキュリティリスクも高いため、常にアップデートをし続ける必要があります。

上記のような課題を感じており、ずっと「WordPressから移行したい」と常に感じていました。

とはいえ、無料とは思えない高品質のテーマや、高機能なプラグインが揃っている点は、本当に素晴らしいなとも感じました。

3. なぜEleventyを選んだのか

3-1. 設定が簡単で、シンプル

静的サイトジェネレーターの選択肢は多数ありますが、Eleventyを選んだ最大の理由は「設定が簡単で、シンプル」という点でした。簡単でシンプルということは、学習コストが低く、長期的な保守性も高いということを意味します。

EleventyのWebサイトを見ていただくと、どれくらい簡単かご理解いただけると思います。

Eleventy is a simpler static site generator

今回は、一般的なWebサイトや簡易的なブログを作るだけで、JavaScriptでリッチなサイトを作る必要もなく、HTMLを部品化して再利用できる仕組みがあれば十分でした。

個人的な感覚で恐縮ですが、表にしました。EleventyとNunjucksを使うことで、HTMLを再利用できますし、設定が簡単なEleventyは本当に良い選択肢だと思います。

Hugoも以前使っており検討しましたが、HTMLを生成する上で、Tailwind CSSやPostCSS（Minifyやcssnano）は、やはり必要になると思いました。そう考えると、Node.jsは必須になるため、Hugoは選択肢から外れました。

3-2. 既存スキルの活用

私はEleventyでNunjucksというテンプレートエンジンを使用していますが、よく使うFiltersを少し覚える程度で済むため、学習コストが低く抑えられます。基本的なHTMLやCSSの知識があれば、すぐにWebサイトを構築できます。

Nunjucks Templating

4. Cloudflareによるホスティングと簡単なワークフロー

以前はCloudflare Pagesを使用していましたが、最近CloudflareからPagesからWorkersへの移行を推奨するドキュメントが公開されました。そのため、この記事ではCloudflare Workersについて説明します。

You can deploy full-stack applications, including front-end static assets and back-end APIs, as well as server-side rendered pages (SSR), with Cloudflare Workers.

Like Pages, requests for static assets on Workers are free, and Pages Functions invocations are charged at the same rate as Workers, so you can expect a similar cost structure.

Unlike Pages, Workers has a distinctly broader set of features available to it, (including Durable Objects, Cron Triggers, and more comprehensive Observability). A complete list can be found at the bottom of this page. Workers will receive the focus of Cloudflare's development efforts going forwards, so we therefore are recommending using Cloudflare Workers over Cloudflare Pages for any new projects ↗.

4-1. GitHub連携による自動化

Cloudflare Workersは、GitHubリポジトリとの連携により、シンプルな更新フローを実現できます。エンジニアにとっては馴染みのある一般的なワークフローです。

個人的にCloudflareのサービス（Workers、R2、D1、ドメイン、DNS、Cloudflare Tunnelなど）を愛用しており、大変オススメです。

4-2. ブランチによるプレビュー機能

Cloudflare Workersは、各デプロイごとに個別のプレビュー用IDが自動生成され、そのIDをプレフィックスとしてURLに付与することで、プレビューを確認できます。複数人での運用時には、GitHub上でレビューワークフローも構築できます。

Preview URLs allow you to preview new versions of your Worker without deploying it to production.

There are two types of preview URLs:

• Versioned Preview URLs: A unique URL generated automatically for each new version of your Worker.
• Aliased Preview URLs: A static, human-readable alias that you can manually assign to a Worker version.

Both preview URL types follow the format: <VERSION_PREFIX OR ALIAS>-<WORKER_NAME>.<SUBDOMAIN>.workers.dev

今まで書いた内容は、VercelやNetlify、GitHub Pagesなどでも同様のことができますが、料金体系やリージョン、商用利用時の規約などを考慮し、Cloudflareを選択しました。

5. 移行後に得られた安心

5-1. セキュリティリスクの排除

PHP、データベース、WordPressプラグインといった攻撃対象となる要素を完全に排除したことで、セキュリティ面での不安がなくなりました。

「静的ファイルのみの構成では、SQLインジェクションやXSS攻撃など、従来のWebアプリケーションで頻繁に発生するセキュリティ脆弱性の大部分が原理的に発生しえない。」

この構造的なセキュリティ向上により、セキュリティパッチの適用やアップデートに対する常時不安から解放されました。

5-2. 必要な機能の簡単実装

Eleventyでは、Webサイトに必要な基本機能についても、簡単に導入できます。

• RSS生成：@11ty/eleventy-plugin-rssを使用
• sitemap.xml生成：テンプレートで自動生成
• 記事のカテゴリー分類：フロントマターでの管理
• コレクション機能：関連記事の表示など

これらすべてがシンプルで理解しやすく、自分でコントロールできる範囲内にあることが重要だと思います。

たとえば、sitemap.xmlを生成するためのテンプレートは、以下のようなコードで実現できます。

---
eleventyExcludeFromCollections: true
layout: false
permalink: /sitemap.xml
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    {% for page in collections.all %}
        <url>
            <loc>{{ (metadata.url + (page.url | url)) | url }}</loc>
            <lastmod>{{ page.data.updatedDate | postDate }}</lastmod>
        </url>
    {% endfor %}
</urlset>

5-3. 精神的な安定の獲得

最も大きな変化は、「長期的なWordPress、PHP、データベースのアップデートに関連する不安がなくなった」ことです。

• アップデートの恐怖がない
• データベースが存在しない構成なので、データベースに関連するリスクがない
• 技術的負債を蓄積しない持続可能な運用

6. WordPressとの比較

コメント機能など、今回のWebサイトにおいては不要なため記載していませんが、SSG利用時に課題になる部分がいくつかあります。

このような課題を解決するサービスは、いくつかありますし、どのようなSSGを使っても簡単に導入できます。

このあと、Angular + Cloudflare Workersでお問い合わせフォームを作成します。公開できましたら、記事にしたいと思います。

7. まとめ

WordPressからEleventy + Cloudflareへの移行は、単なる技術的な改善以上の価値がありました。最も重要なのは、「不安な要素がゼロになった」という精神的な安定です。

もちろん、WordPressには豊富なプラグインエコシステムや管理画面での直感的な操作など、優れた面も多数あります。しかし、長期的な運用を考えた時、シンプルで予測可能なアーキテクチャの価値は計り知れません。

同じような課題を抱えている方にとって、この体験談が参考になれば幸いです。静的サイトジェネレーターという選択肢を検討してみてください。