T.I.D.

Git や GitHub と戯れる、オレオレ的おとなの遊び場

jekyllで作る簡単GitHub Pages

jekyll（ジキル）は、テンプレートを使って静的な Web サイトを構築するための Ruby プログラム。

通常はローカルに jekyll をインストールするが、GitHub Pages では必ずしも必要ないという話。

通常の手順

こちら に基本的な手順の説明。

  1. ローカルな Ruby 環境に jekyll をインストール する

  2. jekyll に必要な テンプレートファイル群 を構成し、_config.yml や テンプレートファイル を設定する

  3. YAML で記述した先頭ブロックの レイアウトとタイトル に続けて、 HTML、Markdown、textile のいずれかの記法を使って記事を書く

  4. jekyll で HTML ページを生成し（jekyll --server --auto）、ローカルで確認（http://0.0.0.0:4000/）、デプロイ（_site に生成されたページ群を git 経由でリモートにコピー）する

GitHub Pages の場合

一方 GitHub では、GitHub Pages 上に jekyll に必要なファイル群があれば、自動的に HTML を生成してくれるので、必ずしもローカルに jekyll をインストールしなくても何とかなる。 もっともローカルで最終的なレンダリング結果を確認するためにも、jekyll をインストールするに越したことはないが…

1ページだけの GitHub Pages なら、最小構成ファイル群は以下の通り。

Basic-Structure 
1
2
3
4
5
6

.
├─ _layouts
│ └─ default.html
├─ css
│ └─ styles.css
└─ index.md

次は、テンプレートファイル default.html の例。

default.html 
1
2
3
4
5
6
7
8
9
10
11
12

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>jekyllで作る簡単GitHub Pages</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>

</body>
</html>

index.md には default.html の content の中身を記述する。

index.md 
1
2
3
4
5
6
7
8
9

---
layout: default
title: プロジェクト・タイトル
---

プロジェクト・タイトル
======================
ここにプロジェクトの概要を書きます。
...

index.md 以外にも、index.html や index.textile でも OK だが、先頭の layout、title が重要。これがないとレンダリングしてくれない。

css/styles.css で装飾し、必要なら images や script、favicon.ico などもお好みで。 そしてこれらファイル群を プロジェクト・リポジトリの gh-pages ブランチに push する。

さらに複雑なテンプレートの作り方

"ページの構成"

サイドバー付きページのテンプレートを、Initializr 2 をベースに構成する。

"実際の GitHub Pages 適用例"

README.txt 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.
├─ _includes
│    ├─ head.html
│    ├─ header.html
│    ├─ aside.html
│    ├─ footer.html
│    └─ script.html
├─ _layouts
│    ├─ default.html
│    └─ page.html
├─ css
│    └─ style.css
├─ js
│    ├─ libs
│    │   └─ modernizr-2.0.6.min.js
│    └─ script.js
├─ index.md
├─ demo.html
└─ documents.md
_config.yml 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# ----------------------- #
#      Main Configs       #
# ----------------------- #

url: http://username.github.com/
title: サイトのタイトル
author: username

# ----------------------- #
#   3rd Party Settings    #
# ----------------------- #

# Google Analytics
google_analytics_tracking_id: UA-XXXXXXXX-X
default.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="ja"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="ja"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
{% include head.html %}
<body>
{% include header.html %}
<div id="main-container">
	<div id="main" class="wrapper clearfix">
		<article>
{{ content }}
		</article>
{% include aside.html %}
	</div> <!-- #main -->
</div> <!-- #main-container -->
{% include footer.html %}
{% include script.html %}
</body>
</html>
head.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>jekyllで作る簡単GitHub Pages</title>
	<meta name="description" content="">
	<meta name="author" content="tokkonopapa">

	<meta name="viewport" content="width=device-width,initial-scale=1">

	<link rel="stylesheet" href="css/style.css">

	<script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
header.html 
1
2
3
4
5
6
7
8
9
10
11
12

<div id="header-container">
	<header class="wrapper clearfix">
		<h1 id="title"><a href="http://tokkonopapa.github.com">T.I.D.</a></h1>
		<nav>
			<ul>
				<li><a href="http://tokkonopapa.github.com">Home</a></li>
				<li><a href="http://tokkonopapa.github.comdemo.html">Demo</a></li>
				<li><a href="http://tokkonopapa.github.comdocuments.html">Documents</a></li>
			</ul>
		</nav>
	</header>
</div>
aside.html 
1
2
3
4

<aside>
	<h3>aside</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
</aside>
footer.html 
1
2
3
4
5

<div id="footer-container">
	<footer class="wrapper">
		<h3>footer</h3>
	</footer>
</div>
script.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<script src="js/script.js"></script>
<script>
	var _gaq=[['_setAccount','UA-42366765-1'],['_trackPageview']];
	(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
	g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
	s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

<!--[if lt IE 7 ]>
	<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
	<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
index.md 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---
layout: default
title: "サンプル・ページ"
---

article header h1
=================
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

article section h2
------------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

article section h2
------------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.


### article footer h3 ###
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.

参考情報

Comments