ブログ作りました！

備忘録的にやったことを気軽に発信できたらなと思い、ブログ作りました！

そんなに過激なことを言うタイプではないですが、有名ブログだと気を使うので自分のブログでラフに発信していければと思っています。

記念すべき１記事目はこのブログの作り方について書きます。

ブログの作り方

ブログの要件整理

ブログの作り方は様々あるかと思いますが、個人的なサイトの場合は静的サイトが表示されれば十分で、WordPress などの CMS や DB は必要ないです。

ということで、今回は静的なサイトが表示できれば良く、それに加えて、独自ドメインと HTTPS もしたいです。

手軽にホスティングする手段として Vercel が挙げられますが、将来的に広告をつけたいと思った場合は 20$の Pro プランにしないといけません。

ですので今回は、学習も兼ねて AWS の S3 と CloudFront を使ってホスティングすることにしました。

ローカルでブログを作る

まずはローカルでブログを作成します。私は Next.js を使用してブログを作成しました。

npx create-next-app@latest blog

cd blog

私は Next.js は Tutorial をやったことある程度ですが、Cursor など AI に「技術ブログを作ってくれ」というと 1 発でいい感じに作ってくれました。本サイトはかなり Zenn に似てるなと思っているので、有名なブログサイトの真似をして作ってというといい感じに作ってくれそうです。

工夫した箇所

ブログ記事は一元管理して、マークダウンファイルで記載できるようにしています。具体的には、content/posts ディレクトリにマークダウンファイルを配置することで、ブログ記事を管理できるようにしています。

---
title: "ブログ記事のタイトル"
date: "2025-11-15"
category: "カテゴリー"
excerpt: "ブログ記事の概要"
---

# ブログ記事の内容

ここに Markdown で記事を記述します。

それを view に渡すことで、ブログ記事を表示できるようにしています。なので、ブログ記事を追加する場合は、content/posts ディレクトリにマークダウンファイルを配置するだけで公開できるようにしています。

ブログをホスティング

ブログが完成したら、公開するためにホスティングする必要があります。今回は AWS の S3 と CloudFront を使ってホスティングします。

具体的には、以下のような手順でホスティングします。

Next.js の静的サイト生成の設定
S3 にアップロード
Route 53(ドメイン取得済み想定)
CloudFront の設定(ACM の設定も同時に作成)

順番に解説します。

Next.js の静的サイト生成の設定

Next.js で静的サイトを生成するための設定を行います。以下のように next.config.ts に設定を追加します。

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
};

export default nextConfig;

以下のコマンドで静的サイトを生成します。

npm run build

生成された静的ファイルは out ディレクトリに出力されます。このファイルを S3 にアップロードします。

S3 にアップロード

S3 にアップロードするために s3 のバケットを作成します。

バケット名は任意の名前を設定し、パブリックアクセスの設定は後ほど CloudFront 経由でアクセスするため、基本的に設定はデフォルトのままで問題ありません。

バケットを作成したら、Next.js でビルドした静的ファイルをアップロードします。ドラックアンドドロップでアップロードできます。

Route 53(ドメイン取得済み想定)

s3 だけでもブログは公開できますが、独自ドメインを使いたい場合はドメイン取得が必要です。

私は Cloudflare のドメインを取得しているため、取得方法は本記事では割愛します。

独自ドメインを Route 53 を使ってドメイン管理します。

その際に以下の記事を参考にしました。

https://qiita.com/Tterima/items/bac28dbdf37b5e50b131

詰まった点としては、上記の記事に記載されていますが、Cloudflare で取得したドメインのデフォルトネームサーバーを Route 53 に設定したいのですが、それをするには有料プランに入らないといけませんでした。なので、サブドメインのみ Route 53 に設定しました。

CloudFront の設定(ACM の設定も同時に作成)

CloudFront を使ってブログをホスティングします。

具体的には、以下のような手順でホスティングします。

Distribution name は任意の名前を設定します。 Distribution type は Single website or app を選択します。

Route 53とACM の設定(ドメイン取得済み想定)で Route 53 にドメイン管理させたドメインを入力すると以下のようになるはずなので、Next を押します。

今回は S3 にアップロードしてるので、S3 を選択します。

s3 のバケット名を指定します。

Settings はデフォルトのままで問題ありません。

Firewall は今のところ設定していません。Firewall 自体にかなりお金がかかるのと、特にアクセスが集中するようなサイトでないため、設定しなくていいと思っています。何かしら悪意のある攻撃が続く場合は対応を考える必要がありそうです。

ここで ACM 証明書を作成します。すでに、作成してあれば、以下のように選択できますし、なければこの画面で新しく作れるので作成します。

最後に確認画面が表示されるので、Create distribution を押します。

成功すると、独自ドメインでアクセス出来るようになります。

https://<<独自ドメイン>>/index.html

ですが、index.html と表示しないといけないのは少し不便なので、以下のサイトを参考に自動で index.html が付与されるように CloudFront に関数を定義しています。

https://qiita.com/y_inoue15/items/c637dd2e269f7ab50e38#cloudfront%E3%81%AE%E9%96%A2%E6%95%B0%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B

これで https://<<独自ドメイン>>/ にアクセスして、ブログが表示されればブログ公開成功です！

CI/CD

毎回手動で S3 にファイルをアップロードするのは面倒なので、GitHub Actions を使って自動でデプロイできるようにします。

IAM ロールを作成

S3 にファイルをアップロードするための IAM ロールを作成します。

調べたところ一昔前は GitHub Actions Secrets に保存した AWS のアクセスキーとシークレットを埋め込む形が一般的なようでしたが、非推奨となり、最近は Open ID Connect が推奨のようです。以下の記事が参考になりました。

https://qiita.com/sigma_devsecops/items/3e2fb50770def1c3a098

ID プロバイダからプロバイダを追加するをクリックします。

github の公式リポジトリにある通り、 Provider type は OpenID Connect を選択します。

Provider URL はhttps://oidc.actions.githubusercontent.com/

対象者は sts.amazonaws.com

を設定し、追加を押します。

その後、GitHub Actions から認証後に使用できる権限を制御するための IAM Role を作成します。 s3 を選択し、s3 のバケット名を指定します。

アクセス権限を選択します

ロール名と適切な説明を入力し、作成を押します。

作成するとロールの ARN に以下のようなものが表示されます。こちらをコピーしておきます。 arn:aws:iam::<AWSアカウントID>:role/<IAMロール名>

GitHub Actions のワークフローを作成

GitHub Actions のワークフローを作成します。上記で作成した IAM ロールの ARN を設定することで、master ブランチに push されたら自動で S3 にファイルをアップロードするようにしています。secrets.AWS_ACCOUNT_IDとsecrets.AWS_DEPLOY_ROLEは GitHub Actions の Secret に設定しておきます。

.github/workflows/deploy-s3.yml

name: Deploy to S3

on:
  push:
    branches:
      - master

permissions:
  id-token: write
  contents: read

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-region: ap-northeast-1
          role-to-assume: arn:aws:iam::${{ secrets.AWS_ACCOUNT_ID }}:role/${{ secrets.AWS_DEPLOY_ROLE }}
          role-session-name: GitHubActionsDeploySession

      - name: Sync files to S3
        run: |
          aws s3 sync ./out s3://tech-blog.snogucch.com --delete

費用について

現状、Route 53 の費用と税金しかかかっておらず、総額で月 0.55 ドルです。CloudFront の費用はまだかかっていません。CloudFront の費用は従量課金なのでブログのアクセス数が増えるようになるとコストが増えていくはずです。

感想

今回、ブログ作成にあたって、ブログからインフラの構築、調査を AI に行ってもらいながら作成しました。

web フロントはしばらく離れていたり、インフラも専門外ですが AI と対話することで、未知の分野でもキャッチアップすることができると感じました。

今後も、AI によって各分野の垣根がなくなる気がするので、専門性は持ちつつ、新しい技術や知識を身に着けていきたいと思います。

参考リンク

https://qiita.com/y_inoue15/items/c637dd2e269f7ab50e38#cloudfront%E3%81%AE%E9%96%A2%E6%95%B0%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B https://qiita.com/Tterima/items/bac28dbdf37b5e50b131 https://qiita.com/sigma_devsecops/items/3e2fb50770def1c3a098 https://github.com/aws-actions/configure-aws-credentials