haya14busa

haya14busa’s memo

Jekyll on GitHub Pages With Twitter BootstrapでVimプラグイン読書会のサイトを作りました

- -

つくりました

Jekyll, GitHub Pages, Twitter Bootstrap全部便利だった。

注: URLは変わるかもしれません

GitHub公式ドキュメント

静的サイトをホストしてくれる。プロジェクトごとに作ったり、ユーザーのブログとして使えたりする。

Jekyll

最初に砂場あそびしました

GitHub PagesのAutomatic Generatorを使ってJekyll on GitHub Pagesの仕様をなんとなく把握。適当な流れをリンク先に書きました。

そしてBootstrapつかってVimプラグイン読書会作成へ

参考Link

どっちもJekyll使ってたので参考にしました。特にvimrc読書会と似たようなサイトにしたほうがいいっぽいので構成とかほぼ同じになってます。参考にしながらやってると明らかな間違いとか割と見つけたりして簡単なPullReq案件が出てくるので便利。Vimプラグイン読書会のナビゲーションヘッダ便利という声からvimrc読書会のサイトのにもナビゲーション実装したりもしました。

Twitter Bootstrap

ArchiveページでTableゴリゴリ使うっぽいのでTwitter Bootstrap使って楽々ストライプデザインにしたり、簡単にResponsiveなヘッダーを作れて便利でした。配色とか考えてたけどデザイン力なさすぎて途中でBootswatchというBootstrapのテーマサイトからSimplexというテーマをベースに作ることにしました。

そしたらおしゃれっぽくなったんだけど、自分のサイトとめっちゃ似てるデザインになってつらさを感じた。反省してます。

こっからTips的ななにか

ローカルでもCSS,JSを効かせた状態で確認する方法

_config.yml (いろいろ設定がかける)

baseurl: /{repository-name}

default.htmlなどで

Shell

bundle exec jekyll serve -w -b /{repository-name}

上記コマンドを叩いてhttp://localhost:4000/{repository-name}/にアクセスするといい感じにCSS,JSなどすべてのページで効くようになります

詳しくはjekyll serve --helpとかするとよい。

公式サイトを見る限り、baseurlは/{repository-name}/ではなく/{repository-name}にして最後のスラッシュは書かないほうがいいっぽいです。

これは書いてても一応使えるんですが問題があって、/jekyll_reading_vimplugin_site/とかした時にbaseurl//page-urlになってしまって、わざわざ最初のスラッシュを消す必要がでてきてしまいます。(jekyll_reading_vimplugin_site/)

このへんvimrc読書会のページがこの構成で少しハマりかけたので注意です。絶対とは言いませんが最後のスラッシュはない方がよいです。

Markdown

_config.yml

markdown: rdiscount

rdiscount:
  extensions:
    - autolink      # greedily urlify links
    - footnotes     # footnotes
    - smart         # typographic substitutions with SmartyPants

デフォルトのmarkdownエンジンはmarukuになっていて(たぶん)、あんまり良くないのでrdiscountかredcarpetあたりを選ぶと便利なようです。

Markdownファイルをかけば勝手にコンバートしてくれるわけではなく、先頭に記述する必要があります。

index.mdなど

---
layout: default
title: なにかタイトル
---

本文

_layout

先ほど出てきたlayout: defaultなどは、所定のレイアウトを使ってそのなかの“にMarkdown内容を出力することになります。

Jekyll on GitHub Pages with Twitter BootstrapでVimプラグイン読書会のサイトを作りましたや“を使用してよさげに作るとよいです

Gemfile

Gemfile

source 'https://rubygems.org'
gem 'github-pages'

Rubyとbundlerとか事前にインストールしておくとbundle installとかbundle exec jekyll serveとかできて用意しておくと便利。travis-ciに登録とか気軽にできるのでリポジトリの紹介ページとかでなく、純粋にGitHub Pagesとしてリポジトリを使う場合は便利です。

Travis CIでJekyll on GitHub Pages(gh-pages branch)のテストをするときにハマった « haya14busa

ConvertからExcludeする

_config.yml

exclude:
  - 'Gemfile'
  - 'Gemfile.lock'
  - 'README.md'
  - 'scripts'

markdownやらhtml以外の物も_site以下にJekyllはコンバートするので、気づかずにREADMEとかをおいておくとサイトからアクセスできちゃったりします。しっかり除外設定しておくと良さげです。

find _site -type fとかして確認するとよいです。

_includeを使う

各ページに共通の<head>タグ部分や、サイドバー、フッターなどなどは_include/header.htmlのようにフォルダ下において`

haya14busa

<h2>haya14busa's memo</h2>

`とレイアウトなどなどから呼び出すことができます。

_dataとfor loopが便利っぽい

_data/members.yml

- name: sanaechan
  github: deco_mori
  twitter: decochan

- name: haya14busa
  github: haya14busa
  twitter: haya14busa

とかしておくとMarkdownファイル含め任意のところで

こんなふうに呼び出せて便利そうです。

よんだvimrcとかvim pluginをテーブルに直書きじゃなくてデータに書いてloop回してわっしょいとかもよさそう。

結局は

他人のサイトみて良さげな書き方参考にするとすぐできるのではかどります。

とか

などなど、GitHubにホストされてるものを公式ドキュメントなどと見比べながらやっていくといろいろ発見があったり、ついでにプルリクれたりしてよいです。

ただGitHub PagesはJekyll Pluginなどが使えなくて、Octopressとか使って若干違う構成になっていることもあるので注意です。鵜呑みコピペ怖い。

結論

Jekyll on GitHub Pages with Twitter Bootstrap 便利すぎる。

Comments