Blogging

The Authoring Workflow in Hexo

In hexo, there’s a really nice workflow for creating a new post. There are docs on this, but who needs docs when we’ve got bloggers, right?

First, in the main project, make sure the /scaffolds/draft.md is the way you like it. Here’s mine…

---
title: {{ title }}
categories: []
tags: []
---

Notice how the date is excluded. If you’re writing a draft post, you don’t know when you’ll publish it yet, so you likely want to leave that off. It gets populated automatically a little later. Read on.

Then make sure your /scaffolds/post.md is the way you like it. Here’s mine…

---
title: {{ title }}
categories: []
tags: []
date: {{ date }}
---

It looks just the same, but there’s a date there.

Now here’s what my workflow looks like every time I create a new blog post.

  1. At the command line type hexo new draft foo
  2. Switch to Visual Studio Code (or your markdown editor of choice)
  3. Edit the foo.md file that should be in your /source/_drafts folder
  4. Back at the command line type hexo publish foo

When you created the initial draft, it created in the _drafts folder which doesn’t get generated, so it’s not going to make it to your website yet.

When you published it, hexo moved the markdown file from _drafts over to _posts and added the current date and time.

I think that’s a slick workflow and I’m very happy with it.

Move to Hexo

I just finished migrating all of the content on codefoster.com over to my fifth blog engine!

To date, I’ve run codefoster.com on Wordpress, BlogEngine.net, Lemoon, BetterCMS, and now Hexo.

Hexo, unlike the others, is a static site generator. That means that the work of building pages out of content is done as a build step before the site gets deployed, and the deployed site is actually just a bunch of HTML files. That makes it fast, secure, and searchable. You may have heard of Jekyll - a quite popular site generator that works much the same.

When I first heard about static site generators some time ago, I was actually quite skeptical, but the idea started attracting me more and more. Then when I discovered that Hexo uses Node.js, I decided to give it a shot. I love node.

Hexo was easy to get started with. I went to hexo.io and started learning about all of its capabilities to make sure it would cover my needs, which are…

  • Need 1: Easy Authoring. I was never as big a fan of Windows Live Writer as so many others were. It just felt like too much behind-the-scenes magic happening. In a static site generator, you author in markdown. A markdown file is a simple text file that uses simple codes for formatting instead of HTML mark_up_ which is rather robust. For example, instead of using <b>strong type!</b> to bold a word, you use **strong type!**. Furthermore, instead of a table looking like…

    <table>
    <thead>
    <td>H1</td>
    <td>H2</td>
    </thead>
    <tbody>
    <tr>
    <td>A1</td>
    <td>A2</td>
    </tr>
    <tr>
    <td>B1</td>
    <td>B2</td>
    </tr>
    </tbody>
    </table>

    It looks like this…

    H1 | H2
    --- | ---
    A1 | A2
    B1 | B2

    The best markdown when you write on developer topics like I do is the backtick (`). If you use single backticks inline like `let x = 10;`, you get inline text that’s formatted like code like let var x = 10;. If you surround an entire code block with three backticks, you get an entire code block, and if you add a language code (js, csharp, html, etc.) after the opening backticks, you even get correct color syntax for that language.

  • Need 2: Custom Web Magic. I’m a web guy, and my blog is an authoring platform on the web, so I should be able to write HTML (even though I’m authoring in markdown), sprinkle in custom CSS, and add JavaScript at will.
    Markdown inherently permits inline HTML. It neither complains nor modifies it. Same with embedded <style> blocks or references to css files. It also allows me to pull in JavaScript that will run client-side.

  • Need 3: Themes and Plugins. I like web design, but I like it more when it’s done for me and I can just tweak it to my liking. There are a lot of really good themes for Hexo. I also like being able to extend the functionality of my site quickly and easily with plugins. Hexo has plugins too.
    I am using the chan theme for codefoster.com right now, but of course it would be trivial to switch.
    Installing themes and plugins is as simple as a familiar git clone command. You pull down the files from GitHub, you may need to add a little bit of configuration in your site’s _config.yml file, and you’re good to go.

  • Need 3: Alias support. I think there’s a lot of value in a good, short URL. The URL for this post, for instance, is simply codefoster.com/movetohexo as opposed to a URL that a lot of blogging platforms will default to that might be more like codefoster.com/2016/12/14/Other/Move-to-Hexo. That’s easier to remember, easier to share, easier to type, and easier to look at.
    Since, like I mentioned, I’ve changed blog platforms 4 times, I have a number of legacy URLs that are important to maintain. Some of the platforms forced the longer format. Sometimes I just didn’t know how to configure it to be shorter. Regardless, I need to redirect people. I need to redirect them from the old slug to the new.
    I also need to redirect folks from short URLs in my domain to external websites. For instance, if you go to codefoster.com/codechat/codegalaxies, you’ll jump out of my domain to Channel 9 to watch an interview I did there.
    Hexo allows both of these redirects with easy configuration. This functionality is available, actually, thanks to a plugin called hexo-generator-alias.

  • Need 4: Local Authoring and Local Serving. I want to be able to work on blog posts whether I’m connected to internet or not, and I want to be able to visualize the results quickly and easily.
    Hexo allows me to run the server command to create a local server for my files in watch mode, so I can see the changes in my browser very shortly after making them in my IDE.

All in all, I’m thrilled with my choice of platform and am looking forward to figuring out more of the capabilities.

Drop a comment in the thread below (just opened up guest commenting by the way) if you have feedback, if you have another blog engine that you use and love, or certainly if you’re using Hexo too and want to share some advice.

Happy blogging!

ADDENDUM 1 (2016-12-16)

Someone pointed out that it would be good to share how I migrated my content from my old blog to Hexo. Great idea.

If you browse to hexo.io/plugins and search for “migrate” you’ll see that there are migrators for:

  • Blogger (hexo-migrator-blogger)
  • GitHub Issues (hexo-migrator-github-issue)
  • Joomla (hexo-migrator-joomla)
  • RSS (hexo-migrator-rss)
  • Wordpress (hexo-migrator-wordpress)

I was using a little-known, ASP.NET-powered blog engine called BetterCMS that was actually quite wonderful, although I think I made it clear that I wanted something lighter. There’s obviously not a migrator for BetterCMS, but I did have an RSS feed, so I used that.

I was beyond pleased with the results. I was actually a bit shocked at how simple it was to run and how effective it was in migrating the majority of my content to markdown.

To migrate using the RSS migrator (and I assume the process with the other migrators is much the same), I simply ran at the command line from the root directory of my hexo site npm install hexo-migrator-rss and then hexo migrate rss http://codefoster.com/rss. I didn’t use the optional --alias argument, but if it works as designed it would have been a good idea, because I spent a considerable amount of time doing it manually afterward. The --alias argument is supposed to add alias: tags to the top of each post that allows existing blog URLs to be redirected to their new URL.

There was quite a bit of work to do in my markdown files after migration, but all of it was very much expected. It surrounded my code blocks with backticks, but I had to determine where I wanted inline code and where I wanted to use three backticks and a language designation to get a code block. I also discovered that the language designations are rather important since without them, the tool that formats your code either has to format it as generic code (fixed width font) or spend considerable cycles attempting to detect the language.

Guest Commenting on codefoster.com

I just opened up guest commenting on codefoster.com.

I’m generally in favor of identity on the web and generally not a huge fan of anonymity. Pretty much every anonymous forum I’ve been to online is littered with the darkest parts of mankind. It’s a sad state really.

So consider this an experiment to see if anonymity will encourage good community on codefoster.com and if manual comment moderation is feasible and sustainable.

We’ll see. Please comment :)

5 More Posts

Blogging is a chore. Writing in general is a chore. It’s not easy to formulate thoughts and put them into words. I have a ton of respect for prolific authors that generate volumes in their lifetime, because that’s a phenominal feat.

I just looked at my blog statistics and I’m woefully low for the year. I have only blogged 14 times in 2016 so far. That’s barely over once per month, whereas I should be creating a post at least every week. I started off in 2012 with 87+ posts, and have tapered down to last year (2015) at only 19. I’m ashamed.

My desire is to write though. I write for you, my reader, but I certainly write for me too. It’s a great discipline and as any technical blog author knows, the main reason we post is to remind our future selves how to do something we at one point knew. Tell me you haven’t searched online for a technical answer only to find your own post from 2 years ago!

So here’s the deal. It’s currently December 8. There are about 23 days left in the year. My goal is to post at least 5 more times. Wait, this posts counts, so 4 more times. Hoorah! That’s completely doable and will mean that I have not digressed from 2015.

Furthermore, it’s my commitment to increase 2017 significantly. I won’t put any official commitments on a number out there, but there’s not reason I can’t maintain a weekly cadence and produce >52 posts for 2017.

Here we go!

That Was Good... This is Better

You’ll likely notice that codefoster.com looks a bit different. I put a shine on it, but I also put it up on blocks and did a complete engine swap.


I don’t ask for much from my website besides elegance, ease, and expressibility. Whatever solution I implement, I want it to sort of fade into the background and let the real task of creating and consuming content stand out. Technology is cool, but not for its own sake. It is supposed to enhance what we do.

I started out using WordPress and was impressed with the fact that I could have a good looking blog up and running in approximately two and a half minutes. After a few posts, however, I started to feel like I was trapped in the platform and I didn’t like that feeling. It’s funny that even if it does the job just fine, I can still feel bound and begging to get out. Which I did.

I switched to BlogEngine.net and liked it just fine. It was a good step for me and it served my needs for some time, but it started to feel tired for my needs as well. I wondered if I was being the digital equivalent of a picky eater, but decided I didn’t care if I was and swapped it out too.

My next engine was Lemoon and I liked it just fine too. I changed hands and I didn’t like some of the admin portal UX, and finally have come to loathe TinyMCE. It makes me very, very sad.

And one day I was browsing through the CMS systems available in the Azure website gallery and found BetterCMS. It’s so easy to spin up a new Azure website that I decided to give it a shot.

And I love it. I have had to post a number of questions on the forums to get accustomed, but I’m feeling much more comfortable now thanks to their very quick turnaround with very helpful answers. There are a lot of things I like about the new system such as…

  • a HTML editor based on codemirror (yay!)
  • MVC/razor model
  • crisp, clean, and simple (just what’s needed) admin portal
  • ability to store files and images in Azure (or AWS had I chose) blog storage
  • ability to Nuget deploy into an existing app

And there’s very little I don’t like. It doesn’t come with RSS/Atom syndication out of the box, but it didn’t take me long to write that. It also doesn’t support Windows Live Writer, but I stopped using that a long time ago in favor of OneNote. OneNote makes it simple to write my posts from any device and when it comes time to post it on my blog it’s easy peasy.

The best thing about BetterCMS, though, in my opinion is the level of control it gives you.

It works with two entities: pages and content. You define the page and then the admin interface let’s you add, edit, or rearrange content on it.

You get to create the pages by simply specifying a razor view in your project. That’s awesome. You can define content regions anywhere you want in the view and then BetterCMS will make those editable regions when you enter admin mode. That’s the holy grail of CMS systems as far as I’m concerned and this is the first time I’ve seen it in production.

I started writing a system that was actually quite similar (though not nearly as robust) as BetterCMS a long time ago. It was in the early days of ASP.NET. I called it Web Items and I made it because I was the webmaster at a decent sized company and was expected to handle the entire companies website - including content. I was quickly determined to get the task of creating content out of my inbox and into the hands of the content owners. If I’d only had BetterCMS then.

Now I have utter control over my site. That means that the little glitches that I’m sure you’ll find are on my. Only me. When you view it on an old version of Opera on your Android Crème Brule (was that an old version of Android) and it goes janky… that’s on me.

I’d like to own that for now though and I’d like to fix it. As long as you’re using a browser from this decade.

Thanks for reading codefoster.com and please let me know if you have any comments about the new system. And by all means, if you’re looking or a new CMS for yourself or your work, consider BetterCMS.

By the way, there are a couple of things that my old site was capable of that I’m still implementing for this one. One of those is search capability. For now, simply use your favorite search engine and precede your search with “codefoster” and you’re likely to find what you’re looking for.

The All New codefoster.com

Woohoo! Welcome to the all new codefoster.com website.

I changed a lot about codefoster.com in this latest iteration, I’ve got most of my boxes unpacked, and I’m excited to be working out of the new space.

I switched CMS systems to one made out of Sweden, and we all know that the Swedish know how to make quality merch, right! The system is called Lemoon by Mindroute Software. It’s very simple, very powerful, and built entirely and extensibly on ASP.NET.

To coincide with the launch of the new site, I have some new business cards…

Now just sit back and wait for content that will blow your mind. Well, we’ll see about that.

Completed the Move - WordPress to BlogEngine.NET

EDIT (2014-07): Since writing this, I’ve since ditched this system and upgraded again. See this post to find where codefoster.com is at from a technical standpoint.

EDIT (2016-12): Well, I’ve done it again. Now I’m using Hexo.io - the Node.js static site generator.

I’ve done it. I’ve moved off of WordPress. I’m not sure what it is I didn’t like about WordPress, but I just didn’t. It’s not that they’re too big… shoot, I work at Microsoft. It’s not that their blogging solution doesn’t work because it definitely does. I guess I just felt like I was in a machine. I like to feel free.

I don’t like to feel like any second I’m going to get hit with another $12/yr charge because I want to add such-and-such feature.

I’m using BlogEngine.NET now and it has thrilled me so far. It plugged in easily to my own self-hosted site and seems to have the perfect set of features. Now I feel like I can customize all I want. I feel free.