A Little Each Day

note to self

GitHub Pagesで静的サイトを公開する

こんにちは。本日はGitHub Pagesを使って静的サイトを公開する方法です。

GitHub Pagesを使えば無料でサイトを公開できるので、ちょっとしたペライチサイトやポートフォリオを公開するのに向いていると思います。

GitHub Pagesとは

GitHubが提供している無料のホスティングサービスです。
静的サイトのみで、データベースを用いるような動的なサイトは公開できません。

pages.github.com


GitHubでリポジトリを管理していれば、pushするだけで簡単にサイトを公開できます。

無料で公開でき、且つ別途設定で独自ドメインも対応OKです。


リポジトリを作成

まずはサイトのソースコードを管理するリポジトリを作成しましょう。

f:id:chi_kun:20170717184919p:plain


必要な項目を埋めて作成しましょう。


作成できたらソースコードをアップロードしていきましょう。


まずはプロジェクトのルートディレクトリに移動して、リポジトリを初期化しましょう。

$ cd プロジェクト
$ git init


次にファイルをリポジトリに追加しましょう。

$ git add -A


コミットしましょう。

$ git commit -m "Initialize repository"


GitHubをリポジトリのoriginとしてGitの設定ファイルに追加します。

$ git remote add origin "gitのリポジトリ"


プッシュしましょう。

$ git push -u origin master


ここまでは、普通のGit/GitHubの使い方です。


公開する

masterブランチをGitHub Pagesとして公開するために設定してきます。


GitHubで公開したいリポジトリに移動して、

Setting -> Github Pages -> Source

で、master branchを選んでsaveボタンを押します。


これでmasterブランチの内容が、そのままGitHub Pagesとして公開されるようになります。


ではサイトにアクセスしてみましょう。

URLは「https://ユーザ名.github.io/リポジトリ名」となります。


アップロードしたサイトがきちんと表示されるはずです。

本当に簡単でお手軽ですね。


更新する

もしサイトのデザインや内容を変更したくなった場合は、ソースコードを編集して、従来通りにadd -> commit -> pushすれば、そのまま変更した場所が反映されます。

pushするだけですぐに変更が反映されるので、すごく便利ですね。



本日は以上です。