GitHub Pagesで簡単なWebページを公開するまでの手順まとめ

GitHub Pagesで簡単なWebページを公開するまでの手順まとめ

GitHubのアカウントを持っていれば[アカウント名].github.ioというリポジトリを作るだけで簡単なWebページを公開出来る

ということはなんとなく知っていたのですが、なかなか使い道が思い当たらなくて使っていなかったGitHub Pagesを使いタイミングが来たので、使ってみました

今回はGitHub PagesでWebページを公開するまでの手順備忘録です。

GitHub Pagesで簡単なWebページを作る

簡単な自己紹介ページのようなものを以前作りかけただけで、結局活用できていなかったGitHub Pagesですが、

「せっかくならこれから作ろうとしている物の一部を静的なページとしてGitHub Pagesでも公開してみよう!」

と思いついて、GitHub PagesでHTML・CSS・JavaScriptを使って簡単なWebページを作ってみました。

「とりあえず公開する」部分までそれほど難しくはありませんが、備忘録がてら手順をまとめました!

[アカウント名].github.ioリポジトリを作る

まずは[アカウント名].github.ioという名前のリポジトリを作ります
※[アカウント名]部分はご自身のアカウント名に変えてください

GitHub Pages用リポジトリを作成する

僕の場合はyosiakatsuki.github.ioです。

ローカルにクローンする

GitHub上にリポジトリを作れたら、ローカルにクローンしてきます

$ git clone [アカウント名].github.io

ファイルを作成する

Webページとして公開するためにindex.htmlを作成します。

$ cd [アカウント名].github.io
$ echo "hello world" > index.html

まずは簡単なファイルで作成します。

hello worldだけだと味気ない場合は出来たHTMLファイルをちょっと編集しておくと良いと思います。

ファイル編集したファイルをpushする

追加・編集したファイルをGitHubにpushします

$ git add .
$ git commit -m "initial commit"
$ git push -u origin master

ページ確認!

無事GitHub Pagesでページを公開できました!

pushが完了したらhttps://[アカウント名].github.ioにアクセスしてみます。
(僕の場合は https://yosiakatsuki.github.io になります)

ページが表示されていれば完了です!

ちなみに僕がやったときはページが公開されるまで少し時間がかかりました(?)

なかなか公開されないときは何度かpushしてみて下さい。(2回目のcommit & push後に表示されました)

公式ドキュメント

今回は以下の公式ドキュメントを参考にしました。▼

その他のドキュメントはこちら▼

あとでプロジェクトのGitHub Pages作成にもトライしてみようと思います。