The blog about nothing

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 like simple and minimal designs so I started to look around for inspiration and I stumbled upon @anthonyshort's site. His blog is neat and pretty much what I wanted, so I just forked it.

I ended up tweaking the design and typography a bit and do some cleanup to make it more appealing... to me (and you hopefully).

Writing

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.

Open Source

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.

mkdir blog && $_
git clone https://github.com/giuseppeg/giuseppegurgone.com .

npm install # install npm dependencies
bundle install # install jekyll and its deps

The first thing you may want to do is delete my posts. I added an npm script that does it for you.

npm run format

format will save a copy of them under _backup/.

Development

I added two npm scripts to build css and serve Jekyll (in watch mode) locally.

# compile/build the css
npm run build

# serve Jekyll locally at http://localhost:4000
npm run serve

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.

Configuration

All the settings are in _config.yml.

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 /blog from paginate_path.

navafter is used internally to decide the navigation position.
When set to true the nav is moved after the post/posts list.

Examples

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.

Code example

Array(16).join("wat" - 1) + " Batman!";

Quote

The code example above is from:

Wat — A lightning talk by Gary Bernhardt from CodeMash 2012

Video

which I am embedding here for you to watch (really do it! :)

Lists

Silly / kewl hover effect for list items:

If you were on an island and could only bring three things, what would you bring?

• pizza
• pizza
• some pics of pizza

TL;DR

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.

Figure

You can add images using the html5 figure element.

I have an instagram account where sometimes I post photos.

fin.