GitHub
website
github.io

GitHubを使ってWebサイトを公開する

More than 1 year has passed since last update.


概要

このエントリが対象とするのは主に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使用)。

github.io.01.png


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

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

github.io.02.png


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

GitHubリポジトリのWebページを開いて、

[Setting]>[GitHub Pages]>[Source]を「master branch」に変更する。

もちろん、リポジトリ内にdocsディレクトリを切って、そちらをdocument rootとして扱っても構わない。そのリポジトリが何を扱うかによる。

github.io.03.png



github.io.04.png


4. できあがったGitHubページを確認する

ページソースを指定するとGitHubページへのリンクが表示される。

github.io.05.png


5. 編集&コミット

あとはブランチ切って編集してmargeしたり、masterを直接編集したりしてオリジナリティあふれるページにしていってもらえばいい。(例ではMaterializeを使ってアレンジした。)

注意点としては、masterは常に最新のものが反映されるので、ミスると即反映されること。

github.io.06.png



github.io.07.png

アクセストークンとかAPIキーが必要なアプリを含める場合は気をつけた方がいい。