View on GitHub

codex-github-pages

Codex CLIでWebサイトを作成する

Codex CLIのインストールが完了したら、実際にWebサイトを作っていきましょう。

Codexに依頼する

Codex CLIに対する入力と、ターミナル上で入力するコマンドを区別するため、今後、Codex CLIに対する入力にはuser>を先頭に付けて記述します。

user> ここにCodexへのメッセージ、プロンプトが入ります。

注: 上の user> は資料上の記法です。実際のCodex CLIには user> を付ける必要はありません。

では、早速CodexにHTMLファイルを作ってもらいましょう。

user> このリポジトリは、GitHub Pagesで公開する自分のWebサイトです。index.htmlを新規作成し、シンプルなHTMLを用意してください。

Codex HTML

HTMLページを確認する

作成したHTMLページの内容を確認してみましょう。 まずはじめに、新しいターミナルの画面を作成します。

ターミナルの右上の「＋」を押します。

codespace-bash

bashと表示されて新しい画面になったことを確認します。ここで以下のpythonコマンドを入力します。

bash-new

ターミナルで以下のコマンドを入力してください。

python3 -m http.server 5500

HTTP

ブラウザーで開く をクリックすると、現状のHTMLファイルが確認できます。 もしくはターミナル上のhttp://0.0.0.0:5500/を、Macであれば⌘+クリック、WindowsであればCtrl+クリックで開くことができます。

このPythonコマンドでは簡易なWebサーバーを立ち上げ、今いるフォルダーの中身をHTTPで配信しています。 停止するには、サーバーを起動しているターミナルで Ctrl + C を押してください。

【トラブルシュート】

Codex CLIとターミナルの切り替え

Codex CLIに自然言語で依頼をする場所と、ターミナルでコマンドを入力する場所は異なります。

npmやnodeと表示されることがあるタブがCodex CLI（対話用）で、bashと書かれているタブが通常のターミナル（コマンド実行用）です。 user>と先頭に書かれている文書/指示はCodex CLIに入力し、それ以外のコマンドはターミナル上で入力・実行します。

Codex NPM Codex CLIが開かれている状態

HTMLファイルをコミットする

Gitでは「変更を記録する」作業をコミットと呼びます。 ここでは、Codex CLIが作成したindex.htmlをGitHubへアップロードするまでの流れを説明します。

まず、gitコマンドを入力するために、先ほど作成したターミナルの画面で以下を入力します。

bash new

  1. 変更内容を確認する

    git status
    • 追加・更新されたファイルが赤字で表示されていればOKです。

  2. ステージに追加する

    git add index.html        # 1つだけ追加

    または

    git add .                 # 現在のディレクトリ以下をまとめて追加

    git statusをもう一度実行すると、追加したファイルが緑色に変わります。これで「コミット候補」になりました。

  3. コミットを作成する

    git commit -m "Add initial index.html"
    • -mオプションで「何をしたか」を1行で書きます。
    • 後から見返すときに分かりやすいよう、内容を簡潔にまとめましょう。

  4. リモート（GitHub）へ反映（プッシュ）する

    git push -u origin main
    • -uを付けておくと、次回以降はgit pushだけで済みます。
    • GitHubでリポジトリを開き、index.htmlがアップロードされていれば成功です。
    • pushに失敗する場合は、リモート設定（git remote -v）とブランチ名（main）を確認してください。

git-img

ここまでの流れのおさらい

git add .
git commit -m "Add initial site"
git push -u origin main

ポイント

  • add → commit → push の3段階を覚えれば、基本操作は大丈夫です。
  • こまめなコミットは「戻れるポイント」を増やせるので、失敗しても安心です。

Codex CLIを使ってGit操作を行う

Gitは バージョン管理において必ず覚えておきたい操作 ですが、 毎回 git add . → git commit → git push して、毎回メッセージを書くのは少し面倒ですよね。 そこで、Git操作にもCodex CLIを使ってみましょう。

まずは適当なファイルの変更をする

Codespacesの左側のファイルエクスプローラーを開き、先ほど作成されたHTMLファイルをクリックして開きます。

Change Title

おそらく <title></title> で囲われた部分があると思います。

その部分を手動で以下のように変更します（「私のWebページ」の部分は他の内容でも構いません）。

<title>私のWebページ</title>

これで変更は完了です。次に、Codex CLIで変更をGitで管理しましょう。

1行でpushまでを丸投げ

次のように依頼をすると、今回のファイル変更を一連の流れで git add, git commit, git push まで行うことができます。

user> 変更を確認してpushしてください

Codex git add

Pushにはネットワークアクセスが必要なため、Codexが許可を求めてきています。 1. Yes, proceedを選択し、Pushしましょう。

Codex commit push

これでadd, commit, pushまで完了です。

ポイント Codex CLIは 「ユーザーの意図 → 具体的なGitコマンド」 を橋渡ししてくれます。 コマンドの暗記やタイプミスに悩まされず、作業スピードも向上します（ただし、最低限 add・commit・push は覚えておきましょう）

これで Git の日常的なルーチン作業はほぼ Codex CLI に任せられます。 浮いた時間と集中力を コンテンツ制作やデザイン改善 に充てましょう。

VSCodeのGUIを使ったGit操作

VSCode（GitHub Codespaces上で動いているエディター）は開発のための様々な便利を備えています。 VSCode上のボタンを操作することでも、git add, git commit, git pushは簡単にできます。

Add

左側の虫眼鏡の下にある、丸が繋がっているようなアイコンを押すと、このような表示になります。 もしコードに変更が加えられている場合、Changesの下に、変更済みのファイルが一覧で出てきます。

Changesの右にある+ボタンを押すと、変更があったファイルを全てaddすることができます。

add-vs

Commit

Addすると、Staged ChangesにAddしたファイルが追加されているのが確認できます。 ステージに追加されたファイルをコミットするには、コメント（どんな変更をしたか）が必要なので、 Changesの下にある入力欄にコメントを入力します。

入力したら、✅Commitを押して、コミット完了です。

commit-vs

Push

コミットまでできれば、あとは簡単です。 Sync Changesを押せば、リモートのGitHubリポジトリに変更を同期できます。

push-vs

前へ → 開発環境の準備 次へ → GitHub Pages へデプロイ 目次へ → ホーム