GitHub Pages の使い方

  1. ウェブの仕組み
    1. URL とは何か
    2. インターネットの仕組み
    3. ウェブサーバーとは
    4. ドメイン名とは
    5. ハイパーリンクとは
  2. ツールとセットアップ
    1. GitHub Pages の使い方
    2. Google App Engine を使ってウェブサイトを公開する方法
    3. ウェブサーバーにファイルをアップロードするには
    4. ウェブサイトが正しく動作することを確認するには
    5. ウェブサイトを作るのにどんなソフトウェアが必要か
    6. ウェブで何かするのにかかるコスト
    7. どんなテキストエディターが利用できるか
    8. ブラウザーの開発者ツールとは
    9. ローカルテストサーバーを用意するには
  3. デザインとアクセシビリティ
    1. アクセシビリティとは
    2. アクセシビリティを推進する HTML の機能
    3. ウェブサイトのデザインは何から始めればよいか
    4. すべての種類のユーザーのためにデザインするには
    5. 一般的なウェブレイアウトには何が含まれているのか
  4. よくある CSS の問題の解決
    1. CSS の一般的な質問
    2. CSS 生成コンテンツの使用
    3. アイテムを中央揃えするには
    4. テキストに影を追加するには
    5. ポインターを当てるとボタンの色を変えるには
    6. ボックスを半透明にするには
    7. 最初の段落を強調表示するには
    8. 段落の最初の行を強調するには
    9. 画像を歪ませずにボックスを埋めるには
    10. 装飾的なボックスの作成
    11. 要素に影を追加するには
    12. 見出しの直後に来た段落を強調表示するには
  5. よくある HTML の問題の解決
  6. よくある JavaScript の問題の解決

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 というディレクトリーに配置した場合は、次のように入力します。

    bash
    cd Desktop/test-site
    
  2. コマンドラインがウェブサイトのディレクトリー内を指しているときに、次のコマンドを入力します。これは git ツールに、そのディレクトリーを git リポジトリーにするように指示するものです。

    bash
    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 のヘッダーの下に検索バーとリポジトリーのプルリクエストや課題、 gist へのナビゲーションリンクが表示されます。ナビゲーションリンクの隣には、ベルによる通知とアカウントへのリンクがあります。以下、所有者のリポジトリーの名前とスラッシュが続きます。リポジトリー関連の様々なタブで構成された水平のナビゲーションバーの下には、コードタブが選択され、リポジトリーの作成方法やコマンドラインを使用してプッシュする方法を説明するドキュメントが表示されます。

GitHub へのファイルのアップロード

  1. 現在のページのこの節、既存のリポジトリーをコマンドラインからプッシュすることに興味があるわけですね。この節に 2 行のコードが並んでいるはずです。最初の行全体をコピーしてコマンドラインに貼り付け、 Enter キーを押してください。コマンドは次のようなものです。

    bash
    git remote add origin https://github.com/chrisdavidmills/my-repository.git
    
  2. 次に、次の 2 つのコマンドを入力して、それぞれの後に Enter キーを押します。これらは、コードを GitHub にアップロードする準備をし、これらのファイルを管理するように Git に依頼するものです。

    bash
    git add --all
    git commit -m 'adding my files to my repository'
    
  3. 最後に、表示されている 2 つのコマンドの内、2 番目のコマンドを端末に入力する、または、コマンドラインセクションから既存のリポジトリーをプッシュして」、コードを GitHub にプッシュします。

    bash
    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 にそれらの変更をプッシュする必要があります。

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

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

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