Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

Quick-start guide

If you already have a full Ruby development environment with all headers and RubyGems installed (see Jekyll’s requirements), you can create a new Jekyll site by doing the following:

# Install Jekyll and Bundler gems through RubyGems
~ $ gem install jekyll bundler

# Create a new Jekyll site at ./myblog
~ $ jekyll new myblog

# Change into your new directory
~ $ cd myblog

# Build the site on the preview server
~/myblog $ bundle exec jekyll serve

# Now browse to http://localhost:4000

If you encounter any unexpected errors during the above, please refer to the already-mentioned requirements page, as you might be missing development headers or other prerequisites.

Your first Jekyll website

Now it’s your turn. Plenty of resources are available to help you build your first Jekyll website:

  • The official Jekyll website is a great place to start with in-depth documentation on all of Jekyll’s features.
  • Jekyll.tips has a video tutorial series covering core Jekyll topics.
  • Have a look at Jekyll templates on GitHub to see how they’re put together: Frisco for marketing websites, Scholar for documentation and Urban for digital agencies.

If you’re migrating, Jekyll has tools to import posts from WordPress and WordPress.com websites. After importing, you’ll need to manually migrate or create the layouts, pages, CSS, JavaScript and other assets for the website.

Documentation

Guide to Jekyll covering installation, writing, customization, deployment, and more.

Jekyll Admin

A Jekyll plugin that provides users with a traditional CMS-style graphical interface to author content and administer Jekyll sites. The project is divided into two parts. A Ruby-based HTTP API that handles Jekyll and filesystem operations, and a Javascript-based front end, built on that API.

Jekyll Admin

Installation

Refer to the installing plugins section of Jekyll’s documentation and install the jekyll-admin plugin as you would any other plugin.

  1. Add the following to your site’s Gemfile:
    gem 'jekyll-admin', group: :jekyll_plugins
  2. Run
    ~ $ bundle install

Usage

  1. Start Jekyll as you would normally
    ~ $ bundle exec jekyll serve
  2. Navigate to http://localhost:4000/admin to access the administrative interface

Conclusion

If you’re interesting in trying out Jekyll you’re in the right place! This post takes you through everything you need to know from installing Jekyll, to advanced use cases.

Sources:
Jekyll For WordPress Developers – Smashing Magazine
Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs

Related:

How Static Site Generators Will Affect The Web Design Industry

David

Graphic and website designer, currently, I attend to the maintenance of about thirty sites for existing clients as well as creating websites for the new ones. In my free time, I get into the secrets of the world of Linux, SSH, WP-CLI and I’m preparing this blog.

More:

Static or Customized! Which WP Site Will Suit Your... Business owners are often caught perplexed, facing a dilemma of whether to choose a static business website or a custom site. Both the sites have gain...
20 Great WordPress Plugins to Improve your sites This post will show you a list of all the most important WordPress Plugins from 2013, that we personally use these days. These plugins are must have ...
Talisman Active Desktop v1.5 On the desktop we use super shell Talisman, we publish our theme Talisman Active Desktop, which we placed in the directory of themes that can be downl...
Editors Keys – Adobe Photoshop Keyboard When your at you're studio set up and working on your latest design, did you know, around 30% of your time is spent clicking through the Adobe Photosh...
12-Step Guide for creating a small WordPress Websi... Creating a website from scratch can be a daunting task especially if you are attempting it for the first time. Building and putting together a fully-f...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.


Newsletter

Join our mailing list to receive the latest news and updates.

You have Successfully Subscribed!

Pin It on Pinterest