I wanted to code something that wasn’t for work so I put together a Jekyll blog which is now running on github pages.
I ended up tweaking the design and typography a bit and do some cleanup to make it more appealing… to me (and you hopefully).
I am not a serial writer so chances are that this will end up being another blog… about nothing.
This time though I am going to try “offline-first writing” and see how it goes. I want to take breaks from the screen and go to a park at least once a week — I will bring a paper notebook and see if I can write something down.
Feel free to clone and mod this blog.
At the moment I host it together with my personal one-page site under the same github repo. So you’ll have to do a (very!) little work to clean it up.
The first thing you may want to do is delete my posts. I added an npm script that does it for you.
format will save a copy of them under
I added two npm scripts to build css and serve Jekyll (in watch mode) locally.
The CSS is under the
assets/ folder and is organized in Components.
CSS is preprocessed with Myth.
There are a few global variables in
assets/stylesheets/index.css that you can customize to tweak the look and feeling of the site.
All the settings are in
index_path is the path to the blog archive/index.
You may want to set it to
/. If you do so make sure to remove
navafter is used internally to decide the navigation position.
When set to
true the nav is moved after the post/posts list.
From here on I will showcase the features included in this theme.
Take a look at the source code of this post to see what renders what.
The code example above is from:
Wat — A lightning talk by Gary Bernhardt from CodeMash 2012
which I am embedding here for you to watch (really do it! :)
Silly / kewl hover effect for list items:
If you were on an island and could only bring three things, what would you bring?
- some pics of pizza
You can define a
tldr variable in the YAML Front Matter at the top of the file.
Jekyll will generate a TL;DR block at the beginning of the article. You can use markdown but make sure that the entire block is quoted.
You can add images using the html5
I have an instagram account where sometimes I post photos.