files/ja/learn/common_questions/using_github_pages/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

---
title: GitHub Pagesを使うには？
slug: Learn/Common_questions/Using_Github_pages
tags:
  - Beginner
  - GitHub
  - Guide
  - Web
  - gh-pages
  - git
  - publish
translation_of: Learn/Common_questions/Using_Github_pages
---
<p class="summary"><a href="https://github.com/">GitHub</a> は "ソーシャル・コーディング" のサイトです。<a href="http://git-scm.com/">Git</a> <strong>バージョン管理システム</strong>のストレージに対して、ソースコードリポジトリーのアップロードを許可します。その後、コードプロジェクトで共同作業を行うことができます。また、システムはオープンソースに自動設定されています。つまり、世界中の誰もが GitHub コードを検索・使用また、そこから学習しコードを改善することができます。他の人のコードでもそれが可能です！この記事は Github の gh-pages 機能を使って、公開コンテンツに関する基本的なガイドを提供します。</p>

<h2 id="Publishing_content" name="Publishing_content">公開コンテンツ</h2>

<p>GitHub は非常に重要で役に立つコミュニティの一つで、Git / GitHub は非常に人気のある<a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">バージョン管理システム</a>です。現在、ほとんどのハイテク企業がワークフローでそれを使用しています。GitHub は <a href="https://pages.github.com/">GitHub ページ</a>と呼ばれる非常に便利な機能を持っています。これはあなたがウェブ上にライブでウェブサイトのコードを公開することを可能にします。</p>

<h3 id="Basic_Github_setup" name="Basic_Github_setup">Github の基本設定</h3>

<ol>
 <li>初めに、システムに <a href="http://git-scm.com/downloads">Git をインストール</a>してください。これは GitHub が動作する基盤となるバージョン管理システムのソフトウェアです。</li>
 <li>次に、<a href="https://github.com/join">GitHub アカウント</a>に<a href="/ja/docs/">サインアップ</a>します。それは単純かつ簡単です。</li>
 <li>サインアップしたら、ユーザー名とパスワードを使って <a href="https://github.com">github.com</a>  にログインします。</li>
</ol>

<h3 id="Preparing_your_code_for_upload" name="Preparing_your_code_for_upload">ソースコードのアップロード準備</h3>

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

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

<ol>
 <li>コマンドラインで <code>test-site</code> のディレクトリー (またはウェブサイトを含むディレクトリーと呼んだもの) を指定します。これには、<code>cd</code> コマンドを使用します (つまり、「ディレクトリーの変更」)。ウェブサイトをデスクトップの <code>test-site</code> というディレクトリーに配置した場合は、次のように入力します:

  <pre class="brush: bash">cd Desktop/test-site</pre>
 </li>
 <li>コマンドラインが、あなたのウェブサイトディレクトリーの中を指しているとき、ディレクトリーを git リポジトリにそのまま変えるように <code>git</code> ツールに指示する、次のコマンドを入力してください:
  <pre class="brush: bash">git init</pre>
 </li>
</ol>

<h4 id="An_aside_on_command_line_interfaces" name="An_aside_on_command_line_interfaces">コマンドラインインターフェイスの余談</h4>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>

<div class="note">
<p><strong>補足: </strong>コマンドラインに不安がある場合は、<a href="/ja/docs/">Git グラフィカルユーザーインターフェイス</a>を使用して、同じ作業を行うことも検討できます。</p>
</div>

<p><span id="command-line">すべてのオペレーティングシステムには、コマンドラインツールが付属しています：</span></p>

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

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

<h3 id="Creating_a_repo_for_your_code" name="Creating_a_repo_for_your_code">ソースコードのリポジトリの作成</h3>

<ol>
 <li>次に、ファイルを保存するための新しいリポジトリーを作成する必要があります。GitHub ホームページの右上にあるプラス (+) をクリックしてから、<em>新しいリポジトリー</em> を選択します。</li>
 <li>このページの <em>リポジトリー名ボックス</em> に、ソースコードのリポジトリー名 (例: <em>my-repository</em>) を入力します。</li>
 <li>また、説明を入力することで、リポジトリーに何を格納しようとしているのかを記述します。画面は次のようなものです：<br>
  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
 <li><em>Create repository</em> をクリックします。これにより、次のページに移動します:<br>
  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
</ol>

<h3 id="Uploading_your_files_to_GitHub" name="Uploading_your_files_to_GitHub">GitHub へのファイル格納</h3>

<ol>
 <li>現在のページで、あなたはセクションに興味を持っています... <em>または、コマンドラインから既存のリポジトリーをプッシュします。</em>このセクションに 2 行のコードがリストされているはずです。最初の行全体をコピーしてコマンドラインに貼り付け、Enter キーを押します。コマンドは次のようなものです:

  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre>
 </li>
 <li>次に、以下の 2 つのコマンドを入力し、それぞれの後に Enter キーを押します。これらは GitHub にアップロードするためのコードを用意し、Git にこれらのファイルを管理するように依頼します。
  <pre class="brush: bash">git add --all
git commit -m 'adding my files to my repository'</pre>
 </li>
 <li>最後に、表示されている 2 つのコマンドの内、2 番目のコマンドを端末に入力する「または、コマンドラインセクションから既存のリポジトリーをプッシュして」、コードを GitHub にプッシュします：
  <pre class="brush: bash">git push -u origin master</pre>
 </li>
 <li>ここで、リポジトリーの gh-pages ブランチを作成する必要があります。現在のページを更新すると、以下のようなリポジトリページが表示されます。<em>Branch: <strong>master</strong></em> というボタンを押し、テキスト入力に <em>gh-pages</em> と入力してから <em>Create branch: gh-pages</em> という青いボタンを押す必要があります。これにより、gh-pages という特別な場所に公開されている、特別なコードブランチが作成されます。URL は、<em>username.github.io/my-repository-name</em> の形式を取ります。したがって、この例の場合、URL は <em>https://chrisdavidmills.github.io/my-repository</em> になります。表示されているページは index.html ページです。<br>
  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li>
 <li>新しいブラウザータブで、GitHub Pages のウェブアドレスに移動すると、サイトがオンラインなります！友人にそれを電子メールで送って、あなたの習熟を披露してください。</li>
</ol>

<div class="note">
<p><strong>注</strong>: 困った場合は、<a href="https://pages.github.com/">GitHub Pages ホームページ</a>も大いに役立ちます。</p>
</div>

<h3 id="Further_GitHub_knowledge" name="Further_GitHub_knowledge">GitHub の詳細</h3>

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

<pre>git add --all
git commit -m 'another commit'
git push</pre>

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

<p>私たちは、Git の表面を引っ掻いてみたにすぎません。詳細については、<a href="https://help.github.com/index.html">GitHub ヘルプサイト </a>から始めてください。</p>