このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

GitHub Pagesを使うには？

GitHub は "ソーシャル・コーディング" のサイトです。Git バージョン管理システムのストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です！この記事は Github の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。

公開コンテンツ

GitHub は非常に重要で役に立つコミュニティの一つで、Git / GitHub は非常に人気のあるバージョン管理システムです。現在、ほとんどのハイテク企業がワークフローでそれを使用しています。GitHub は GitHub ページと呼ばれる非常に便利な機能を持っています。これはあなたがウェブ上にライブでウェブサイトのコードを公開することを可能にします。

Github の基本設定

  1. 初めに、システムに Git をインストールしてください。これは GitHub が動作する基盤となるバージョン管理システムのソフトウェアです。
  2. 次に、GitHub アカウントにサインアップします。それは単純かつ簡単です。
  3. サインアップしたら、ユーザー名とパスワードを使って github.com  にログインします。

ソースコードのアップロード準備

GitHub リポジトリーに好きなコードを保存できますが、GitHub ページ機能を最大限に活用するには、コードを典型的なウェブサイトとして構成する必要があります。主なエントリーポイントは、index.html という HTML ファイルです。

次に進む前に、自身のコードディレクトリーを Git リポジトリとして初期化する必要があります。このために、以下のことを実行してください:

  1. コマンドラインで test-site のディレクトリー (またはウェブサイトを含むディレクトリーと呼んだもの) を指定します。これには、cd コマンドを使用します (つまり、「ディレクトリーの変更」)。ウェブサイトをデスクトップの test-site というディレクトリーに配置した場合は、次のように入力します: 
    cd Desktop/test-site
  2. コマンドラインが、あなたのウェブサイトディレクトリーの中を指しているとき、ディレクトリーを git リポジトリにそのまま変えるように git ツールに指示する、次のコマンドを入力してください: 
    git init

コマンドラインインターフェイスの余談

Github にコードをアップロードする最良の方法は、コマンドラインを使用することです。これは、ユーザーインターフェイス内をクリックするのではなく、ファイルを作成・プログラム実行のような動作のためのコマンドを入力するウィンドウです。それは次のようなものです:

補足: コマンドラインに不安がある場合は、Git グラフィカルユーザーインターフェイスを使用して、同じ作業を行うことも検討できます。

すべてのオペレーティングシステムには、コマンドラインツールが付属しています：

  • Windows: Windows のキーを押して、コマンドプロンプトと入力し、表示されるリストから選択すると、コマンドプロンプトにアクセスできます。Windows は、Linux や OS X とは異なる、独自のコマンド規約を持っているので、下記のコマンドは、あなたのマシンでは異なるかもしれません。
  • OS X: ターミナルは、アプリケーション > ユーティリティにあります。
  • Linux: 通常、Ctrl + Alt + T で端末を起動できます。それでもうまくいかない場合は、アプリバーまたはメニューでターミナルを探します。

これには最初は、少し戸惑うかもしれませんが、心配しないでください — すぐに基本のコツをつかむでしょう。上記のようにコマンドを入力して、Enter キーを押すことで、端末で動作するようにコンピューターに指示します。

ソースコードのリポジトリの作成

  1. 次に、ファイルを保存するための新しいリポジトリーを作成する必要があります。GitHub ホームページの右上にあるプラス (+) をクリックしてから、新しいリポジトリー を選択します。
  2. このページの リポジトリー名ボックス に、ソースコードのリポジトリー名 (例: my-repository) を入力します。
  3. また、説明を入力することで、リポジトリーに何を格納しようとしているのかを記述します。画面は次のようなものです：
  4. Create repository をクリックします。これにより、次のページに移動します:

GitHub へのファイル格納

  1. 現在のページで、あなたはセクションに興味を持っています... または、コマンドラインから既存のリポジトリーをプッシュします。このセクションに 2 行のコードがリストされているはずです。最初の行全体をコピーしてコマンドラインに貼り付け、Enter キーを押します。コマンドは次のようなものです: 
    git remote add origin https://github.com/chrisdavidmills/my-repository.git
  2. 次に、以下の 2 つのコマンドを入力し、それぞれの後に Enter キーを押します。これらは GitHub にアップロードするためのコードを用意し、Git にこれらのファイルを管理するように依頼します。 
    git add --all
git commit -m 'adding my files to my repository'
  3. 最後に、表示されている 2 つのコマンドの内、2 番目のコマンドを端末に入力する「または、コマンドラインセクションから既存のリポジトリーをプッシュして」、コードを GitHub にプッシュします： 
    git push -u origin master
  4. ここで、リポジトリーの gh-pages ブランチを作成する必要があります。現在のページを更新すると、以下のようなリポジトリページが表示されます。Branch: master というボタンを押し、テキスト入力に gh-pages と入力してから Create branch: gh-pages という青いボタンを押す必要があります。これにより、gh-pages という特別な場所に公開されている、特別なコードブランチが作成されます。URL は、username.github.io/my-repository-name の形式を取ります。したがって、この例の場合、URL は https://chrisdavidmills.github.io/my-repository になります。表示されているページは index.html ページです。
  5. 新しいブラウザータブで、GitHub Pages のウェブアドレスに移動すると、サイトがオンラインなります！友人にそれを電子メールで送って、あなたの習熟を披露してください。

注: 困った場合は、GitHub Pages ホームページも大いに役立ちます。

GitHub の詳細

テストサイトにさらに変更を加えて、GitHub にアップロードしたい場合は、以前と同じようにファイルに変更を加えるだけです。それから、以下のコマンドを入力して (それぞれ Enter キーを押して) GitHub にそれらの変更をプッシュする必要があります:

git add --all
git commit -m 'another commit'
git push

another commit をより適切なメッセージに置換して、今行った変更を説明できます。

私たちは、Git の表面を引っ掻いてみたにすぎません。詳細については、GitHub ヘルプサイト から始めてください。