Build a Better Blog With a Static Site Generator

Slide Deck

Slide Deck from my talk. Download Here

These are the slides from a talk about setting up a blog with a static website generator that I gave first to GGMUG
and then the Atlanta .Net User Group.

I also did a workshop based on this content for the Atlanta Windows Apps group.

If you want a full, step-by-step course on getting your blog set up with a
static website generator, you can check out
my course on Pluralsight:
Build a Better Blog with a Static Site Generator

Adding Images to a Hexo Post via Markdown

Sample Image Added via Markdown

This is a sample image added via Markdown in an HTML figure. Also, I got a new camera
and took a pretty cool picture of a helicopter.

Maher Jendoubi asked how to add images to a Hexo blog post via Markdown.

Rather than try to post the answer in the comments of my course
Build a Better Blog with a Static Site Generator, I thought
I’d do so via a blog post so that I could go into more detail.

First let’s look at the basic Markdown syntax for inserting an image:

1
![]()

So it’s just an exclamation point (or bang) followed by square braces and then parentheses.

This is essentially the same as a link, but with the addition of the exclamation point.

The two bits of info we need to add are the Alt Text and the image location.

The Alt Text goes inside the square braces and the link goes inside the parentheses.

If we look at the image at the top of this post what I see in my text editor is this:

1
![Sample Image Added via Markdown](/content/images/2015/12/sampleImage.jpg)

If you view source on my page what you would see is this:

1
<img src="/content/images/2015/12/sampleImage.jpg" alt="Sample Image Added via Markdown">

So the next question is “Where the heck do I put the image??”.

The answer is actually “Wherever you like inside the source directory.”

In my case I have a structure inside my source directory that looks like this
(pruned for clarity here):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
├───content
│ ├───images
│ │ └───2015
│ │ ├───01
│ │ ├───02
│ │ ├───07
│ │ ├───09
│ │ ├───10
│ │ ├───11
│ │ └───12
│ └───presentations
│ └───2015
│ ├───02
│ ├───07
│ ├───10
│ └───11
├───_data
└───_posts

I put my static content inside a “content” directory because I picked up the habit
while working with ASP MVC. You might choose to simply create an “img” directory.

Any directory that starts with an underscore (_data and _posts) will be either
ignored (_data) or in the case of _posts, processed
by Hexo (converted from Markdown to HTML for instance), but anything without an
underscore will simply be copied to the output directory.

You can expand on that syntax a few ways.

I like to put my images inside <figure> tags, so the full bit I see is this:

1
2
3
4
5
<figure class="left-align quarter-width">![Sample Image Added via Markdown](/content/images/2015/12/sampleImage.jpg)<figcaption>
This is a sample image added via Markdown in an HTML figure. Also, I got a new camera
and took a pretty cool picture of a helicopter.
</figcaption>
</figure>

Yes it looks crappy all run together on that first line, but if you put in linebreaks
Hexo’s Markdown to HTML conversion will add in extra <br/> tags and screw up
your layout.

One last thing I often do is make the image itself into a link.

This one gets messy, so hold on… We’ll make it simply link to the full image itself.

1
[![Sample Image Added via Markdown](/content/images/2015/12/sampleImage.jpg)](/content/images/2015/12/sampleImageFullSize.jpg)

And here is the result:

Sample Image Added via Markdown

The messy part you see is that the entire image syntax goes inside the link’s square brackets.

That is very easy to get wrong. This is another bit where using your text editor’s
snippet functionality can help (covered in Module 6 of my course).

I hope this helps! Let me know in the comments if you have any questions.

Using Hexo Data Files

Alt Text

Learn how to use Hexo’s Data Files.

If you have some data you’d like to load from a file and use to generate a widget
for your Hexo blog, Data Files are just the ticket.

Or rather they would be if they worked.

Scratch that… they actually work just fine, but the documentation is kind of wrong (as of
the time I’m writing this at least).

The idea is that you can create either a YAML or JSON file and store it in a directory
called _data in your source directory, then spin through all the items in it in code.

Here’s what the docs show:

1
2
3
{% for link in site.data.menu %}
<a href="{{ link }}">{{ loop.key }}</a>
{% endfor %}

One of the comments says that the listed code works for Swig, but since everything else is
documented for EJS it is a bit confusing.

So let’s make a widget that uses a Data File successfully.

That’s exactly how I implemented my blog’s Popular Posts widget.

The first thing we need is a file with data.

Since I have some characters that don’t play well with YAML, I have to wrap everything
up in quotes.

My current file (popularposts.yml) looks like this:

1
2
3
4
5
6
7
8
9
10
"Formatted JSON in Notepad++": "/formatted-json-in-notepad/"
"Is It Hot In Here Or Is It Just My CPU?": "/is-it-hot-in-here-or-is-it-just-my-cpu/"
"DIY Productivity Tablet": "/diy-productivity-tablet/"
"Teaching PowerShell To Speak": "/teaching-powershell-to-speak/"
"Kindle To Raspberry Pi Via Remote Desktop": "/kindle-to-raspberry-pi-via-remote-desktop/"
"Configure Raspberry Pi As WiFi Router": "/configure-raspberry-pi-as-wifi-router/"
"Formatted JSON In Notepad++ Video": "/formatted-json-in-notepad-video/"
"My Secret Weapon: Pluralsight": "/my-secret-weapon-pluralsight/"
"Vim Eye For The Visual Studio Guy": "/vim-eye-for-the-visual-studio-guy/"
"Visual Studio Tip: Add Existing Directory": "/visual-studio-tip-add-existing-directory-aspx/"

If you’ve read my last post Creating a Hexo Widget,
then you know that the base of a widget is this:

1
2
3
4
5
6
7
8
<% if (someConditionalIsTrue){ %>
<div class="widget-wrap">
<h3 class="widget-title">Your Widget Title Here</h3>
<div class="widget">
Your widget content here.
</div>
</div>
<% } %>

So we just need to adapt that and replace “Your widget content here” with code to spin through our list and spit out links.

Here’s what my popularposts.ejs looks like:

1
2
3
4
5
6
7
8
9
10
11
12
<% if(site.data.popularposts) {%>
<div class="widget-wrap">
<h3 class="widget-title">Popular Posts</h3>
<div class="widget">
<ol class="numbered-list">
<% for (item in site.data.popularposts) { %>
<li><a href="<%= site.data.popularposts[item] %>"><%= item %></a></li>
<% } %>
</ol>
</div>
</div>
<% } %>

As you can see the concept is the same, just the syntax is different.

On the first line you can see how to reference your data.

site.data.popularposts where “popularposts.yml” is the file name.

On line 6 you can see how to implement a for loop over the data items, and
on line 7 you can see how to reference both the keys and values.

It’s not really difficult and it works well, so it’s a shame the docs are confusing
people.

If you’d like a complete walkthrough of how to set up your blog with either Hexo
or DocPad, be sure to check out my Pluralsight course
Build a Better Blog with a Static Site Generator.

I’ll walk you through everything from installing Hexo to prettying up the Landscape theme
to adding comments with Disqus and deploying with Git.

Creating a Hexo Widget

Widget

Extend your Hexo blog with specialized widgets.

Hexo is an excellent static website generator for creating a blog.

Check out my post Top 5 Reasons to Blog with a Static Site Generator for
reasons you might want to use a static site generator.

For a complete introduction to setting up your blog with either Hexo or DocPad, check out
my Pluralsight course Build a Better Blog with a Static Site Generator.

In this post let’s look at how to extend your blog with a widget you can add via
a configuration file.

The default Hexo theme “Landscape” comes with a number of widgets like tagcloud, archive, and recent_posts.

If you take a look at the theme’s _config.yml file you’ll see the following:

1
2
3
4
5
6
# Sidebar
sidebar: right
widgets:
- tagcloud
- archive
- recent_posts

As you can see under the widgets heading you can add or rearrange the widgets that will
appear in the sidebar.

As you can see in my blog I’ve added a few extra widgets like my most popular
posts list and my Twitter feed.

Let’s see what it takes to add the Twitter feed.

The theme folder structure of a Hexo blog is something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
└───landscape
├───layout
│ ├───_partial
│ │ └───post
│ └───_widget
├───scripts
└───source
├───css
│ ├───fonts
│ ├───images
│ ├───_partial
│ └───_util
├───fancybox
│ └───helpers
└───js

As you can see under the layout folder is a “_widget” folder.

Each of the widgets available to the Landscape theme are stored in this directory
as *.ejs files.

We’ll take the archive.ejs as our example.

1
2
3
4
5
6
7
8
<% if (site.posts.length){ %>
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<%- list_archives() %>
</div>
</div>
<% } %>

The first thing to notice is that has an if statement that makes sure we only
render the list if there are posts.

Next we see that the widget structure is defined by two divs and a header tag.

The outer div is of class “widget-wrap” and the inner div is of class “widget”.

Between the two divs is an H3 header of class “widget-title”.

If we follow this structure we can easily create our own widget.

We’ll just change the title and replace the <%- list_archives() %> with the snippet we grab
from Twitter’s Create a User Widget page.

That gives us the following:

1
2
3
4
5
6
7
8
9
10
11
<div id="twitter-feed" class="widget-wrap">
<h3 class="widget-title">Twitter Feed</h3>
<div class="widget">
<a class="twitter-timeline" href="https://twitter.com/jeffa00"
data-widget-id="440159277538238464">Tweets by @jeffa00</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?
'http':'https';if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>
</div>

We’ll save that as twitterfeed.ejs in the layout/_widget directory.

Now we can add our new widget to the layout’s _config.yml (not the site’s):

1
2
3
4
5
6
7
# Sidebar
sidebar: right
widgets:
- tagcloud
- archive
- recent_posts
- twitterfeed

That’s all there is to it.

In the next post I’ll create a widget that uses Hexo’s Data Files feature to
display items from a data file.

One last reminder to check out my Pluralsight course on
setting up your blog with either Hexo or DocPad at Build a Better Blog with a Static Site Generator.

My First Pluralsight Course

Build A Better Blog

This is my new Pluralsight course
Build a Better Blog
with a Static Site Generator
.

I’m really excited to announce my first Pluralsight course: Build a Better Blog with a Static Site Generator.

I haven’t talked about it because I wasn’t sure I’d pull it off. I’d estimate that it takes me between two and three hours of work per finished minute of video. Whew!

I’ll blog more details about the course over the coming weeks, but the super short version is that you can’t get a faster, more secure, and more scalable blog than
with a static site generator.

With typical blog engines each page is assembled from a database entry and one or more template files for each reader unless you go to extra effort setting up
a cache of some sort.

With a static site generator you render your site from simple Markdown and YAML files to a plain old HTML site. You can use Git to version and deploy that site
whole cloth to your server.

I’ve been using the static site generator DocPad for about a year and a half at this point.

You can read more about the series of misfortunes that led me to this point:

If you have a chance, check out my course and please rate it!

Thanks!
jeffa