Writer's Monolith

第1章：【技術編】維持費0円の最強構成

「サーバー？ドメイン？」と聞いて頭が痛くなるあなたへ。文系ライターが手にするべき最新の武器と、その仕組みを「家の建築」に例えて解説します。

第1章バナー

1-1. 結論、この組み合わせが最強

いきなり横文字ばかりで恐縮ですが、文系ライターが「一生モノの自分の城」を築くための最終結論はこれです。

  1. Framework: Astro (アストロ)
  2. Hosting: Cloudflare Pages (クラウドフレア ページズ)
  3. Partner: Google Antigravity (グーグル アンチグラビティ)

「なんだか難しそう」と思いましたか？ 大丈夫です。これを「家づくり」に例えてみましょう。

Astro とは？（頑丈なプレハブ工法）

Astroは、「最高に頑丈で、地震に強い家の骨組み」を作るためのツールです。 WordPressなどが「豪華だけど維持費がかかるマンション」だとすれば、Astroは「シンプルだけど一生壊れない、あなただけの平屋」を作ってくれます。余計な機能がない分、とにかく表示が速い（玄関がすぐ開く）のが特徴です。

Cloudflare Pages とは？（無料の土地）

家を建てるには土地が入りますね。ネット上の土地（サーバー）は普通、毎月家賃（サーバー代）がかかります。 しかし、Cloudflare Pagesというサービスは、「静かな住宅街の土地を、なんと無料で貸してくれる」ようなものです。しかも、世界中どこからアクセスしても一瞬で繋がる魔法の土地です。

つまり、「Astroで頑丈な家を作り、Cloudflareという無料の土地に置く」。 これが、維持費0円のカラクリです。

1-2. Vibe Coding（AIとの共創）

「でも、家の設計図なんて書けないよ（プログラミングできないよ）」 そう思うのが普通です。そこで登場するのが、このサイト構築の裏で動いている「Vibe Coding（バイブ・コーディング）」という概念です。

これは「細かい建築作業はAIに丸投げして、人間は『どんな家に住みたいか』だけを語る」という新しい仕事のやり方です。

筆者が使用しているツール: Google Antigravity

本サイトの構築には、Google Deepmindが開発したAI 「Google Antigravity」 を使用しています。 彼は単なるチャットボット（話し相手）ではありません。「あなたの専属の超一流大工さん」です。

「落ち着いた和風の書斎が欲しいな。壁紙は白で、文字は読みやすくして」 そう伝えるだけで、彼はトンカチを振るって、数分でこのサイトの骨組みを組み上げました。 私たち文系ライターこそ、技術の勉強をするのではなく、こうした「腕のいい大工（AI）」への指示の出し方を覚えるべきなのです。

1-3. 文系のための「Astro」超入門

ここで少しだけ、Astroというツールの仕組みをお話しします。 「プログラム」と思わず、「原稿の整理術」だと思って聞いてください。

Astroの世界は、主に3つの「箱」で整理されています。

1. src/pages/ (住所を決める箱)

この箱に入れたファイルが、そのままウェブサイトのページになります。

  • top.astro という紙を置けば、yoursite.com/top というページが生まれます。
  • about.astro を置けば、yoursite.com/about が生まれます。 面倒な登録手続きは一切不要。「置けば、そこがページになる」。直感的ですよね。

2. src/layouts/ (表紙と裏表紙)

ウェブサイトには、どのページにも共通して表示される部分がありますよね？ ヘッダー（上のメニュー）やフッター（著作権表示）です。 これを毎回書くのは大変です。 なので、「共通の枠（レイアウト）」をここに用意しておきます。 「この枠の中に、今日の記事を流し込んで！」と指定するだけで、一瞬で整ったページの出来上がりです。

3. src/components/ (便利なスタンプ)

「詳細はこちらボタン」や「関連記事リスト」など、記事の中で何度も使いたい部品（パーツ）を入れる箱です。 一度作ってしまえば、あとはスタンプを押すようにポンポン配置できます。

ライターであるあなたが主に触るのは、src/content/ (原稿箱) だけです。 「原稿を書く」→「保存する」→「勝手に綺麗なサイトになる」。 この快感は、一度味わうと病みつきになりますよ。

[!TIP] AIへの指示プロンプト：コードの意味が知りたいとき

よくわからないファイルがあったら、AIにこう聞いてみましょう。彼らは教えるのが大好きです。

このファイルの役割を、専門用語を使わずに「家」や「文房具」に例えて解説して。
どこを書き換えたら、画面の何が変わるの？

1-4. コラム：手動で記事を直す・貼り付ける方法

AIに任せてもいいですが、自分で直したほうが早いこともあります。 その方法をメモしておきます。

テキストの直し方

src/content/posts/ の中にある 〜.md というファイルを、ダブルクリックして開いてください。 あとはWord感覚で文章を書き換えて、保存（Macなら Command + S）するだけ。一瞬でサイトに反映されます。

画像の貼り方（バナーなど）

  1. 画像ファイルを用意します（例: photo.jpg）。
  2. プロジェクトの中にある public/images/ フォルダの中に、その画像を入れます。
  3. 記事ファイル（.md）の中に、以下の暗号を書きます。
![写真の説明](/images/photo.jpg)

1-5. 具体的な導入手順（Quick Start）

最後に、もしAIの手を借りずに自分でやってみたい方のために、具体的な手順（呪文）を載せておきます。 黒い画面（ターミナル）にこれを打ち込むだけで、あなたの城作りが始まります。

手順1: Astroプロジェクトの作成

npm create astro@latest

（訳：Astro、最新のセット一式ちょうだい！）

手順2: Tailwind CSSの導入

npx astro add tailwind

（訳：Tailwindっていう、いい感じのデザインツールも追加して！）

手順3: 記事を書く

src/content/posts/ フォルダの中に、テキストファイルを作って文章を書くだけ。 ファイル名の最後（拡張子）は .md にします。これは「Markdown（マークダウン）」という書き方です。

「マークダウン？ 難しそう」と思いましたか？ 逆です。 Wordよりもずっとシンプルで、執筆に集中できる 「書き手のための記法」 です。

  • # 見出し （行頭にシャープと空白）
  • **太字** （星2つで囲む）
  • > 引用 （行頭に大なり記号）

覚えるのはこれだけ。装飾ボタンを押す必要すらありません。 キーボードから手を離さずに、思考のスピードで書き殴れる快感を味わってください。

これで、あなたの言葉は世界中に届きます。