GitHub Pages + Octopress カスタマイズ

##はじめに

GitHub PagesとOctopressで簡単にブログを始められます｡

Octopressは、Themeも豊富で､容易にダウンロード、適用できるのでオススメです｡

Octopressとは、jekyllをベースに面倒な作業を自動化してくれるものです。

様々なテンプレート(ライブラリ)が用意されていて､基本的なカスタマイズについては、設定ファイルに書くことで､一瞬で反映できます。

また、プレビューも簡単です。CSSは、Sassで書いたものが変換されます。

今回は､Themeにoctostrap3を使ってみます｡

##GitHub Pages

###注意点

1. メールアドレスの認証（verify）を事前に済ませておく必要がある。

2. ページの構築に､10分ほど時間がかかる可能性がある｡

###リポジトリの作成

GitHubリポジトリを作成します。 リポジトリ名は「username.github.io」とします。

##Octopress

###Octopress Setup

$ git clone https://github.com/imathis/octopress
 
$ cd $!:t
 
$ gem install bundler
 
$ bundle install
 
$ rake setup_github_pages

出来ない場合は､rubyはrvmなどで1.9.3に変更してみます。

http://octopress.org/docs/setup/

###Octopress 初期設定

####基本設定

以下のファイルで基本設定が出来ます｡サイドバーなどもここで設定します｡

$ vim _config.yml

url:                # For rewriting urls for RSS, etc
title:              # Used in the header and title tags
subtitle:           # A description used in the header
author:             # Your name, for RSS, Copyright, Metadata
simple_search:      # Search engine for simple site search
description:        # A default meta description for your site
date_format:        # Format dates using Ruby's date strftime syntax
subscribe_rss:      # Url for your blog's feed, defauts to /atom.xml
subscribe_email:    # Url to subscribe by email (service required)
category_feeds:     # Enable per category RSS feeds (defaults to false in 2.1)
email:              # Email address for the RSS feed if you want it.

http://octopress.org/docs/configuring/

####Jekyll & Plugins

root:               # Mapping for relative urls (default: /)
permalink:          # Permalink structure for blog posts
source:             # Directory for site source files
destination:        # Directory for generated site files
plugins:            # Directory for Jekyll plugins
code_dir:           # Directory for code snippets (for include_code plugin)
category_dir:       # Directory for generated blog category pages
 
pygments:           # Toggle python pygments syntax highlighting
paginate:           # Posts per page on the blog index
pagination_dir:     # Directory base for pagination URLs eg. /blog/page/2/
recent_posts:       # Number of recent posts to appear in the sidebar
 
default_asides:     # Configure what shows up in the sidebar and in what order
blog_index_asides:  # Optional sidebar config for blog index page
post_asides:        # Optional sidebar config for post layout
page_asides:        # Optional sidebar config for page layout

###Octopress 記事作成とプレビュー

$ rake new_post\[title\]
 
$ vim source/_post/*.markdown
 
$ rake preview

$ open -a Safari http://localhost:4000/

http://octopress.org/docs/blogging/

rake generate   # Generates posts and pages into the public directory
rake watch      # Watches source/ and sass/ for changes and regenerates
rake preview    # Watches, and mounts a webserver at http://localhost:4000

###Octopress 記事投稿

記事を公開し､GitHubにpushしておきます｡

$ cd octopress/source

$ rake gen_deploy
 
$ git add .
 
$ git commit -m 'your message'
 
$ git push origin source

http://octopress.org/docs/deploying/github/

###Octopress Themeの変更

Theme Download

$ cd octopress

$ git clone https://github.com/kAworu/octostrap3 .themes/octostrap3

$ rake 'install[octostrap3]'

$ rake generate

##Octopress Customize

###Preview thin

プレビューを変更してみます｡group :development doの後に､gem 'thin'を追記します｡

$ vim octopress/Gemfile

###########################
group :development do
gem 'thin'
###########################

$ bundle install

$ thin start

thin start    # Watches, and mounts a webserver at http://localhost:3000

###More

<!-- more -->

###About

新しいページを作成し､ナビバーに表示させます｡

$ rake 'new_page["about"]'

source/_includes/custom/navigation.html

<li><a href="/about">About</a></li>

###Icon

ナビバーにアイコンを表示してみます｡

source/_includes/custom/navigation.html

<img src="URL" alt="site.logo"><a class="navbar-brand" href="/">MBA-HACK</a>

###Favicon

pngでもOKです。

source/_includes/custom/head.html

<link href="URL" rel="icon">

他にも､ルートにfavicon.icoを置くと、表示されるとかいう情報もあります｡

$ convert favicon.png favicon.ico

なお、モバイルのブックマークアイコンを設定するには､以下のようにします｡

source/_includes/custom/head.html

<link href="URL" rel="apple-touch-icon" />

###Delete

不要なアイコンを削除してみます｡spanとclassのiconがキーワードです｡

source/_includes/post/{date.html,sharing.html}

<span class="glyphicon glyphicon-calendar"></span>

###Pager

ページャーの角丸設定を削除します。

以下のファイルを見てみます。

$ cat source/index.html && cat source/assets/bootstrap/dist/css/bootstrap.css

設定ファイルにソースを追記します｡

$ echo '@import "custom/_styles.scss";' >> sass/_base.scss

以下のファイルに追記します｡

sass/custom/_styles.scss

.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
}

###Markdown markup

Markdownの書き方についてです。設定はoctopress/plugins/{pagination.rb,backtick_code_block.rb}が関係しそうです｡

コードにタイトルを入れる場合は、スペースを入れます｡なお、¥は省いてください｡

¥```ruby test.rb
puts "Hello!"
¥```

誰か､コードに行番号を表示するオプションや書き方があったら､教えて下さい｡

###Sidebar

AboutやGitHubをサイドバーに表示させるには､以下の部分を編集します｡

octopress/_config.yml

default_asides: [custom/asides/about.html, asides/recent_posts.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

また、必要ある場合は､個人アカウントも指定しておきます｡

octopress/_config.yml

# Github repositories
github_user: syui
github_repo_count: 3
github_show_profile_link: true
github_skip_forks: true