How this post is configured:

1. The Header (The big image above): This is set using overlay_image. It stretches across the screen and uses an overlay_filter to make the white text “pop” against the background.
2. The Teaser (The thumbnail on the home page): This is set using teaser. Even if the header is huge, the teaser stays a neat little square/rectangle on your main list.
3. The Content Image (The one below): I’ve used a standard HTML tag to keep this one centered and sized perfectly.

Caption: This is a 400px wide centered image.

Ready for your graphics!

Once you save your new graphics as header-island.png and teaser-island.png in the assets/images/site/headers/ folder, they will automatically appear in this post.

Feel free to delete this post once you’ve seen how it looks!

Here I am looking Shocked

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.