概要

このエントリが対象とするのは主にWebデザイナーやフロントエンドエンジニア、ホリデープログラマーであり、GitHubを使って簡単にポートフォリオサイト等を公開する方法を紹介する。

※このエントリは次の自エントリの日本語版です。
How to Release Your WebSite on GitHub – Medium

参考

2016年新機能! GitHubのmasterブランチをWebページとして公開する手順 - Qiita

目標

このエントリのゴールはGitHubリポジトリのmasterブランチを次のようなURLで公開することである。
http：//{accountName}.github.io /{repositoryName}/

なぜgithub.ioを用いるか？

Webサイトを公開する際、レンタルサーバー×独自ドメインというのが少し前までのトレンドとしてあったように思う。
ただ、Webデザイナー（あるいはフロントエンドエンジニアも）にとってレンタルサーバー（AWS含む）と独自ドメインを管理する労力や金銭負担は小さくないし、CMSを使わずポートフォリオサイトを作るだけならレンタルサーバーやAWSはオーバースペックだ。
また、github.ioで公開することによって、「GitHub使ってますよ」アピールやGitを使う練習ができることはとても有益だと思う。

必要なもの

GitHubアカウント
Gitを扱えるアプリケーション（GUIで十分）
Webページを構築するアプリケーション

GitHubでWebサイトを公開する5ステップ

1. index.htmlを作る

慣れた方法でindex.htmlを作る（画像ではAtom使用）。

2. GitHubリポジトリへコミット

git-commitしてGitHubに連携する（画像ではGitHub-Desktop使用）。

3. GitHubリポジトリの設定を変更する

GitHubリポジトリのWebページを開いて、
[Setting]>[GitHub Pages]>[Source]を「master branch」に変更する。
もちろん、リポジトリ内にdocsディレクトリを切って、そちらをdocument rootとして扱っても構わない。そのリポジトリが何を扱うかによる。

↓