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

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

More than 3 years have 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キーが必要なアプリを含める場合は気をつけた方がいい。

wifeofvillon
孫請けSIer→フリーランスコーダー→QAバイト
drivemode
No-look freedom for driving.
http://drivemode.com/
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