LoginSignup
70

More than 5 years have passed since last update.

GitHub Pages + Octopress カスタマイズ

Posted at

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
70