hardcodr

a programmers diary

blog.init.sh

For my first post, I thought it would be interesting to share how I set up this blog engine. This blog runs on Octopress , which is built on Jekyll and is quite easy to configure. Below are some of the customizations I implemented:

  • Changed a custom background image in the header.
file:sass/custom/_styles.scss
1
2
3
4
header[role="banner"] {
    background-image: url(/images/header_bg.png);
    background-repeat: no-repeat;
}
  • Changed the navigation bar at the top to improve usability.
  • IBM Plex series of fonts:
file:_includes/custom/navigation.html
1
2
3
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
file:sass/custom/_fonts.scss
1
2
3
4
5
6
$sans: "IBM Plex Sans", sans-serif;
$serif: "IBM Plex Serif", serif;
$mono: "IBM Plex Mono", monospace;
$heading-font-family: $serif !default;
$header-title-font-family: $heading-font-family !default;
$header-subtitle-font-family: $heading-font-family !default;

  • Custom homepage instead of the default page.

The rest of the blog uses the vanilla Octopress theme, and it’s currently hosted on Google App Engine.