16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

GitHub を使って3分でWebサーバーを作る

Posted at

概要

GitHub Pages を使うことでWebサーバーを無料で簡単に構築できます。
構築手順について記載しておきます。

簡単なので3分もあれば完成します。

手順

1. GitHubへログインする

GitHub へログインします。
GitHub のアカウントを持っていない場合は Sign up してください。

01.png

2. リポジトリーの作成

左側の Repositories から New ボタンをクリックします。

02.png

Repository nameユーザー名.github.io を入力します。
入力したら Create repository ボタンをクリックします。

03.png

3. リポジトリーのクローン

ユーザー名.github.io のリポジトリーが作成されました。
Quick setup のところにあるクローン用のURLをクリップボードへコピーします。

04.png

リポジトリーを任意のフォルダーへクローンします。
TortoiseGit を利用してクローンする場合はエクスプローラーの任意のフォルダーで右クリックメニューを表示して Git Clone... をクリックします。

GitHub でコピーしたクローン用のURLを URL へ入力し、 Directory にはクローン先の任意のフォルダーを入力して OK ボタンをクリックします。

05.png

GitHub からリポジトリーがクローンされます。

06.png

4. HTMLファイルの作成

クローンしたフォルダーに index.html を作成します。
サンプルとしてJavaScriptのアラートと文字列を表示するようにします。

index.html
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
<script type="text/javascript">alert('Hello World');</script>
</body>
</html>

index.html を作成したらファイルを選択して右クリックメニューから Add... をクリックします。

5. ファイルのコミットとプッシュ

作成した index.html をコミットしてGitHubへプッシュします。
エクスプローラーの右クリックメニューから Git Commit -> "master"...` をクリックします。

LocalRemotemaster になっていることを確認して OK ボタンをクリックします。

07.png

続けてGitHubのログイン認証が求められます。
ユーザー名とパスワードを入力します。

08.png

TortoiseGit からもユーザー名とパスワードが求められるので入力します。

09.png
10.png

認証に成功するとGitHubへプッシュされます。

11.png

6. Webブラウザーでアクセス

Webブラウザーから https://ユーザー名.github.io へアクセスしてみます。
JavaScriptのアラートとHello Worldの文字が表示されることが確認できました。

12.png

GitHub PagesでWebサーバーが簡単に構築できました。

16
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?