Help us understand the problem. What is going on with this article?

(初心者向け)GitHub Pagesで自作のホームページを公開してみる。

More than 1 year has passed since last update.

自作のホームページを簡単に公開

htmlやCSSを学んで使ってみたいものの、公開するために自分でサーバーを用意するのは面倒。。。
ということで、今回は無料でホスティングできるサービス、Github Pagesを利用してみた。

(てか、このリンクだけで簡単にできるなーと後から見て思いました。。汗)

GitHubのアカウントを用意

まだアカウントを持っていない人はこちらでサクッと
GitHubアカウント作成とリポジトリの作成手順

公開用のリポジトリを作成

新規のリポジトリを作成します。アクセス権限は外部に公開するんでPublicにしましょう。
リポジトリの名前は今回は「myPage」にしました。

スクリーンショット 2019-04-23 18.08.51.png

リポジトリが完成。今はまだ何もないので、「新しくファイルを作成するか、ファイルをアップロードしてね。」なんて言われてます。

スクリーンショット 2019-04-23 18.28.44.png

ローカルディレクトリにmyPageのリポジトリをクローン

コマンドプロンプトから、作成したリポジトリをローカル環境にクローンします。
git clone [作成したリポジトリのURL]

もちろんまだクローンしたディレクトリには何もファイルがありません。
表示させたいホームページとしてサンプル用のindex.htmlを作成しておきます。
こんな感じ

index.html
<html>
<head>
<meta charset="utf-8">
<title>Welcome to myPage</title>
</head>
<body>
Hello World!
</body>
</html>

クローンしたディレクトリの直下に置いておく。

SourceTreeによるリポジトリの管理

せっかくだから、SourceTreeのGUIを使ってリポジトリを管理してみる。

SourceTreeはGitの無料クライアントアプリで、Gitのコマンドがよく分からんという人でも簡単に扱えると思います。

インストール方法はこちらから
SourceTreeのダウンロードとインストール方法

スクリーンショット 2019-04-23 18.31.10.png

[既存のローカルリポジトリを追加]
より、先程クローンしたディレクトリを追加する。

スクリーンショット 2019-04-23 18.32.04.png

管理中のリポジトリとして追加されましたね。

myPageのリポジトリを選択してやると、

スクリーンショット 2019-04-23 18.32.38.png

ちゃんと作成したindex.htmlがリモートリポジトリとの差分として反映されているのが分かります。
早速コミットしてあげましょう!

スクリーンショット 2019-04-23 18.34.40.png

ちゃんとGitHub上でもコミットが確認できました。

GitHub Pagesの設定

では、公開したいページをコミットできたので、GitHub Pagesの設定に移りましょう。

リポジトリの右上にあるSettingsのタブを選択します。
中程の「GitHub Pages」の項目からSourceを選択します。

[None] -> [master branch]を選んであげましょう。

スクリーンショット 2019-04-23 18.37.07.png

あとは、Web上で
https://[アカウント名].github.io/[リポジトリ名]

と入力してやると、、、

スクリーンショット 2019-04-23 18.40.20.png

先ほど作成したindex.htmlが表示されましたね!

SourceTreeでコードを修正→コミット。GitHub上で確認。。。
差分管理もバッチリですね。

もちろん、GitHub上でコードを修正していくことも可能です。

つぶやき

HPを作成・公開するためにトライアルでGitHub Pagesを使ってみました。
ただ、当人はhtmlの知識もCSSの知識もまだまだ不足している模様です。。。

suke0204
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away