実践ノウハウ

Astroで記事を追加してAWSへ自動公開する流れ

AIとCodexとGitを使って、個人サイトを継続的に育てるための流れを整理します。記事を書くところから、Astroサイトへの反映、GitHub ActionsとAWSによる自動公開までを、SEの実践環境として考えます。

個人サイトは作った後が大事

個人サイトを作ったあとに大事なのは、継続して記事を追加できる仕組みを作ることです。

最初にサイトを公開することも大変ですが、本当に難しいのはその後です。記事を書く。内容を整える。サイトに反映する。公開する。表示を確認する。この流れが面倒だと、だんだん更新しなくなります。

そこで私は、Astroで作った静的サイトに記事を追加し、GitとAWSを使って自動公開する流れを作りました。

まずは体験や気づきを書き出す

基本的な流れはシンプルです。

まず、自分が感じたことを書き出します。

最初からきれいな文章にしようとはしません。仕事で感じたこと、現場で困ったこと、資格学習で気づいたこと、AWSやAIを使って試したことを、まずはメモのように書きます。

たとえば、「CI/CDは自動化だから便利だと思っていたが、ローカルビルドをしないまま流すと全体を止めることになる」といった、自分の体験ベースの内容です。

この段階では、誤字があっても、文章が荒くても問題ありません。大事なのは、現場で感じたことを消さずに残すことです。

AIは編集者として使う

次に、その文章をAIに渡して、添削してもらいます。

AIには、誤字脱字の修正だけでなく、文章の流れ、見出し、読者に伝わりやすい構成も整えてもらいます。自分の言葉だけでは感情的になりすぎる部分も、AIに整理してもらうことで、公開できる記事の形に近づきます。

ただし、AIに丸投げはしません。

AIが整えた文章を見て、「これは自分の感覚と違う」「ここはもっと現場っぽくしたい」「この表現は強すぎる」と感じた部分は修正します。

理想は、自分の経験が中心で、AIは編集者として使うことです。

AstroのMarkdown記事として管理する

記事の内容が固まったら、Astroの記事として追加します。Astroでは、記事をMarkdownファイルやAstroファイルとして管理できるため、SEにとって扱いやすいです。

WordPressのように管理画面へログインして記事を書くのではなく、コードと同じように記事ファイルを管理します。これは最初は少し難しく見えますが、慣れると非常に分かりやすいです。

図解:Astro記事をAWSへ自動公開する流れ

記事公開までの流れは、大きく3段階に分けられます。まず、自分の体験を文章化し、AIで添削します。次に、Codexを使ってAstroサイトへ記事を追加し、Gitで変更を管理します。最後に、GitHubへpushするとGitHub Actionsが自動でビルドし、S3とCloudFrontを通じて公開されます。

① 記事を作る

  1. 体験・気づきを書く
  2. AIで添削する
  3. Markdown記事にする

② サイトへ反映する

  1. Codexで記事追加
  2. 表示を確認する
  3. Gitでコミット

③ AWSへ自動公開する

  1. GitHubへpush
  2. GitHub Actionsでビルド
  3. S3へ配置
  4. CloudFrontで配信

Codexでサイトへ反映する

記事ファイルを追加したら、次はCodexを使ってサイトへ反映します。

たとえば、新しい記事ファイルを作成する。カテゴリを設定する。記事一覧に表示されるようにする。タイトル、説明文、公開日、更新日を整える。必要であれば、トップページやカテゴリページの表示も調整する。

こうした作業を、Codexに指示しながら進めます。

自分でコードを全部書くこともできますが、記事追加やレイアウト調整のような作業は、Codexを使うとかなり効率化できます。

ただし、ここでも丸投げはしません。

Codexが修正した内容を確認し、意図した通りに表示されるかを見ます。特に、リンク切れ、カテゴリの誤り、公開日、記事一覧の表示順、スマホ表示は確認が必要です。

Gitで変更を管理する

修正内容に問題がなければ、Gitで変更を管理します。

Gitを使うことで、どの記事を追加したのか、どのファイルを変更したのか、いつ反映したのかが履歴として残ります。もし表示が崩れても、過去の状態に戻すことができます。

これは、個人サイトであっても大きなメリットです。

図解:AWS公開部分だけ

公開部分だけを見ると、GitHubへpushした後の処理は自動化できます。GitHub ActionsでAstroをビルドし、生成された静的ファイルをS3へ配置します。その後、CloudFrontのキャッシュを削除し、読者が最新の記事を見られる状態にします。

GitHubへpush

変更をリモートへ反映する

GitHub Actions

Astroをビルドする

S3

静的ファイルを配置する

CloudFront

キャッシュ削除・配信を行う

Route 53

独自ドメインで読者がアクセスする

公開作業は仕組みに任せる

Gitにコミットし、GitHubへpushすると、GitHub Actionsが動きます。GitHub Actionsでは、Astroのビルドを行い、生成された静的ファイルをAWSのS3へ配置します。その後、CloudFrontのキャッシュを削除し、読者が最新の記事を見られる状態にします。

つまり、記事を書いた後の公開作業は、かなり自動化できます。

自分がやることは、記事を書くこと、AIで整えること、Codexでサイトに反映すること、Gitで変更を管理することです。AWSへの公開は、仕組みに任せます。

個人サイト運営はSEの学習になる

この流れを作って感じたのは、個人サイト運営そのものがSEの学習になるということです。

Astroで静的サイトを作る。Markdownで記事を管理する。Gitで変更履歴を残す。GitHub Actionsで自動ビルドする。S3へ配置する。CloudFrontで配信する。Route 53で独自ドメインを使う。

これは、単なるブログ運営ではありません。

クラウド、CI/CD、フロントエンド、DNS、CDN、バージョン管理を実際に使う小さな開発プロジェクトです。

WordPressであれば、管理画面から記事を書くだけで公開できます。それはとても便利です。

一方で、AstroとAWSを使った静的サイトは、自分で仕組みを理解しながら育てていく楽しさがあります。

SEなら、自分で作り、自分で直し、自分で公開できること自体が価値になります。

まとめ

記事を書くことは、経験の整理になります。AIで添削することは、文章力の補強になります。Codexで反映することは、開発効率化の実践になります。Gitで管理することは、変更管理の練習になります。AWSへ自動公開することは、クラウド運用の実績になります。

個人サイトは、ただ情報を発信する場所ではありません。

SEにとっては、自分の経験を記事に変え、自分の技術で公開し、自分のブランドを育てるための実践環境です。

Astro、AI、Codex、Git、AWSを組み合わせることで、記事作成から公開までの流れはかなり効率化できます。

大事なのは、完璧な記事を最初から目指すことではありません。

まずは自分が感じたことを書く。AIに整えてもらう。Codexでサイトに反映する。Gitで管理する。AWSへ自動公開する。

この流れを繰り返すことで、個人サイトは少しずつ育っていきます。