📝

Vagrant + GitHub(Pages) + Octopress でblogを作成(その1)

2021/04/05に公開

GitHub PagesとOctopress

blogを作るトレンドは、WordPress だと思っていたら、最近は GitHub Pages + Octopress で作るのがいいというので試してみました。というか本当は WordPress で作るタイミング逃していまさら?って感じだったのでこっちにしてみただけ。そしていざ自分がやるといつものごとく微妙にハマったので自分メモを書いておきますw。
05.png

始めに

最初からいきなりなのですが GitHub Pages + Octopress だと source ブランチの扱いが難しくコンフリクトが発生したり色々と面倒な状態になるとのこと(実際に経験しました)。なので「Octopress リポジトリは単独で管理する、しかも非公開が好ましいと言うのが現時点での結論」と同じように「記事のデプロイ先は Github、原稿の元ネタは Bitbucket」と構築するのがgoodです。

Gitホスティングサービス Bitbucket て?

無料でプライベートレポジトリを持てる(制約あり)Gitホスティングサービスです。5人以下の小規模な人数で開発するときは具合がいいのでよく使われているそうみたいです。

やっと本題w

とりあえず、GitHub Pages + Octopress の構成だと面倒だということは判っても実際に挙動を試してみて挫けるのもまた勉強。そんなわけで自分のWindows環境は、とにかく汚したくないのでいつものVagrant経由で環境を構築しましょう。ざっくり構成としては下記のような感じ。

Windows → Vagrant → CentOS → Octopress → jekyll → Github Pages

ちなみに Octopressjekyll をベースにしたRubyの静的サイトジェネレータです。

事前準備

  1. 仮想環境 Vagrant を作成していること(できれば複数)かつ、github.com にsshで接続できる環境設定済みであること。
  2. GitHubで「username.github.io」リポジトリを作成済みであること。

Ruby, Octopress Setup

Octopress Start をみると「Install Ruby 1.9.3 or greater using either rbenv or RVM.」と指示されているので rvm にて ruby をインストールします。ruby 2.1.2p(2014/5/31現在) がインスコされるけどHTMLのレンダリング動作に問題ないのでこのまま使います。

$ sudo su
# curl -L https://get.rvm.io | bash -s stable --ruby
# source /usr/local/rvm/scripts/rvm
# gem install bundler
# exit
$ /bin/bash --login
$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress
$ bundle install
$ rake install

ちょいと時間かかります(約10分位)

ドキドキの github pages

その前にお約束のあれ・・・やっておきましょう。githubにpushするときに色々と注意される対応ですw(git コマンド入ってなければ sudo yum -y install git でインストールすべし)

$ git config --global user.name "自分のユーザー名"
$ git config --global user.email "自分のメールアドレス"

さて自分のレポジトリと同期ってみましょう~

$ cd octopress
$ rake setup_github_pages
Enter the read/write url for your repository
(For example, 'git@github.com:your_username/your_username.github.io.git)
           or 'https://github.com/your_username/your_username.github.io')
Repository url: 

Repository url: には git@github.com:your_username/your_username.github.io.git を指定すること。※your_username は、自分のアカウント名

$ rake install
$ rake generate

デプロイ

とりあえず今までの手順で作成したローカルの Octopress が jekyll でごにょごにょされ Github と同期されるのを実感(見てみたいよね?)してみる。

$ rake deploy 

表示される問い合わせに答えていけばok。errorやfatalが表示されてないのであれば、自分が作成したレポジトリに Octopress 関連のファイルがマージされています。あとはGithubのサブドメインで参照(http://your_username.github.io)できるようになるまで暫く待つ(※dnsの反映は15~30分位です)。

私のサイトは、http://murachi1208.github.io/ で参照できます。
01.png

その2に続く

とりあえず Vagrant で作成した VM の中にある「Octopress」とGithubが連動されたことを確認できて感動したので。次は 複数人 で1つのBlogを編集できる環境の構築をしてみましょう。

GitHubで編集を提案

Discussion