Jekyll is a simple, blog-aware, static site generator. It will convert text files s in various formats to ready-to-publish static website suitable for serving with your favorite web server. In this tutorial we will see how to create our first jekyll powered site.
Creating Basic site
Download and install ruby. On
Windowsdownload and install windows-based installer of Ruby. On
Linuxruby may be already installed - If it does not follow the instructions of your system package manager to install it.
bundlergem. The bundler gem will provide a consistent environment for our
jekyllproject with the exact gems and versions that are needed to build the site.Install bundler
~/sites# gem install bundler
Create new directory for our new Jekyll project. Suppose we create a new Jekyll project site called hyde under
~\sites:creating project directory
~/sites# mkdir hyde ~/sites# cd hyde
_jekylldirectorycreating project directory
~/sites/hyde# mkdir _jekyll
Create a new
_jekylldirectory. You may want to add dependencies and jekyll plugins which are needed to build the site.The Gemfile
source 'https://rubygems.org' gem 'jekyll', '~>3.0'
bundle install --binstubscommand to install
jekylland other dependencies.
~/sites/hyde# cd _jekyll ~/sites/hyde/_jekyll# bundle install --binstubs Fetching gem metadata from https://rubygems.org/ ... Using jekyll 3.1.6 Bundle complete! 1 Gemfile dependency, 15 gems now installed. Use `bundle show [gemname]` to see where a bundled gem is installed.
create our new
jekyllsiteCreating the new site
~/sites/hyde/_jekyll# cd .. ~/sites/hyde# ruby _jekyll\bin\jekyll new --force . New jekyll site installed in ~/sites/hyde.
Serving from you local machine
Congratulations, You have created a skeleton of your Jekyll project. Now, you can serve it from your local machine:
~/sites/hyde# ruby _jekyll\bin\jekyll serve ~/sites/hyde#ruby _jekyll\bin\jekyll serve Configuration file: ~/sites/hyde_config.yml Source: ~/sites/hyde Destination: ~/sites/hyde/_site Incremental build: disabled. Enable with --incremental Generating... done in 0.25 seconds. Auto-regeneration: enabled for '~/sites/hyde' Configuration file: ~/sites/hyde/_config.yml Server address: http://127.0.0.1:4000/ Server running... press ctrl-c to stop.
As we see, You can visit your new site in http://127.0.0.1:4000/
Updating your site
Jekyll watch our project directory for changes and will regenerate our site to reflect them.
Let change _posts/xxxx-xx-xx-welcome-to-jekyll.markdown to see this:
--- layout: post title: "Hello Jekyll :-)" date: 2016-07-19 13:22:15 -0700 categories: jekyll update --- This is my first post in my new Jekyll site.
In our console window, Jekyll notify us that it regenerate our site since a change was detected.
Server address: http://127.0.0.1:4000/ rver running... press ctrl-c to stop. Regenerating: 1 file(s) changed at 2016-07-20 23:23:49 ...done in 0.34375 seconds.
When we refresh the page, we will the updated site with the change we make