Using a Static Site Generators like Hexo gives a developer a very fast blogging workflow, using familiar tools and giving the ability to write offline. Content is written in markdown, keeping it portable between any blog generators and making it easy to version in Git. You can also use Git to deploy your site quickly, even over slow networks.
Static sites can be hosted anywhere and are fast to serve and easy to cache. For example, Github Pages offers a very fast way to host your site.
Lets take a look at Hexo, my favourite static site generator.
Adding images to a blog post helps the audience undersand what the will get from reading the article and if it will be relevant for the. Images also aid the understanding of the topic you are covering, especially if you are explaining something technical or more complicated.
The default theme for hexo only provides a single image style, so here I will create several styles of image to help convey the topic and details of every post.
The font that comes with the default hexo fault is quite nice, however, I like using the Ubuntu font especially for code. As the Hexo theme uses Google fonts in some places already, then it was really easy to change which one Hexo uses. Here I will show you how to change over to the Ubuntu font family for text and sorce code using Google Fonts.
Defining fonts in Hexo
As Hexo uses Google Fonts by default, then you can simply define which font you want by using the font name. The default Heox theme, landscape, uses a file called source/css/_variables.styl to define common variables, such as fonts.
Viewing the _variables.styl file you can see the fonts that Hexo uses by default, which are assigned to three variables:
font-mono - (source code)
font-icon - (icons in navbar)
Font-icon is configured to use Font Awesome to make it quick and simple to add logos such as twitter, facebook, linkedIn and RSS feeds. Using font icons is more efficient than using image files as they are scalable, so no need for multiple image files for the logos.
This is what the fonts in the hexo default theme look like:
Updating Hexo to use the Ubuntu fonts
I prefer to use the Ubunt fonts, for text and for source code. So I updated the source/css/_variables.styl file with Ubuntu for the font-sans and font-serif variables and Ubuntu Mono for the font-mono variable.
Using Ubuntu fonts just works on my laptop, as I use Ubuntu as my operating system and the Ubuntu fonts are just there. When I publish my Hexo website, I cant guarantee everyone is using Ubuntu so I use Google Fonts to spread the Ubuntu font love.
Google fonts are a wide range of open fonts hosted in the cloud and part of a content delivery network (CDN). This means that a whole range of fonts are freely availble to be used in your own websites and apps. The content delivery network ensures these fonts are loaded (relatively) quickly anywhere in the world.
You can browse the fonts avaible for use and see the code to include them in your websites by visiting google.com/fonts
To keep these fonts as lightweight as possible whilst loading into the browser, I chose only the Ubuntu fonts I needed. In this case, I chose the Ubuntu Normal and Italic fonts at 400 weight and bold at 700 weight
I also want to show code in the Ubuntu Mono typeface at both 400 and 700 weight for normal and bold text respectively. Google Fonts website generates me the following link I can use in my Hexo website.
I updated my custom theme to use the Ubuntu Google fonts by editing the layout/_partial/head.ejs file. This already had a Google Font for Source Code Pro, so I simply replaced that line with the new URL I got from Google Fonts as above.
When Hexo generates all the theme files, the Google Docs URL for the Ubuntu fonts gets included in the head part of all pages. This ensures that even thought without Ubuntu fonts installed on their device will see the page with Ubuntu fonts.
Testing the font change
Changes to the source/css/_variables.styl file are picked up straight away if you are running the command hexo server, so all you would need to do is refresh your browser.
Hexo with the Ubuntu fonts looks like:
Changing to Ubuntu fonts or any other Google font is pretty easy with Hexo. It may not seem a big change that I have made, but as I refer to my blog many times during the week (and sometime many times a day), its nice to have a font that I find pleasing to read.
Hexo has a bit of a refactor from version 2.6 onwards to make it a bit more flexible with regard to the node modules it uses. So when you create a new Hexo project you have to add some module to that project before you can generate your site. This is an easy step as its managed by the Node package manager (npm).
The hexo theme shows code in a solid black box with syntax hightlghting to match. It gives a nice contrast to the rest of the content, however I wanted to add curves to the corner of the code boxes. I also wanted to add a margin / padding around the code box so it did not touch the edges of the post.
Whilst I like many aspects of the Hexo theme used to generate static websites, it does seem to have a lot of redundant space. So here are a few aspects of the them I have changes in order to get more of the actual content showing on the page.
FontAwesome provides a lot of icons you can use in your website instead of including image logos of various sizes. There are icons for twitter, linkedin, Github and RSS feeds. Using these icons keeps your website fast on any device or network.
I’ll explain how I configured the standard Hexo Landscape theme to add icons in my blog website navigation bar, each icon linking to the developer related sites I use such as Github and Twitter.
Hexo is a modern static website generator & bloging platform written in Node.js. It is a great way to create a blog or other content driven websites as all the content is written in markdown and can therefore be versioned with Git.
I am using Hexo for my developer blog (using blogger became very slow) and am also using Hexo for a series of online tutorials on developer tools.
I’m using Hexo as my blogging platform and wanted to customise the theme, which is broken down into many different parts to make it easier to manage and customise. In order to understand what the different parts did I fired up Google Chrome deverloper tools to quickly explore the styles of Hexo’s default theme.