Inside PRESSBLOG

PRESSBLOG / Instagram / SNS マーケティングとか

jekyll のローカル環境構築方法

f:id:technuma:20160927041626p:plain

はじめに

前回の記事でjekyll nowの使い方をまとめました。
記事にもある通り、かんたんな構築は管理画面で完結できるため非エンジニアでもサイト公開可能です。
しかし、詳細なテーマカスタマイズを行いたい場合はHTML,CSS,JSを編集する必要があります。
そこで、jekyllのローカル環境構築方法をご紹介します。

lab.dessart.co.jp

実際にさわってみてわかったこと

  • CoffeeScriptを使用可能
  • Sassを使用可能
  • if, loop, 変数などの基本的な処理を使用可能

手順

1. jekyll のgemをインストール

$ gem install jekyll

2. jekyll-sitemap の gem をインストール

$ gem install jekyll-sitemap

3. jekyll-feed の gem をインストール

$ gem install jekyll-feed

4. サーバー起動(デフォルトの設定を読み込む場合)

デフォルト以外の設定を読み込む必要がある場合は5へ

$ jekyll serve

~ ~ ~

Configuration file: /Users/technuma/works/technuma.github.io/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.[f:id:technuma:20160930020957p:plain]

6へ

5. サーバー起動(デフォルト以外の設定を読み込む場合)

本番とURL構造が違う場合などは、開発用のconfigを用意します。
(今回は_config-dev.yml)
configオプションを使用することで指定された設定ファイルを読み込むことができます。

$ jekyll serve --config _config-dev.yml

~ ~ ~

Configuration file: _config-dev.yml
    Server address: http://127.0.0.1:4000/test/
  Server running... press ctrl-c to stop.

6. 起動完了

無事起動できました。

f:id:technuma:20160930020957p:plain

おわりに

割と手軽にローカル環境を構築することができたかと思います。
jekyll, github pages も進化してきているのでぜひ試してみてください。

 

© DESSART & Co.