Simple Jekyll Site
This is an example of a very basic Jekyll site. It lays down the basic folder structure, uses very basic CSS to make it look presentable and leaves everything else up to you.
This is a perfect starting point for building your own Jekyll site.
Development time dependencies:
- Rdiscount (optional - comment out in
_config.yamlto use Maroku)
- Node.js & Grunt.js (optional - only if you wish to use GruntJS)
- A web server (any will do)
To use this template:
- Clone to some directory
_config.yamlwith your name, blog title, description and etc...
style.cssand HTML files in
- Create blog entries in
_posts/- work off the sample posts there
jekyll serveto generate site locally
- View it by going to
http://localhost:4000and make sure it looks good
- If all is well, upload contents of
_siteto your server
- Repeat steps 4-7 to update blog
Following features are available:
- Automatically generate a valid RSS feed (see feed.xml in root directory).
- Automatically generate a valid Google Sitemap (see sitemap.xml in root directory).
- Organize your posts into categories and automatically generate category index pages.
- Can be deployed in a subdirectory
To use the category feature simply add category tag at the top of your post:
You can specify multiple categories using a comma separated list.
The plugins in the
_plugins directory are not compatible with Github pages. If you want to deploy your site to Github, you might need to give up on these plugins.
Deploying to Subdirectory
You can deploy to a subdirectory. For example instead of running your site at
http://foo.tld/ you can instead put it in
http://foo.tld/blog/. To do this use the
baseurl settings in
_config.yaml. The former is used for absolute links (like in the RSS feed) while the latter is used for relative links (like everywhere on the front page). For example if you set it to:
baseurl: /blog url: http://foo.tld/blog
Then the html files will still be generated in
_site but all the links will be generated either relative to
/blog or using the absolute url of
Note: when you run the built-in Jekyll server you will need to access your site by going to
Linting & Validation
You can use Grunt.js to automatically validate the HTML in your generated site. First install the dependencies:
You can use the following Grunt commands:
grunt jshint- to lint your
scripts.jsfile using JSHint
grunt csslint- to lint your
grunt validation- to validate all the HTML files in
Please note that validation is done against the W3C server. If you have many pages, you may get temporarily locked out for abuse.
To lint js and css simultaneously simply run
grunt with no parameters. Validation is only on-demand because of the potential lockout.
This sample layout uses plugins created by Dave Perret to generate categories and sitemaps. Credit where credit is due. Please see the
_plugins directory for details.
Just so you can see how it looks: