Github Pagesでブログを作る。
Github pagesを使ってブログを公開するのがエンジニアの流行りなのでやり方をザックリまとめる。
そもGithub Pagesとは
Githubのリポジトリに静的サイトを公開できるホスティングサービスの一つ。
本来はリポジトリのランディングページなどとして利用するもののハズだが、エンジニアのポートフォリオなどとして使われることも多い。
内部でJekyllというRuby製の静的サイトジェネレータが動いている。
Jekyllとは
Ruby実装の静的サイトジェネレータ。
Markdown文書でページや記事の記述ができるのが特徴。
詳しくはJekyllの公式サイトをチェック。
今回Github Pagesでブログを開設するにあたり、このJekyllを活用する。
なお、Github PagesのJekyllは少々制約もあるので注意。
そのあたりに関してはGithubのドキュメントを参照すること。
ブログのために必要なもの
必要なものは下記のものである。
- githubのアカウント
- 公開用リポジトリ(github.ioでも問題なし)
- アップロードするためのファイル一式
アカウントやリポジトリについては割愛する。
ブログ用のファイルを作成する
最低限ファイル構成
- /
- /_layout/
- default.html
- /_posts/
- 2021-08-25-post.md
- /_sass/
- jekyll-theme-hacker.scss
- /assets/
- /css/
- style.scss
- /css/
- _config.yml
- index.md
- /_layout/
jekyll-theme-hacker.scssについては使用するテーマによって変更する。
上記がブログを公開する上での最低限のファイル構成となる。
ページ内のパーツの分割などを行う場合は_includesなどのフォルダや必要ファイルを作成する。
_config.ymlの設定
theme: jekyll-theme-hacker
_config.ymlファイルで最低限必要な設定はこれくらいとなる。
他サイト名や執筆者などは必要であれば行う。
/_layouts/default.htmlの作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blogs</title>
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
</head>
<body>
<header>
<h1>{{ page.title }}</h1>
</header>
<main>
{{ content }}
</main>
</body>
</html>
1枚のレイアウトですべてのページに対応するのであれば必要なコードはこれくらいである。
もし、<title></title>部分などを定数で管理する場合は_config.ymlに記述する。
/_sass/jekyll-theme-hacker.scssと/assets/css/style.scssの作成
/_sass/jekyll-theme-hacker.scssについては従来のスタイルと同様の記述でOK。
/assets/css/style.scssは/_sass/jekyll-theme-hacker.scssを読み込んでくるようにしたいので下記のように記述する。
---
---
@import 'jekyll-theme-hacker';
index.mdと/_posts/2021-08-25-post.mdを作成
いずれも利用するレイアウトとタイトルを指定する。
その際の記述は下記のようになる。
---
layout: front
title: blogs
---
---の続きからページの内容を記載していく。
記事の一覧などを作成する必要がある場合は下記のようなコードを記載する。
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">
<h2>{{ post.title }}</h2>
</a>
</li>
{% endfor %}
</ul>
pushして公開
ここまで作成できたら後はリポジトリにプッシュしてGithub Pagesを公開する設定をリポジトリに行えば完成である。
ここまで手軽にMarkdown文書で記述できるブログが手に入るサービスもなかなかないので、コードを書く心得がある方はチャレンジしてみてもいいだろう。
ページ内にはAmazonのリンクなども貼り付けできるのでちょっとしたお小遣い稼ぎにも使える。