Jekyll Bootstrap + Github でブログを作成|Web.Tech

2013年11月24日

Jekyll Bootstrap ＋ GitHub Pagesを使ってブログ作ってみました。

Jekyllは、静的コンテンツを作成するRubyジェネレーター。
Jekyll Bootstrapは、Twitter Boostrapを組み込んでより簡単に導入しやすくしたもの。

同じ系統にoctpressがありもっと簡単だが、カスタマイズや拡張性が残っているので RubyやGitHubの勉強のために今回はJekyll Boostrapにしてみました。

利点

ブログへの投稿がTerminalとvimで全て完結
gitへpushするだけで、記事のアップが可能。
- Gitの勉強にもなる。
Rubyで書かれているため、Ruby環境周りの勉強にもなる。
追記/変更を行った時に変更履歴が見れる
Markdown記法が使える
レスポンシブWebデザイン

欠点

カスタマイズに手間が掛かる。
GitHubがpriveteリポジトリではない場合、ソースが全てオープンです。
GitHubが日本Googleの検索に引っかからない
- Googleウェブマスターツールを使ったら登録された。
Linux環境(CUI環境)に慣れていないと若干敷居が高い

評価

ブログ用というより、後で加筆修正を行うような静的コンテンツを作成する使い方に向いていると思う。
技術的な自分用ドキュメントを書いて置いておくという用途で使うにはなかなか良いかもしれない。

Jekyllに関するメモ

事前に以下の作業が必要

Rubyのインストール(ruby-1.9.3-p448)
GitHubへアカウントを登録
- リポジトリ作成
- SSHキー作成、GitHubへ登録

Jekyllのインストール

Jekyll QuickStartの通り

git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com
cd USERNAME.github.com
git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git
git push origin master

gem install jekyll
cd USERNAME.github.com 
jekyll serve

USERNAMEは自分のリポジトリ名

jekyll serveでローカルWebサーバーが立ち上がるため、下記のURLで確認ができる。

http://localhost:4000/

rake previewでも出来る。

_config.ymlの編集

ブログの名前などの情報を変更するため以下の辺りを修正

title : Jekyll Bootstrap
tagline: Site Tagline
author :
name : Name Lastname
email : blah@email.test
github : username
twitter : username
feedburner : feedname

production_url : http://username.github.io

記事の書き方

rake post title="Hello World"

titleは、記事のファイル名になるため、日本語は使用しない。記事タイトルは後で変更可能。

作成されるファイル

_posts/yyyy-mm-dd-helloworld.md

---
layout: post
title: "Hello World"
description: ""
category: ""
tags: []
---

この下にMarkdownで記事を書いていく。

titleは実際に表示されるタイトル

タグは複数指定可能

tags: [foo,bar,hoge]

gitに登録

git add .
git commit -m "first commit"
git push origin master

Markdownをredcarpetに変更

defaultのGitHub Markdownだと、書いていた記事がエラーが出まくったので、redcarpetへ変更。

_config.ymlのpygments: trueの下に以下を追加

markdown: redcarpet
redcarpet:
  extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]

シンタックスハイライト

_config.ymlでpygments: trueにしてあるのでHTMLは変換されているようだったけど、CSSが無かったので以下の手順で作成。

sudo easy_install pygments
mkdir css
pygmentize -S default -f html > css/pygments.css

_includes/themes/twitter/default.htmlへ以下を追加

<link href="/css/pygments.css" rel="stylesheet" type="text/css" mediea="all">↲

未分類 1