GitHub Pagesを使ってみた

Github Pagesというウェブホスティングサービスがあることを知りました。githubに慣れるためにも、利用してみようかなと思い始めてみました。

・静的なサイトを作成し、無料で公開できる。

・何ページも作成できリンクにすることでシングルページのサイトではなく複数ページを持つサイトを作れる。

・外観テーマのテンプレートがあるので簡単に作成できる。

がgithub pagesのメリットじゃないかなと思います。

Githubの設定

自分のgithubのアカウントページを開く。

+new repositoryを選択

repository nameのところに新規で作成するurlを入力

[アカウント名].github.io

その他はなにも触らずcreateボタンを押すと作成完了。

homeディレクトリなどに移動し、先程つくったgithub pagesのリポジトリを自分のPCにgit cloneする。

$ git clone git@github.com:[アカウント名]/[アカウント名].github.io.git

git cloneすると、[アカウント名].github.ioというディレクトリが自分のPC上に作られているので、そのディレクトリに移動し、htmlファイルを作成

$ cd [アカウント名].github.io
$ touch index.html
$ vim index.html // かんたんなhtmlを書いて保存しておく

作成したhtmlファイルをgithub pagesのリポジトリにpushする。

$ git add index.html
$ git commit -m "first commit"
$ git push -u origin master

※masterじゃなく今はmainみたいな感じだったと思いますが、僕の環境ではmaster。$ git branchで表示される。

作成したサイトにウェブブラウザからアクセス。

https://[アカウント名].github.io/

作成したindex.htmlが表示される。

作成したhtmlにテンプレートのテーマを適用する方法

JekyllというRubyの静的サイトジェネレータがgithub pagesで標準で備わっていて、テンプレートが簡単に使えるので使ってみます。

Jekyll • シンプルで、ブログのような、静的サイト

さっき作ったgithubのgithub pagesのリポジトリのウェブページを開きます。

そこでsettingsをクリックし画面下の方に行くと、github pagesのchange themeというボタンがあるのでクリック、好きなテーマを選ぶ。

すると、_config.ymlというファイルが作られます。

テーマを適用すると、本来ならindex.mdファイルも作られるけど、すでにindex.htmlが存在するのでindex.mdファイルは作られないです。

index.mdファイおｋルを手動で作っておきます。内容はindex.htmlのコピペでOK。

また、Jekyllはindex.htmlとindex.mdの両方のファイルが存在すると、Jekyllのテーマが当てられていないindex.htmlのほうが優先されて表示されるので、index.htmlの方は削除しておくことで、テーマが当てられたサイトが表示されるようになります。

$ cp index.html index.md
$ rm index.html

githubの変更を先にpullで取り込んで、それからpc側の変更をpushします。

$ git pull
$ git add index.md
$ git commit -m "create index.md"
$ git push

 自分のgithub pagesのurlにアクセスるとjekyllのテーマが適用されたものが表示される。

Jekyllはindex.mdをマークダウン記法で書いてかんたんに編集できるのがメリットみたいです。

markdown記法については下記のリンクを参照。

https://daringfireball.net/projects/markdown/syntax

.mdファイルでマークダウン記法で書くのが気軽で便利なことから、pc側からファイルを編集してpushするよりも、

普通のワードプレスやnoteみたいにウェブブラウザから編集し公開するのが合っている、普通のブログサービスみたいに使える感じですね。

下記は僕のつくったgithub pagesです。

かつお

_config.ymlでカスタマイズ

このままだと下の画像の上部のように、デフォルトでgithubpagesのアドレスがでっかく表示されます。

この上部の表示を変えたい場合、index.mdと一緒に生成されている_config.ymlファイルを編集することで変えることができます。

githubpagesのリポジトリで_config.ymlファイルを編集します。

theme: jekyll-theme-architect
title: Katsuo Pages
description: Katsuoのポートフォリオサイト

Jekyllのテーマをsettingsから選択すると、_config.ymlファイルに適用したthemeが自動的に反映されるようになっているので、themeという項目があります。

今回自分で追加したのは、titleとdescriptionという項目です。

上記設定を反映させたら、下記画像のように上部が変更できます。

以上でシングルページのサイトができあがったので、つぎはページを追加してみます。

新しいページを追加

追加したページにリンクで移動できるようにすることで、複数ページを持つサイトを作れます。

github pagesのリポジトリで「Add file→Create new file」をクリックしファイル名を記入しコンテンツを書くだけです。

あとはindex.mdを編集してindex.mdに追加したファイル名へのリンクを書くと、index.mdから新しいページを表示できるようになります。

リンクは相対パスでok。

例）
ファイル名を「todo.md」とした場合、index.mdにtodo.mdへのリンクを書く方法は、

[任意のリンク名](todo.md)と書きます。

mata追って作業しつつ内容を更新します。

ふ