kjaer personal blog. Built with Jekyll.
The site builds with Jekyll, but also has a few NPM dependencies. To install all dependencies, you'll need Node and npm, as well as Ruby and bundler. You can then run:
Writing a post
See the Jekyll Documentation for how to create a Jekyll post.
Supported YAML Frontmatter fields
|The title of the post
|A brief description of the post. This description may be used by search engines, and will be used when the post is shared on Facebook and Twitter.
|The hero image
|Hex color code of the color (in quotes) that will be shown behind the hero image. This is especially useful if the hero image fails to load, or takes a while to do so. If we show the image's average color, the flash of the image appearing will be less harsh. I've been using Color Thief to get this average color.
false, there won't be a Disqus comment field on the post
false, the post won't be rendered or published
true, the post will be published, but won't be listed in the RSS feed or on the front page
true, there will be a link leading to the post's GitHub edit history at the bottom of the post
|If a HN link is specified, there will be a link leading to the HN discussion at the bottom of the post
On the front page of the site, excerpts of every post are shown. On this site, a post "breaks" on the first HTML comment by default, so the end of the front page's excerpt can be marked as such in a post:
title: How to define excerpts within the post
Here's an intro. See you after the break!
<!-- More -->
Here's the rest of the post.
title: A sample post
description: A sample post showing how YAML Frontmatter works on this site.
This post is an example.
<!-- More -->
This is the end of the article!
Building the site
In a development environment, the following command should suffice:
In production, we're not serving the site locally, we're building it. This is done through the following command:
To prepare the site for production, a few additional steps are taken.
- Autoprefixer ensures that all the CSS is compatible with the 2 last versions if every browser
- Hero images are resized to the breakpoints defined in
- Assets are Zopfli-compressed
There's a grunt task set up that handles the first two:
The last one is (for now) a simple bash command to the zopfli binary. It would be great to manage this through Grunt though.
zopfli --i1000 $files
Luckily, this is all done automagically with Travis CI. You can see the scripts it runs in the
Wishlist / Todo :star:
- [ ] Rework
_config.ymlfile to provide more optional switches
- [ ] Rework
_config.yml's prose.io settings
- [ ] Rework 404 page
- [ ] Set up Grunt to take care of Zopfli compression