GitHub Pages + Octopress カスタマイズ


##はじめに

[GitHub Pages](http://pages.github.com/)と[Octopress](https://github.com/imathis/octopress)で簡単にブログを始められます｡

Octopressは、[Theme](http://opthemes.com/)も豊富で､容易にダウンロード、適用できるのでオススメです｡

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

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

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


今回は､Themeに[octostrap3](https://github.com/kAworu/octostrap3)を使ってみます｡

##GitHub Pages

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

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

###リポジトリの作成

GitHubリポジトリを[作成](https://github.com/new)します。 リポジトリ名は「username.github.io」とします。

##Octopress

###Octopress Setup



```bash:
$ 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/](http://octopress.org/docs/setup/)


###Octopress 初期設定

####基本設定

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

```
$ vim _config.yml
```

```bash:
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/](http://octopress.org/docs/configuring/)

####Jekyll & Plugins


```bash:
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 記事作成とプレビュー

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

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

[http://octopress.org/docs/blogging/](http://octopress.org/docs/blogging/)

```bash:
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`しておきます｡

```bash:
$ cd octopress/source

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

[http://octopress.org/docs/deploying/github/](http://octopress.org/docs/deploying/github/)


###Octopress Themeの変更

[Theme Download](http://opthemes.com/)

```bash:
$ 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
```

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

###More

```bash:
<!-- more -->
```


###About

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

```
$ rake 'new_page["about"]'
```

```html:source/_includes/custom/navigation.html
<li><a href="/about">About</a></li>
```

###Icon

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

```html:source/_includes/custom/navigation.html
<img src="URL" alt="site.logo"><a class="navbar-brand" href="/">MBA-HACK</a>
```

###Favicon

`png`でもOKです。

```html:source/_includes/custom/head.html
<link href="URL" rel="icon">
```

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

```bash:
$ convert favicon.png favicon.ico
```

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

```html:source/_includes/custom/head.html
<link href="URL" rel="apple-touch-icon" />
```

###Delete


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

```html:source/_includes/post/{date.html,sharing.html}
<span class="glyphicon glyphicon-calendar"></span>
```

###Pager 

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

![](http://lh5.ggpht.com/-Lfjzus2acB4/Uvuu8RtYImI/AAAAAAAAHt8/HMkxA89s1Q8/s0/pager_02.png)

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

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

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

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


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

```css: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をサイドバーに表示させるには､以下の部分を編集します｡

```css: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]
```

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

```css:octopress/_config.yml
# Github repositories
github_user: syui
github_repo_count: 3
github_show_profile_link: true
github_skip_forks: true
```