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.

Read More

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.

Read More

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-sans
• font-serif
• 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.

1
2
3
4
5
6
7
8
9
10

// Fonts
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
font-serif = Georgia, "Times New Roman", serif
font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.0.3"
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em

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.

1
2
3
4
5
6
7
8
9
10

// Fonts
font-sans = Ubuntu, sans-serif
font-serif = Ubuntu, serif
font-mono = "Ubuntu Mono", monospace
font-icon = FontAwesome
font-icon-path = "fonts/fontawesome-webfont"
font-icon-version = "4.0.3"
font-size = 14px
line-height = 1.6em
line-height-title = 1.1em

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

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

1

<link href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" rel="stylesheet" type="text/css">

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.

1

<link href="http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700|Ubuntu:400,700,400italic" rel="stylesheet" type="text/css">

Adding the Ubuntu Google Fonts to Hexo

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.

1
2
3
4
5
6
7
8
9
10
11
12
13

  <title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>
  <% if (theme.rss){ %>
    <link rel="alternative" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
  <% } %>
  <% if (theme.favicon){ %>
    <link rel="icon" href="<%- theme.favicon %>">
  <% } %>
    <link href="http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700|Ubuntu:400,700,400italic" rel="stylesheet" type="text/css">
  <%- css('css/style') %>
  <%- partial('google-analytics') %>
</head>

Line 10: Ubuntu fonts included from Google Fonts

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:

In Summary

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.

Thank you.
@jr0cket

---

This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket

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).

There are more details about migration steps on the Hexo Github project.

Here are the essential details and options for upgrading to Hexo 2.6 onwards.

Read More

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.

Read More

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.

Read More

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.

Read More

You can use Git to manage version of your content effectively. You can also use Git to manage any changes you make to the theme you use.

Rather than keep all these seperate changes in one repository, you can use Git submodules to manage your theme and content changes seperately.

Read More

I found writing articles with Blogger.com had become slow and a little frustrating. So I decided to switch to Hexo.io as I can write articles anywhere I have a text editor (usually Emacs). Hexo also creates a responsive and fast static website, so when people want to read the articles (including myself when I have forgotten something) then they can do so quickly and across multiple devices. As its a static site, I can deploy it anywhere.

So how do I get all of that content I created out of Blogger and into Hexo. Luckily Hexo has a migration tool to make things easier

Read More

Hexo displays posts in a summary format by default, showing the title and content of the article up to the point where the more marker is used:

Read More