ラベル Jekyll の投稿を表示しています。 すべての投稿を表示
ラベル Jekyll の投稿を表示しています。 すべての投稿を表示

2015年11月16日月曜日

Jekyll に theme を適用する方法

概要

Jekyll のデザインには様々なテーマが公開されており、これを使って簡単にデザインをカスタマイズすることができます
今回はテーマを使って jekyll build する方法を紹介します

環境

  • Mac OS X 10.10.5
  • Jekyll 2.5.3

テーマを適用してみる

http://jekyllthemes.org/ から好きなテーマを選択してください
今回は Jekyll Now というテーマを使ってみます

  • mkdir -p jekyll/work
  • cd jekyll/work
  • git clone https://github.com/barryclark/jekyll-now.git
  • gem install jekyll-sitemap
  • cd jekyll-now
  • jekyll server

で起動まで実施します
途中サイトマップを表示するためのプラグインをインストールしています
jekyll server を実行すると localhost:4000 で LISTEN するのでブラウザでアクセスしてみましょう

今回のテーマだと以下のようなサイトが表示されると思います
jekyll-apply-theme.png

ちょっとカスタマイズする

名前を変更する

  • emacs jekyll/work/jekyll-now/_config.yml

の

name: Your Name

を編集して再度 jekyll server すれば変更できます

記事をポストする

  • cd jekyll/work/jekyll-now
  • cp _posts/2014-3-3-Hello-World.md _posts/2015-11-16-sample-post.md
  • emacs _posts/2015-11-16-sample-post.md

で jekyll server を実行すれば (内容は特に変更しなくても) 記事が増えていることが確認できると思います
あとはこんな感じで markdown ファイルを増やしていけば OK です

ビルドする

サイトなどで公開するための HTML ファイルを生成します

  • cd jekyll/work/jekyll-now
  • jekyll server

で _site というディレクトリ配下に HTML や CSS が作成されるのでそれをそのまま Web サーバの DocumentRoot に配置すれば OK です

最後に

既存の Jekyll に対して適用するやり方は今回紹介しませんでしたが、おそらく _posts 配下にある .md ファイルを一旦退避し、テーマをダウンロード後に _posts ファイルに移動すれば適用できるはずです
プラグインを使って記載されている markdown やレイアウトがある場合はプラグインの再インストールも必要になると思います

特にデザインを自分でゴリゴリ作成したいということでなければ、テーマをベースに作成するといいと思います
レイアウトや 404 ファイルなどサイトの公開に必要なファイルは一通りそろっている状態なので、これをベースにカスタマイズしたほうがいいと思います

自分で作成したテーマはもちろん jekyllthemes.org で公開することもできます

あと Jekyll 3.0 が 2015/10/26 に正式にリリースされましたが、 3.0 だともしかしたらエラーになるテーマがあるかもしれません

投稿者 時刻: 0 コメント
ラベル: ,

2014年11月12日水曜日

既存のJekyll環境にBootstrapを適用する方法

概要

Jekyllをそのまま使っていてちょっとデザインが味気ない場合にBootstrapを適用することができるのでその方法をご紹介します
バージョンによって設定方法が変わる可能性がありますのでご了承ください

環境

  • Ruby 1.9.3p286
  • Jekyll 1.2.1
  • Jekyll Bootstrap 0.3.0

各種設定

Jekyll Bootstrapの適用

既存の環境はこんな感じです

[root@localhost jekyll]# ls -ltr
合計 28
-rw-r--r--  1  134 10月 15 16:56 2013 _config.yml
drwxr-xr-x  4 4096 11月 11 11:23 2013 assets
drwxr-xr-x  3 4096 11月  7 13:30 2014 _posts
drwxr-xr-x  2 4096 11月 11 15:25 2014 _layouts
-rw-r--r--  1  500 11月 11 15:29 2014 index.md
drwxr-xr-x 74 4096 11月 11 15:29 2014 _site
  • デフォルトからほぼ変更していない状態
  • index.mdとassets配下にcssを若干置いたくらい
  • _layouts配下も記事のテンプレートとなるHTMLと若干のcssがある
  • _post配下には記事となるmdファイルがたくさんある

この状態から

git clone 'https://github.com/plusjade/jekyll-bootstrap.git'
cp -ipr _posts/* jekyll-bootstrap/_posts
cd jekyll-bootstrap/
jekyll build
jekyll server

とすればhttp://hostname:4000でJekyll Bootstrapが適用されたUIが確認できると思います
基本的には_posts配下の記事を移動するだけです

ビルドした際にエラーが出る場合は_postsディレクトリ配下に移動したmarkdownファイル内に使用できない文字が含まれていたりmarkdownファイルのフォーマットがおかしい可能性があるのでエラーの内容を確認してmarkdownファイルを修正してください

ここまでがJekyll Bootstrapの適応に必要な作業です
適用すること自体は非常に簡単でした
以下は必要に応じて作業してください

広告を外す

どうやらJekyll Bootstrapはコメント機能にDisqusを使っているようです
デフォルトだとDisqusの広告機能が有効になっておりアダルトやらbillの広告多数あります
外す方法はこちら参考にしてみてください

そのままでは移植できなかったフォーマット

_postsファイル配下にmarkdownファイルを移動した際にエラーとなったので対処しました

  • `（backticks）が使えない
    デフォルトだと使えません
    以下の手順でredcarpet2というJekyllPluginをインストールする必要があります
gem install albino redcarpet

cd jekyll-bootstrap
git clone https://github.com/nono/Jekyll-plugins.git
mv Jekyll-plugins/redcarpet2_markdown.rb _plugins/
rm -rf Jekyll-plugins/

そして_config.ymlに対して以下を追記します

markdown: redcarpet 
redcarpet: 
    extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]

これでGithubFlavorのようにソースコードを表示するときのbacktickts3つが使えるようになります

その他設定箇所

  • _config.yml
    • title, authorを変更
    • comments, analyticsをコメントアウト
      • commentsの設定箇所をコメントアウトすれば
    • BASE_PATHの設定
      • /以外がindex.htmlにある場合に設定してください
      • ビルドする際はjekyll build --safeオプションを指定してください（指定しないとBASE_PATHがうまく反映されませんでした）
      • BASE_PATH: /blog
  • トップ画面の不要部分を削除（index.md）
    • titleの変更
    • taglineのSupporting taglineを削除
    • Read ~ Sample Postsまでを削除
    • TODO部分の削除
  • 不要ファイルの削除
    • _posts/core-samples/2011-12-29-jekyll-introduction.mdの削除
    • pages.html, categories.html の削除（ヘッダのナビゲーションバーもなくなります）
  • 検索フォームの削除
    • _includes/themes/bootstrap-3/default.html内でフォームを管理しているのでその部分を削除
      • 検索機能がうまく動作しなかったので外しました

以上です
Jekyllは便利ですね

投稿者 時刻: 0 コメント
ラベル: ,

2014年3月28日金曜日

Jekyll で Table Of Contents を表示する方法

■環境
CentOS 5.10 64bit
Ruby 2.1.1
Gem 2.2.2
Jekyll 1.5.0
※Jekyllのインストールおよび設定はこちらから

■nokogiri のインストール
gem install nokogiri --no-rdoc --no-ri

■jekyll-toc-generator のインストール
cd /var/tmp
git clone https://github.com/dafi/jekyll-toc-generator.git
cd jekyll-toc-generator/
cp -ipr _plugins /jekyll/to/path
    「/jekyll/to/path」はjekyll buildしているmarkdownファイル等があるディレクトリを指定します
cp -ipr _plugins /jekyll/to/path
cp -ipr css/toc.css /jekyll/to/path/_layouts
    「_layouts」フォルダがまだ作成されていない場合はこちらを元に初期設定を済ませてください

■layout.htmlの修正
1. headタグ内にcssの宣言を追加
<link href="toc.css" media="screen" rel="stylesheet" type="text/css"></link>
2. tocを表示するための宣言を追加
bodyタグ内に存在する{{ content }}を以下に置き換えてください
{{ content | toc_generate }}

■動作確認
cd /jekyll/to/path
jekyll build
jekyll server --watch

http://localhost:4000/
    markdownのファイル名がindex.mdではない場合はmarkdownファイル名.htmlを後ろに付けてアクセスしてください

投稿者 時刻: 0 コメント
ラベル: ,

2013年10月18日金曜日

Jekyll でカテゴリを設定する方法

例えばある_post配下の記事（test.md）に対してカテゴリを設定したい場合は

vim _post/test.md

---
layout: post
title: テスト記事
date: 2013-10-15
category: sample
---

･･･以下、markdownが続く

とmarkdownファイルの冒頭に追記することで「jekyll build」を実行すると

_site/sample/2013-10-15/test/index.html

といった感じでcategory用のフォルダを自動的に作成してくれます

_config.ymlファイルは以下のような設定にしておきます

permalink: /:categories/:year-:month-:day/:title

たぶんこれでできると思います
投稿者 時刻: 0 コメント
ラベル: ,

2013年10月11日金曜日

【Ruby】Jekyll のインストールとサンプル実行

■環境
CentOS 5.9
jekyll 1.2.1
ruby 1.9.3p125
gem 2.1.4
※rubyとgemのインストールは以下を参考にしてみてください
http://kakakikikeke.blogspot.jp/2012/07/rubychef.html
http://kakakikikeke.blogspot.jp/2013/03/chefomnibus.html

■インストール手順
1. 初期設定
gem install jekyll --no-rdoc --no-ri

vim index.md
---
layout: layout
title: test jekyll
---
#Welcome to my jekyll
jekyll build
jekyll server

でブラウザからhttp://localhost:4000/にアクセスしてページが表示されることを確認する

2. レイアウト設定
mkdir _layouts
touch _layouts/layout.html
vim _layouts/layout.html
<!DOCTYPE html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>{{ page.title }}</title>
</head>
<body>
  {{ content }}
  <p>- rendered with layout template -</p>
</body>
jekyll build
jekyll server

でブラウザからhttp://localhost:4000/にアクセスしてページが表示され若干レイアウトが変わっていることを確認する

■Tips
「no access permission to `/'」が出る場合は権限等を確認してみてください

■メモ
.mdファイルの中ではLiquidテンプレートというruby構文がmarkdown記法以外にも使える
グローバル変数としてpageとsiteという変数が使用できる
_config.ymlにはサイト全体の設定や変数を定義できる
_post配下には記事用のmarkdownを作成し配置する
_layoutsフォルダ配下には全体の構成を管理するhtmlテンプレート配置する
_site配下には実際に作成されたhtmlファイルやcssファイルが配置される
_site配下をapache上のDocumentRootにデプロイするとそのままサイトとして見れる


■参考サイト

P.S 20151116
最近だと jekyll new というコマンドがありこれでテンプレートとなるサイトを一発で作成できるみたい

  • cd work
  • jekyll new .
  • jekyll server

work ディレクトリ配下は空でなければいけません

投稿者 時刻: 0 コメント
ラベル: ,
登録: 投稿 (Atom)