For a dutch blog I was searching for a nice template. Since I’m recently switched from WordPress to Jekyll it had to be a Jekyll template. Soon I realized that I could use a Jekyll ready template, but I could also convert a generic template.

So, that’s what I did. I converted a template from HTML5 UP, named “Halcyonic”. I downloaded it from HTML5up and split it into multiple pieces.
"Halcyonic"

Note however that this is a basic break up. Only the basic layout has been converted. Not everything has been converted to datafiles. Also, no new functionality has been added. if you want to use RSS feeds, integration of analytics of some kind or something else, you need to do that yourself.

Download Jekyll-Halcyonic now.

After the break there is more technical content about the template.

Folder Structure

jekyll-halcyonic/
├── _includes
|    ├── banner.html                # Banner that is shown on each page
|    ├── features.html              # Contains the features from the front page
|    ├── footer.html                # site footer
|    ├── header.html                # site header
|    ├── navigation.html            # site navigation
|    ├── scripts.html               # jQuery, plugins, GA, etc
|    ├── sidebar-left.html          # left sidebar
|    ├── sidebar-right.html         # right sidebar
|    └── widget-display.html        # displays widgets
├── _layouts
|    ├── default.html               # default page layout
|    ├── onecolumn.html             # page with one column
|    ├── twocolumn1.html            # page with two columns, a sidebar and the main text
|    ├── twocolumn2.html            # page with two columns, a sidebar and the main text
|    └── threecolumn.html           # page with three columns, a sidebar, the main text and a sidebar
├── _data                           # datafiles
|    ├── blurb.yml                  # Text in the right lower corner
|    ├── footer.yml                 # Links in the footer on every page
|    └── navigation.yml             # Navigation links on top of the page
|    └── sidebar-left.yml           # Widgets in the left sidebar
|    └── sidebar-right.yml          # Widgets in the right sidebar
├── _posts                          # location for your posts			 
|    ├── 2016-02-07-onecolumn.md    # example post with one column
|    ├── 2016-02-07-twocolumn1.md   # example post with two columns
|    ├── 2016-02-07-twocolumn2.md   # example post with two columns
|    └── 2016-02-07-threecolumn.md  # example post with three columns
├── _sass                           # Sass partials
├── assets
|    ├── css                        # compiled stylesheets
|    |    └── img                   # Images used in stylesheet
|    └── js                         # Javascripts (jQuery, skel)
├── images                          # images for posts and pages
├── _config.yml                     # Jekyll options
├── about/                          # about page
├── posts/                          # all posts
├── tags/                           # all posts grouped by tag
└── index.md                        # home page