HTML
CSS
GitHub
Sass
Octopress

GitHub Pages + Octopress カスタマイズ

More than 5 years have passed since last update.


はじめに

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