Cloudflare Pagesで完全無料ポートフォリオ

# TL;DR

- 静的サイトを無料でホスティングするなら **Cloudflare Pages** は有力候補  
- **Next.jsのSSG**（Static Site Generation）を活用すれば，はやい･やすい･うまい  
- GitHubと連携して**自動デプロイ**も簡単  
- 実例：筆者のポートフォリオ → [https://daikinomura.tech/](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'` を指定します．  
とはいえ，この辺りは他により詳しい記事があるかと思いますので，詳細はそちらをご参照いただきたく．

```bash
npx create-next-app my-portfolio
cd my-portfolio
```
## `next.config.js`

```js
module.exports = {
  output: 'export',
};
```

## 例：`pages/index.tsx`

```tsx
export async function getStaticProps() {
  return {
    props: {
      name: "Your Name",
    },
  };
}

export default function Home({ name }) {
  return <h1>Hello, {name}</h1>;
}
```

ビルド：

```bash
npx next build
```

これで，`out/` フォルダに静的なHTMLファイルが生成されるはずです．問題なくできていれば次へ．

---

# 2. GitHubへPush

Cloudflare PagesはGitHubから自動でソースを取得するため，リポジトリを作成しコードをPushします．  ~~説明いらなくないか！？~~

```bash
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](https://pages.cloudflare.com/) にアクセスしてログインしたあとの操作になります．アカウントがない場合には作っておきましょう．

1. 「**Create a project**」をクリック
1. 「**Pages**」タブ内の「Impport an exhisting Git repository」をクリック
   ![Create a project画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951630/419b3c38-fb4a-4e5e-9b96-ed278d2691bd.png)
   
1. GitHubとの連携後，対象のリポジトリを選択します．(諸事情で，画像ではhogeが並んでますが，本当はちゃんとでてきます．)
   ![リポジトリ選択画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951630/0bb9e1ac-b713-4342-b3ad-a202276c81a7.png)

---

# 4. ビルド設定（Next.js / SSG）

[前項](#3-cloudflare-pagesで新規プロジェクト作成)の内容が完了すると，以下のような詳細設定画面が表示されます．
![詳細設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951630/9d6ea6ca-a71b-4a06-bf54-e4215c7dfae8.png)
今回は，基本的にデフォルト設定で行きたいと思います．`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
```

![デプロイ完了画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951630/a412e9fc-95ce-4b29-8eaa-800fbb0fe8cd.png)

---

# 6. カスタムドメイン設定（任意）

独自ドメインを使いたい場合は，Cloudflare Pagesの「**Custom domains**」から設定可能です．

CloudflareのDNSを使っていれば，ボタン数ポチで完了します．折角ポートフォリオを作るなら，デフォルトの`pages.dev` 以外のドメインを使っていた方がかっこいいので，おすすめです．
![カスタムドメイン設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951630/254b2c53-7138-4972-af86-af5916e9af29.png)

---

# 注意点・補足

- **ISR(Incremental Static Regeneration)やAPI Routesは利用不可**です．そういった機能が必要な場合は，おとなしくVercelにしましょう
- Node.jsのバージョン違いで，ビルドに失敗することがあります．その場合，設定画面から変更可能なので，一度確認してみることをおすすめします．
---

# 実際の例（参考）

私も，Next.js + Cloudflare Pagesを使ってポートフォリオを公開しています．  

[https://daikinomura.tech/](https://daikinomura.tech/)

---

# まとめ

Next.jsとCloudflare Pagesを組み合わせることで，無料かつ簡単にポートフォリオサイトを公開できます．

- 静的サイトとして安定してホスティング可能
- GitHub連携で自動デプロイ
- カスタムドメインやSSL設定も簡単

GitHub側でDependabotなどの活用を進めると，より手間を減らせると思うので，個人的にはやってみたいところではあります．

---

# 参考リンク

- [Next.js Docs: Static HTML Export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)
- [Cloudflare Pages公式](https://pages.cloudflare.com/)

---