Jekyllのインストールでやったこと

Jekyll がブログとしてとりあえず機能するまでを書いてみました。

  1. Jekyll のインストール
  2. jekyll-template を利用
  3. scss | sass のインストール
  4. pygmentize(シンタックスハイライト)の設定
  5. RSS フィード機能を設定

こんな感じで進めます。

お世話になったサイト

非常に分かりやすく丁寧に書いてあり、ほんと参考になりました。ぜひ訪問してみてくださいね。

前準備

作業は主に黒い画面(ターミナル)で行います。

主な環境

  • Mac OS X 10.8.4
  • ruby 1.9.3p429
  • Jekyll 1.0.3

Jekyll インストール開始

ブログを作るディレクトリを作って、移動

[shell]
$ mkdir myblog
$ cd myblog
[/shell]

jekyll をインストールする準備

[shell]
$ bundle init
[/shell]

Gemfileに以下を追加

[shell]
$ emacs Gemfile
gem ‘jekyll’ #追加
gem ‘redcarpet’ #追加
[/shell]

jekyll をインストール

[shell]
$ bundle install –path vender/bundle
[/shell]

jekyll-template の利用

1から作るよりテンプレートを利用した方が早く良いものが作れそうなので jekyll-template を使わせてもらうことにします。

jekyll-template のインストール

[shell]
$ cd ..
$ git clone https://github.com/krisb/jekyll-template.git
$ rsync -av –progress jekyll-template/ myblog/ –exclude .git –exclude README.md
$ cd myblog
[/shell]
jekyll-template の内容が myblog の中へ同期されました。

とりあえず実行(失敗)

[shell]
$ bundle exec jekyll serve –watch
[/shell]
こういったエラーが出ました。
[shell]
Generating…
ERROR: YOUR SITE COULD NOT BE BUILT:
————————————
Post 0000-00-00-welcome-to-jekyll.markdown.erb does not have a valid date.
[/shell]

_config.yml の exclude に vender を追加するといいようです。
(アンダースコア(_)は半角です。)

[shell]
$ touch _config.yml
$ emacs _config.yml
exclude: [‘Rakefile’, ‘README.md’, ‘config.rb’, ‘vender’]
[/shell]

もう一度 実行

[shell]
$ bundle exec jekyll serve –watch
[/shell]
今度は動いたようです。
ブラウザで
http://localhost:4000/
にアクセスしたら表示出来ました。

scss | sass をインストール

css の編集では scss を使いたいので jekyll-sass をインストールします。

Gemfileに追加

[shell]
$ emacs Gemfile
gem ‘jekyll-sass’ #追加
[/shell]

インストール

[shell]
$ bundle install –path vender/bundle
[/shell]

プラグインを格納するフォルダを作成

[shell]
$ mkdir _plugins
[/shell]

プラグインを追加

[shell]
$ emacs _plugins/bundler.rb
require ‘rubygems’ #追加
require ‘bundler/setup’ #追加
Bundler.require( :default ) #追加
[/shell]

_config.yml に追加

[shell]
$ emacs _config.yml
sass: #追加
syntax: scss # scss|sass #追加
style: compressed # nested|expanded|compact|compressed #追加
[/shell]

これで scss が使えるようになるはずです。

pygmentize(シンタックスハイライト)を使う

cssフォルダは assets というフォルダの中に css というフォルダを作り、
シンタックスハイライト用の CSS を書き出します。

[shell]
$ mkdir -p assets/css
$ pygmentize -S default -f html > assets/css/syntax.css
[/shell]

コードをこんな感じで挟んで使います(Ruby の場合)。

{% highlight ruby linenos %}
ここにコード記述
{% endhighlight %}
({}は全角で記述しているので半角に修正してください。)

RSS フィード

snaptortoise / jekyll-rss-feeds こちらを使わせていただきます。
ダウンロードしたら feed.xml を myblog フォルダの直下へ移動し、_config.ymlを再度編集します。
[shell]
$ emacs _config.yml
name: 【ブログ名】 #追加
description: 【ブログの説明】 #追加
url: 【URL】 #追加
[/shell]

基本的な設定は以上です。後はデザインでcssを頑張るのみです。

制作したアスタデザインのブログも見てみてくださいね。
アスタデザインのブログ

鹿児島県の出水市という所に住んでいまして、インターネット周辺で色々活動して行きたいと思ってるところです。 Webサイト作ったり、サーバ設定したり、プログラムしたりしている、釣りと木工好きなMacユーザです。 今はデータサイエンスに興味を持って競馬AI予想を頑張ってます。

1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください