GitHub Pages + Octopress カスタマイズ


はじめに

GitHub PagesOctopressで簡単にブログを始められます。

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

不要なアイコンを削除してみます。spanclassiconがキーワードです。

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