GithubPagesでOctopressを使ってブログを作ってみた。

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 162 follow us in feedly

まえがき

最近ちょっと新しいブログを作りたいなーと思いつついくつかブログサービスを検討後、今回はGithubPagesを使った『Octopress』ブログで運用してみようかなと思いました。

導入方法をのメモとつらつら雑談でもとメモしておきます。

ブログサービスの選定

新ブログ制作理由

今回新しいブログを始める理由としては

  • 当ブログ記事から抜粋した記事の英語化
  • および、英語の勉強

と、そろそろグローバルな事に挑戦したくなったというわけです。記事としては主に自分が制作したプロダクトに関する記事をかければと考えています。

本当に続くのかわからないけど応援してね。

ブログサービス候補

  • Blogger
  • Octopress on Githubpages
  • wordpress.com
  • wordpress on VPC

Octopress on GithubPages採用のわけ

  • デフォルトのドメインが検索エンジン的に強い。
  • 海外の検索エンジンで強い(コンテンツ的にも合う)
  • 無料(最強)
  • すこしGitの勉強にもなる。
  • Vim Markdownでストレスなく書ける!

といった感じで決めました。できるだけシンプルにしたいと考えていたのでWordpressは今回はお預けで、Bloggerが一番使いやすそうな気がしたけれど、黒い画面だけでブログ書きたかったので断念。

開発環境

今回Octopressの開発に利用している環境

  • OS MacOSX
  • エディタ Vim
  • Ruby 2.1.0

Rubyやbundlerのインストールに関しては今回はメモしないです。ではやっと、Octopressブログを作っていきます。

Githubのリポジトリ作成

まず、Github上にOctopress on GithubPages用のリポジトリを作成しておく。

『ユーザー名.github.io』となるようにリポジトリを作成する。自分の場合だと『keitarou.github.io』

っでGithub側の準備はこれで終わり。

Octopressのプロジェクトをクローンする

っで、開発用のマシンの適当なディレクトリで以下のコマンドを実行。『username』のところは自分のgithubアカウント名に変えてわかりやすい名前をつけておく。後はクローンしてきたプロジェクトのルートディレクトリでコマンド操作する。

git clone git@github.com:imathis/octopress.git username.github.io

# 以後username.github.io ディレクトリでの操作になるのでcdしておく
cd username.github.io

Octopressのインストール

Octopressで必要なパッケージと、installコマンドで準備を整える

bundle install 
bundle exec rake install

これで必要なファイルは揃った!

GithubPagesにセットアップ

ホイで、最初に作成しておいたGithubのリポジトリをセットアップするため以下のコマンドを実行。

リポジトリのアドレスを聞かれるので、『git@github.com:username/username.github.io』のように入力する。

bundle exec rake setup_github_pages

->> git@github.com:username/username.github.io

GithubPagesに公開してみる

では、まだ記事を作成していないけどGithubPagesに公開してみる

bundle exec rake generate
bundle exec rake deploy

generateでHTML化して、deployでpushして公開しているようだ。

『gen_deploy』とすることでこの2つの動作をまとめて行えるようだ。

公開できたら『http://username.github.io』にアクセスしてみる。(すこし時間がかかるようだ)

octopress-on-githubpages-1

おん。ちゃんとできてるっぽい。このデザインのブログよく見かけるけど、Octopressのデフォルトのテーマだったんだな。十分かっこいいな。

ブログの設定ファイルを編集する

さて、そろそろブログのタイトルなどを編集したい。これらの情報は『_config.yml』ファイルに定義されている。

開いてみるとだいたい意味がわかると思うのでこちょこちょ編集しておく。サードパーティの設定などが最初から入っているので嬉しい。

記事を作成する

記事を作成するには以下のコマンドを実行する。

# hello worldというタイトルの記事を作成
bundle exec rake new_post["hello world"]

コマンドを実行すると、『source/_posts/yyyy-mm-dd-hello-world.markdown”』なmarkdownのファイルが作成されるのでそのファイルを編集して記事を作成するようだ


layout: post
title: "hello world"
date: 2014-02-08 01:05:20 +0900
comments: true
categories:

Hi hello

こんな感じで適当にファイルを作っておいた。

ローカルでプレビューする

Octopressはわざわざ公開しなくてもローカルマシンでプレビューをすることができる。

以下のコマンドを実行して『http://localhost:4000』にアクセスすればプレビュー可能。

bundle exec rake preview

ではもう一度、デプロイして変更を確認してみる。

bundle exec rake generate
bundle exec rake deploy

んんん、タイトルも変わったしいい感じ!!

octopress-on-githubpages-2

あとがき

今回はこれぐらいで終了です。

あとはちょこちょこ弄って遊んでみよう。

おすすめ書籍

開発ツール徹底攻略 (WEB+DB PRESS plus)
Junio C Hamano 大塚 弘記 川口 耕介 kana 大竹 智也(tomoya) 尾藤 正人
技術評論社
売り上げランキング: 22,927

関連記事

AngularJSで作るChrome拡張の雛形リポジトリを作っておいた。

まえがき 最近、GoogleChromeの拡張機能と、AngularJ...

記事を読む

github-jissen-nyuumon-1.png

【読書感想文】GitHub実践入門 ~Pull Requestによる開発の変革を読み終えました。

まえがき 「GitHub実践入門 ~Pull Requestによる開発...

記事を読む

the-open-source-report-cardthe-open-source-report-card.png

『The Open Source Report Card』というGithubアカウントレポートサイトが面白い

まえがき 今回はたまたま面白いWEBサイトを見つけたのでご紹介。 とあ...

記事を読む

github-travisci-ruby-rspec-1github-travisci-ruby-rspec-1.png

RubyのテストをGiHub・TravisCIを使ってやってみる

まえがき 今回はTravisCIというGitHubで使える無料のCIツ...

記事を読む

peco-issuepeco-issue.gif

GitHubのIssueをpecoして開いたりしてみる

まえがき GutHubのissueをコマンドラインでひっぱってきて、そ...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑