Help us understand the problem. What is going on with this article?

Jekyll & Bootstrap on GithubPages

More than 3 years have passed since last update.

Tsukuba.rbというコミュニティサイトをGithub Pagesで運用するためにしたことのメモです。

参考サイト

Jekyllとは


Jekyll:Transform your plain text into static websites and blogs.

Jekyllは静的なサイトのジェネレータです。

俺は最速で運用させたいんじゃいって人向け

ver1.00以降はサブコマンドが導入されて

jekyll new

というコマンドでRailsでいうscaffoldの様に予め必要なファイル群を生成してくれます。

Jekyll-BootstrapというのもあってBootstrap使って最速でサイト構築ができます。

なぜJekyllを使ったか?

基本的にGithubPagesを使うにあたり選択肢は2つです。

  1. Jekyllを使う
  2. Jeykllを使わない

僕はRailsを弄ったことがあるので、同じRubyのフレームワークだから1のほうが学習コスト低くて楽そうだな〜と思ったのでJekyllを採用しました。

Rubyのフレームワーク使ったことない人はこっちの方が楽かもしれません。

参考リンク

Memo

困ったら基本的にココを見ましょう

http://jekyllrb.com/docs/home/

gem install jekyllして成功してもcommand not foundってなる。

gem install jektll

これでJekyllがinstallされるはずなんですが、

Jekyll new

でJrykellコマンドを使っても

Jekyll command not found

と出てきて使用できませんでした。

そのため運用するディレクトリで

vi Gemfile
Gemfile
source :rubygems
source "http://rubygems.org"
gem 'jekyll'
bundle exec jekyll new

…なぜかいけた?

そのあとrm -rf ./で全て消し去ったあと

jekyll new

しても普通に動きました。
所定のGemがgemのコマンドラインではinstallされてなかっただけなのかもしれません。

ともかくこれで無事にJekyllが動くようになった!!

Jekyll serveしてhttp://localhost:4000/にアクセスしてもForbiddenが表示される

これはプロジェクト内にindex.htmlが存在しない時に起こるエラーでした。

ちなみに

jekyll serve
or
jekyll server

どちらでもサーバーが起動します。もやもやする

jekyll serve -w

毎度毎度buildするの面倒くさいので...
jekyll serve -wを使いましょう。

対象プロジェクトを監視して、ファイルを変更した際にその変更がリアルタイムで反映されます(めっちゃ便利!!)

jekyll serve -w //for changes and rebuild

Regenerating: 2 files at 2014-01-14 07:39:02 ...done.
Regenerating: 2 files at 2014-01-14 07:39:03 ...done.
Regenerating: 1 files at 2014-01-14 08:01:24 ...done.
Regenerating: 2 files at 2014-01-14 08:01:41 ...done.
Regenerating: 1 files at 2014-01-14 08:01:42 ...done.

こんなかんじでファイルに変更があると即反映されていきます。

_siteはgit ignoreしよう

jekyllで生成したものをgit管理しても意味がない。(生成元をgit管理する事が目的)

.gitignore
_site

YAML Front-Matter

これが無いとjejyllがmdをhtmlへ変換しないのでつけましょう。

index.md
---
---

DataFilesを使用してYAMLから構造化したデータを取ってくる。

_data/members.yml
- name: hurutoriya
  github: hurutoriya
  twitter: hurutoriya
- name: haya14busa
  github: haya14busa
  twitter: haya14busa

YAMLで定義したデータ群は

site.data.members

に格納されています。

site.data.members[1].name

ってやると

hurutoriya

が返って来ます。

Routing

以下を参考にしましょう。
- Permalink
- Crating Pages

今回みたいにBlogとして使わなない時は、単純にRootにArchiveディレクトリみたいなのを作りそこにマークダウンファイル(例:001.md,002.md)をポンポン追加していくと

http://example.com/archive/001.html
http://example.com/archive/002.html

Permalinkの方はBlogとして使いたい方は読んでおきましょう。
基本的に自由にpermalinkの設定をすることができます。

Gistがめっちゃ簡単に貼れる

{% gist 5555251 %}

これだけで表示される。

Liquidを使用して変数を定義する。

{% assign my_variable = false %}

まとめ

静的なホスティングだからかも知れないがとにかく速い。
Railsだと表示されるまでに1~1.5s位は体感時間あるんですが、Jekyllの場合一瞬でレンダリングが完了します。最速のJekyll!!(Syntax Highlightつかうととたんに重くなるらしい)

公式Dcumentが充実してるのって素晴らしいことだと思います。
またLiquidでお手軽にViewの部分でFor文が使えるのくっそ便利でした。

DBを動的に扱わないWebPage作るならJekyllで十分だなとおもった。フレームワークはその目的に沿ったものだと本当に爆発的に開発効率が向上するものだと実感した。

*似たフレームワークでMiddlemaってのがありました。

hurutoriya
機械学習とコンピュータビジョンに興味があります。
http://hurutoriya.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした