制作費0円・年額10ドルの個人サイトを作る方法!〜Astro × Cloudflareで制作から運用まで〜

• 南1-2ホール | R-23 (評論・研究|技術)
• せいさくひぜろえんねんがくじゅうどるのこじんさいとをつくるほうほうあすとろくるどふれあでせいさくからうんようまで
• 万灯あお
• 書籍|B5
• 76ページ
• 1,500円
• 2026/11/8(日)発行

• 内容

  
  趣味の活動に関する情報を発信するのに、SNSでは物足りない……。
  
  でも、「個人サイト」で検索すると年額1万円以上すると書いてある……。
  
  いえいえ、もっと安く個人サイトを制作・運用する方法がありますよ！
  
  本書では、初心者でも低コストで個人サイトを制作・公開・運用できる方法を紹介する同人誌です。
  
  個人サイト制作の全体像を把握し、不要な試行錯誤を減らすトピックを掲載しています。
  
  本書で紹介する以下の技術・サービスを組み合わせることで、制作費0円・公開費0円・運用費年額10ドルの個人サイトを作れます。独自ドメインを諦めれば運用費も0円になりますよ。
  
  ・Astro
  
  ・デジタル庁デザインシステム
  
  ・Cloudflare Pages
  
  ・Cloudflare Registrar
  

  目次

  
  まえがき ……1
  
  目次 ……4
  
  第1章 なぜ個人サイトを作るのか …… 6
  
  1.1 散らばった情報をまとめたい …… 6
  
  1.2 リンクサイトでは情報量が足りない …… 7
  
  1.3 プラットフォーマーに縛られたくない …… 7
  
  1.4 特定のサービスに依存したくない …… 7
  
  1.5 だから個人サイトを選ぶ …… 8
  
  1.6 個人サイトのデメリット …… 9
  
  1.7 お金が掛かる …… 9
  
  1.8 SEO 対策が必要 …… 10
  
  コラム Webサイトにアクセスするルート …… 11
  
  1.9 ソースコードを書く必要がある …… 11
  
  1.10 まとめ …… 12
  
  第2章 技術選定 …… 13
  
  2.1 Webサイトはどうやってできている？…… 13
  
  2.2 HTML …… 13
  
  2.3 CSS …… 14
  
  2.4 JavaScript ……14
  
  2.5 画像ファイル ……14
  
  2.6 ホスティングサービスと独自ドメイン ……17
  
  2.7 選択したサービス（技術スタック） ……18
  
  2.8 Astro：HTMLの作成を簡単に ……18
  
  2.9 デジタル庁デザインシステム：Webサイトのデザインテンプレート …… 20
  
  2.10 Cloudflare Pages：基本無料のホスティングサービス ……22
  
  2.11 Cloudflare Registrar：年額10ドルでドメイン契約 ……23
  
  2.12 まとめ ……26
  
  第3章 個人サイトの作り方 …… 27
  
  3.1 Astroの使い方 …… 27
  
  コラム：Astroファイルの作り方 …… 29
  
  3.2 用語の定義 …… 29
  
  3.3 フォルダーの説明 …… 29
  
  コラム：HTMLの基礎 …… 31
  
  3.4 他のファイルやAstroコンポーネントを読み込む …… 31
  
  3.5 Astroコンポーネントの使い方 …… 32
  
  3.6 Astroコンポーネントの使い方（発展） …… 32
  
  コラム：コメントの書き方 …… 34
  
  3.7 画像の入れ方 …… 34
  
  3.8 Markdownファイルの使い方 …… 35
  
  3.9 自動で記事一覧ページを作る …… 37
  
  3.10 head情報 …… 42
  
  3.11 デジタル庁デザインシステムの使い方 …… 47
  
  3.12 global.cssの追加 …… 48
  
  3.13 レスポンシブデザインのやり方 …… 48
  
  コラム：CSSの順番 …… 49
  
  3.14 各コンポーネントの説明 …… 49
  
  3.15 ダークモードの対処 …… 55
  
  3.16 年齢確認機能 …… 55
  
  3.17 RSS …… 58
  
  3.18 Astroでbuild …… 64
  
  3.19 まとめ …… 66
  
  第4章 個人サイトを公開・運用する …… 67
  
  4.1 Cloudflare Pagesにアップロード …… 67
  
  4.2 サイトの更新を行う方法 …… 67
  
  4.3 Cloudflare Pagesの制限 …… 68
  
  4.4 Cloudflare Registrarでドメイン契約 …… 68
  
  4.5 Cloudflare Pagesで独自ドメイン（カスタムドメイン）を設定する …… 68
  
  コラム：サブドメイン …… 69
  
  4.6 CloudflareのWeb分析 …… 69
  
  4.7 Google Analytics …… 70
  
  4.8 Google Search Console …… 71
  
  4.9 まとめ …… 74
  
  参考文献 …… 74
  
  あとがき …… 75