Hello World with Jekyll

Ruby environment

Jekyll is a simple, blog-aware, static site generator powered by Ruby programming language. Open the console and run ruby -v and you should read a message of what Ruby version you have installed.

dan@binsy:~/Projects$ ruby -v
ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-darwin14]

If an error message printed, install Ruby and rerun ruby -v to verify Ruby is installed. Above you can see ruby 2.2.0p0 is installed.


dan@binsy:~/Projects$ gem install jekyll
Fetching: fast-stemmer-1.0.2.gem (100%)
Building native extensions.  This could take a while...
Successfully installed fast-stemmer-1.0.2
Fetching: classifier-reborn-2.0.3.gem (100%)
Successfully installed classifier-reborn-2.0.3
Fetching: ffi-1.9.6.gem (100%)
Building native extensions.  This could take a while...
Successfully installed ffi-1.9.6
dan@binsy:~/Projects$ jekyll -v
jekyll 2.5.3

Hello World

Create new Jekyll project.

dan@binsy:~/Projects$ jekyll new hello-world-jekyll
New jekyll site installed in /Users/dan/Projects/hello-world-jekyll.
dan@binsy:~/Projects$ cd hello-world-jekyll/
dan@binsy:~/Projects/hello-world-jekyll$ ls -1

Edit site information before generating hello-world-jekyll site

# ~/Projects/hello-world-jekyll/_config.yml
# Site settings
title: Hello World Jekyll
email: your-email@domain.com
description: Static web site generated by Jekyll
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username:  jekyll

# Build settings
markdown: kramdown
dan@binsy:~/Projects/hello-world-jekyll$ jekyll serve
Configuration file: /Users/dan/Projects/hello-world-jekyll/_config.yml
            Source: /Users/dan/Projects/hello-world-jekyll
       Destination: /Users/dan/Projects/hello-world-jekyll/_site
 Auto-regeneration: enabled for '/Users/dan/Projects/hello-world-jekyll'
Configuration file: /Users/dan/Projects/hello-world-jekyll/_config.yml
    Server address:
  Server running... press ctrl-c to stop.

Visit localhost:4000, voiala!

Hello World Jekyll site in browser


I know, the design is ugly as fuck. Don’t get discouraged, we’ll get to the styling/theming/designing soon. First, let’s focus on what makes static web sites powerful. Next tutorial will teach you how deploy Hello World on a S3 bucket.