TL;DR
- 静的サイトを無料でホスティングするなら Cloudflare Pages は有力候補
- Next.jsのSSG（Static Site Generation）を活用すれば，はやい･やすい･うまい
- GitHubと連携して自動デプロイも簡単
- 実例：筆者のポートフォリオ → https://daikinomura.tech/
はじめに
ポートフォリオのような，長期的(時には，ほとんど一生に渡るような期間)にWebサイトを公開したいとき，誰しも以下のような要件を満たすホスティング先を探すはずです(探すよね…？)：
- 無料で使える
- 自動デプロイに対応している
- カスタムドメインやSSLが簡単に設定できる
本記事では，私がNext.jsのSSG（Static Site Generation）機能を使って作成したポートフォリオを，Cloudflare Pagesでホスティングした手順を紹介します．
ネタ的に，n番煎じ(nは非常に大きいものと思われる)ですが，なにかの参考になればと思います．本当は個人的備忘録です．
使用する技術・サービス
- Next.js (勿論Next.js以外でも可)
- GitHub（コード管理）(←これも必須ではない)
- Cloudflare Pages（静的サイトホスティング）
1. Next.jsでSSGポートフォリオを作成
まずはローカルでNext.jsプロジェクトを作成します．SSGを有効にするには，next.config.js でoutput: 'export' を指定します．
とはいえ，この辺りは他により詳しい記事があるかと思いますので，詳細はそちらをご参照いただきたく．
npx create-next-app my-portfolio
cd my-portfolio
next.config.js
module.exports = {
output: 'export',
};
例：pages/index.tsx
export async function getStaticProps() {
return {
props: {
name: "Your Name",
},
};
}
export default function Home({ name }) {
return <h1>Hello, {name}</h1>;
}
ビルド：
npx next build
これで，out/ フォルダに静的なHTMLファイルが生成されるはずです．問題なくできていれば次へ．
2. GitHubへPush
Cloudflare PagesはGitHubから自動でソースを取得するため，リポジトリを作成しコードをPushします． 説明いらなくないか！？
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourname/my-portfolio
git push -u origin main
3. Cloudflare Pagesで新規プロジェクト作成
以降は，Cloudflare Pages にアクセスしてログインしたあとの操作になります．アカウントがない場合には作っておきましょう．
-
「Create a project」をクリック
-
「Pages」タブ内の「Impport an exhisting Git repository」をクリック
-
GitHubとの連携後，対象のリポジトリを選択します．(諸事情で，画像ではhogeが並んでますが，本当はちゃんとでてきます．)
4. ビルド設定（Next.js / SSG）
前項の内容が完了すると，以下のような詳細設定画面が表示されます．
今回は，基本的にデフォルト設定で行きたいと思います．Framework presetでNext.js (Static HTML Export)を選択すると以下のようになると思われます：
-
Framework preset：
Next.js (Static HTML Export) -
Build command：
npm next build -
Output directory：
/out
rootディレクトリや，環境変数の設定が必要な場合も，この画面でやっておきましょう！
5. デプロイ確認
Save and Deployボタンを押下すると，自動でデプロイが始まります．
問題なくデプロイできれば，完了後から .pages.dev ドメインでアクセスできるようになります．
https://your-project-name.pages.dev
6. カスタムドメイン設定（任意）
独自ドメインを使いたい場合は，Cloudflare Pagesの「Custom domains」から設定可能です．
CloudflareのDNSを使っていれば，ボタン数ポチで完了します．折角ポートフォリオを作るなら，デフォルトのpages.dev 以外のドメインを使っていた方がかっこいいので，おすすめです．
注意点・補足
- ISR(Incremental Static Regeneration)やAPI Routesは利用不可です．そういった機能が必要な場合は，おとなしくVercelにしましょう
- Node.jsのバージョン違いで，ビルドに失敗することがあります．その場合，設定画面から変更可能なので，一度確認してみることをおすすめします．
実際の例（参考）
私も，Next.js + Cloudflare Pagesを使ってポートフォリオを公開しています．
まとめ
Next.jsとCloudflare Pagesを組み合わせることで，無料かつ簡単にポートフォリオサイトを公開できます．
- 静的サイトとして安定してホスティング可能
- GitHub連携で自動デプロイ
- カスタムドメインやSSL設定も簡単
GitHub側でDependabotなどの活用を進めると，より手間を減らせると思うので，個人的にはやってみたいところではあります．