kapieciiのブログ

日々学んだことを残しておくためのブログです。このブログはGoogle Analyticsを利用しています。

Github Pagesを使った静的ファイル公開を試してみた

f:id:kapiecii:20200103014301p:plain

静的サイトジェネレーターで作成したコンテンツを公開する先として、NetlifyにするかGithub Pagesにするか迷っています。
Netlifyは使ったことがあったのですが、Github Pagesは使ったことがなかったので、試してみました。

目次

公式ドキュメント

help.github.com

Github Pages概要

Github Pagesを使うにあたって私が気になる点について、公式ドキュメントから抜粋します。

  • Github Pagesには、ユーザ、organization、プロジェクトの3種類がある
  • 無料アカウントの場合、公開リポジトリでのみGithub Pagesを使うことができる
  • Eコマースやオンラインビジネスを提供する目的で使ってはいけない
  • GitHub Pages ソースリポジトリは、1GBまで
  • GitHub Pages サイトには、100GB/月の制限あり
  • GitHub Pages サイトには、10ビルド/1時間の制限あり

その他、詳細についてはこちらをご確認ください。

help.github.com

公開手順

公式ドキュメントに沿って、実際にサイトの公開を試してみます。

help.github.com

リポジトリを作成

今回は「プロジェクト」でGithub Pagesを公開します。
公開用のリポジトリを作成します。

f:id:kapiecii:20200103012327p:plain

リポジトリにファイルを追加

$ git clone https://github.com/kapiecii/githugpages-test.git
$ echo "test page." > index.html
$ git add index.html
$ git commit -m "add index.html"
$ git push

公開設定

リポジトリのSettings画面の下の方にある「Github Pages」の箇所で設定をします。

f:id:kapiecii:20200103012436p:plain

Github Pagesで利用する公開元を指定します。 今回はmaster branchを指定しました。

f:id:kapiecii:20200103012535p:plain

Sourceを指定すると、公開URLが表示されます。
Custom domainの設定もここからできるようです。

f:id:kapiecii:20200103012615p:plain

先程追加したファイルが公開されていました。

f:id:kapiecii:20200103012656p:plain

テーマの変更

テーマを変更できるようなので、変更してみます。
「Choose a theme」からテーマを選択します。

f:id:kapiecii:20200103012615p:plain

テーマを選んで「Select theme」をクリックします。

f:id:kapiecii:20200103012850p:plain

テーマを選択すると、リポジトリのREADMEが更新され、「_config.yml」が追加されていました。

f:id:kapiecii:20200103013122p:plain

f:id:kapiecii:20200103013142p:plain

READMEを読むと、Markdownファイルを追加すると、Jekyllでhtmlをビルドしてくれるようです。
Markdownファイルを追加してみます。

$ git pull
$ touch test.md
$ cat test.md 
# test markdown file
## aa
* bb
  * cc

$ git add test.md
$ git commit -m "add test.md"
$ git push

テーマが反映された状態でMarkdownファイルの内容が公開されました。

f:id:kapiecii:20200103013254p:plain

テーマは、Settingから何度でも変更することができます。

f:id:kapiecii:20200103013401p:plain

最後に

Github Pagesを試してみました。 標準でいくつかのテーマも準備されているので、ちょっとした文章を公開したい場合に使えそうですね。

kapieciiのブログについてお問い合わせがある場合、下記のフォームからご連絡をお願い致します。
お問い合わせはこちら