CodexとGitHub Pagesで無料アフィリエイトサイトを作る方法
アフィリエイトを始めるとき、最初に迷うのが「どこにサイトを作るか」です。
WordPressで作るのか。 無料ブログで始めるのか。 noteに書くのか。 SNSだけでやるのか。 それとも、まずは自分でサイトを作るのか。
どれも選択肢としてはあります。
ただ、最初からサーバー代やテーマ代をかけるのが不安な人も多いと思います。
特に、まだジャンルも記事も固まっていない段階で、いきなりお金をかけるのは少し怖いです。
そこで今回使うのが、CodexとGitHub Pages です。
ざっくり言うと、Codexでサイトの土台を作り、GitHub Pagesで無料公開する流れです。
なぜ最初からWordPressではなくGitHub Pagesなのか
WordPressは強いです。
記事管理もしやすいですし、テーマやプラグインも豊富です。 本格的にSEOを狙うなら、将来的にはWordPressを使う選択肢もあります。
ただ、最初の段階では、まだそこまで必要ないと考えています。
最初に必要なのは、完璧なサイトではありません。
必要なのは、以下のような最低限の受け皿です。
- SNSプロフィールから飛ばすページ
- 運営者プロフィール
- 広告・アフィリエイト表記
- 記事一覧
- おすすめツール一覧
- 今後の商品紹介ページ
- 問い合わせ導線
これだけなら、GitHub Pagesで十分です。
むしろ、最初は余計な機能がない方がいいです。
表示が速い。 管理がシンプル。 無料で公開できる。 Codexで修正しやすい。 GitHubで変更履歴も残せる。
このあたりが、今回GitHub Pagesを選ぶ理由です。
GitHub Pagesは何のために使うのか
GitHub Pagesは、ただのプロフィールページを置く場所ではありません。
今回のサイトでは、アフィリエイト事業の母艦として使います。
役割はこうです。
- SNSから来た人の入口になる
- 記事や比較表を置く
- 広告表記をまとめて置く
- ASP審査や提携申請時のメディアになる
- LINE登録や問い合わせへつなげる
- 将来的にテンプレ販売や案件受注にも使う
つまり、SNSだけで終わらせないための受け皿です。
X、TikTok、YouTube Shorts、Instagramで投稿しても、見た人が次に見る場所がなければ、その場で終わってしまいます。
だから、プロフィールリンクの先に、自分のサイトを置いておきます。
Codexは何に使うのか
Codexは、単にページを作るためだけに使うわけではありません。
今回の目的は、サイトを作ることよりも、アフィリエイト運用を仕組み化することです。
Codexには、主に以下のことを頼みます。
- Astroサイトのひな形作成
- 記事一覧ページの作成
- 商品カードの作成
- 広告表記コンポーネントの作成
- SNS用のstartページ作成
- Markdown記事の表示
- 商品データの管理
- 記事からSNS投稿や動画台本へ展開する雛形作成
- リンク切れや未設定リンクのチェック
つまり、毎回手作業でページを増やすのではなく、後から記事や商品を追加しやすい形にしておきます。
今回のサイト構成
今回作るサイトは、以下のような構成にしています。
- トップページ
- SNS向けスタートページ
- プロフィールページ
- 広告・アフィリエイトポリシー
- プライバシーポリシー
- 記事一覧
- AIツール・副業ツール紹介
- 作業環境・ガジェット紹介
- スキルアップ・資格紹介
- エンジニア副業・転職ページ
- 無料テンプレページ
- 問い合わせページ
最初からすべてのページを完成させる必要はありません。
ただ、最初の段階でページの枠だけ作っておくと、後からかなり楽になります。
たとえば、今は「準備中」でも、あとから商品や記事を追加していけばいいです。
記事はMarkdownで管理する
今回のサイトでは、記事をMarkdownで管理します。
たとえば、以下のようなファイルを作ります。
src/content/articles/ai-affiliate-start.md
src/content/articles/codex-github-pages.md
src/content/articles/skillup-sidejob.md
Markdownにしておくと、記事を書くのが楽です。
本文に集中できますし、Codexにも修正を頼みやすいです。
たとえば、
この記事の見出しを整理して
CTAを追加して
関連記事への導線を入れて
AIっぽい表現を自然にして
のように頼めます。
WordPressの管理画面で毎回調整するより、GitHubで記事を管理する方が、今回のような「仕組み化」と相性が良いです。
最初に必要なページ
最初に必要なのは、以下の3つです。
- startページ
- 広告表記ページ
- プロフィールページ
startページは、SNSプロフィールから飛ばす入口です。
ここには、以下を置きます。
- このサイトで発信すること
- まず読んでほしい記事
- 扱うテーマ
- 無料テンプレの案内
- SNSリンク
- 広告ポリシーへのリンク
広告表記ページには、アフィリエイトリンクや広告を含む可能性があることを明記します。
プロフィールページには、過去のアフィリエイト経験や、今はAI・Codex・SNS・LINEを使って仕組み化を進めていることを書きます。
この3つがあるだけで、SNSから来た人に最低限の信頼感を出せます。
いきなりアフィリエイトリンクを貼らなくていい
最初の段階では、アフィリエイトリンクがなくても大丈夫です。
むしろ、最初から売り込み感が強すぎると読まれにくいです。
最初にやるべきなのは、以下です。
- 何を発信するサイトなのかを伝える
- 読者にとって役立つ記事を置く
- SNSから来た人が迷わないようにする
- 後から商品紹介を追加しやすくする
アフィリエイトリンクは、記事や比較表が整ってから追加すれば問題ありません。
ただし、後からリンクを貼る可能性があるページには、最初から広告表記を入れておくと安心です。
Codexに頼むときのポイント
Codexに頼むときは、ただ「サイトを作って」と言うより、目的を伝えた方がいいです。
たとえば、こう伝えます。
このサイトは、SNSから集客して、記事・比較表・LINE登録・アフィリエイトリンクにつなげるための母艦です。
将来的に商品紹介、無料テンプレ、相談導線も増やしたいです。
そのため、記事や商品を追加しやすい構成にしてください。
このように伝えると、Codexも単なる見た目だけでなく、運用しやすい構成を作りやすくなります。
今回の作成手順
流れはこうです。
- GitHubにリポジトリを作る
- Astroプロジェクトをルート直下に作る
- 必要なページを作る
- 記事をMarkdownで入れる
- GitHub Pagesで公開する
- SNSプロフィールにstartページを貼る
- 記事とSNS投稿を増やす
- 案件管理シートを作る
- 商品紹介や比較記事を追加する
- LINE登録導線を作る
最初から全部やろうとすると大変です。
まずは、サイトを公開して、記事を3本入れるところまでで十分です。
この方法が向いている人
この方法が向いているのは、以下のような人です。
- サーバー代をかけずに始めたい
- WordPressで挫折したことがある
- GitHubやコードに少し抵抗がない
- Codexを使って作業を減らしたい
- AI副業やアフィリエイトを仕組み化したい
- SNSからサイトへ誘導する導線を作りたい
- 顔出しなしで発信したい
- 月1〜5万円の副収入を目指したい
逆に、完全にノーコードでやりたい人には、少し難しく感じるかもしれません。
ただ、Codexを使えば、すべてを自分で書く必要はありません。
大事なのは、何を作りたいかを言語化することです。
注意点
GitHub Pagesは便利ですが、万能ではありません。
たとえば、会員ログイン機能やデータベースを使った本格的なWebアプリには向いていません。
問い合わせフォームやLINE登録、決済などは、外部サービスと組み合わせる必要があります。
また、アフィリエイトリンクや広告表記のルールは、ASPやサービスごとに確認が必要です。
Amazon、楽天、A8.net、もしもアフィリエイトなど、それぞれルールがあります。
「無料で作れるから何でもできる」というより、無料で始めるための土台として使うのが現実的です。
まとめ
CodexとGitHub Pagesを使えば、サーバー代をかけずにアフィリエイト用サイトの土台を作れます。
最初に作るべきなのは、完璧なデザインではありません。
必要なのは、以下です。
- SNSから飛ばす入口
- プロフィール
- 広告表記
- 記事一覧
- 商品紹介を追加できる構成
- LINEや問い合わせにつなげる導線
この土台があれば、X、TikTok、YouTube Shorts、Instagramから人を集めて、記事や比較表に誘導できます。
そして、記事が増えてきたら、ASP案件や商品紹介を追加していきます。
最初から大きく作る必要はありません。
まずは無料で小さく作る。 記事を3本入れる。 SNSプロフィールに貼る。 反応を見ながら改善する。
この流れで十分です。
Next Step
案件選定シートを使って、紹介候補を整理する
記事を読んだあとは、紹介したい商品、ASP、広告表記、記事テーマを無料テンプレートで一度見える化しておくと次の作業に進みやすくなります。