GitHub Pages を使うには?

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

公開コンテンツ

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

GitHub の基本設定

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

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

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

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

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

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

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

Note: コマンドラインに不安がある場合は、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 main
    
  4. ここで、リポジトリーの GitHub Pages を有効にする必要があります。これを行うには、リポジトリーのトップページから Settings を選び、左のサイドバーから Pages を選択します。 Source の下にある "main" ブランチを選びます。ページが更新されるはずです。
  5. GitHub Pages セクションに再度アクセスすると、Your site is ready to be published at https://xxxxxx. という行が表示されるはずです。
  6. この URL をクリックすると、ホームページが index.html という名前であれば、例のライブバージョンに移動するはずです - このエントリーポイントに既定値で移動します。もし、あなたのサイトのエントリーポイントが何か別のもの、例えば myPage.html と呼ばれている場合は、 https://xxxxxx/myPage.html にアクセスする必要があります。

GitHub の詳細

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

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

another commit をより適切なメッセージに置き換えることで、今何を変更したかを記述することができます。

私たちは、Git の表面に触れたにすぎません。詳細については、 Git と GitHub を参照してください。