Technical content workflow for “Code with Hugo”: static site, Paper, Medium, DEV and Buttondown

tl;dr: here are the tools used to power, build and publish codewithhugo.com:

• Dropbox Paper because it syncs desktop/mobile and outputs to markdown
• Unsplash for cover images
• Edited Markdown + images → Hugo static site generator
• Casper 2 (https://ghost.org default theme) for Hugo
• Schedule:
  • Newsletter: Mondays 5pm UK every 2 weeks
  • 1+ post a week
• Cross-post to Medium (Stories → Import a Story)
• Cross-post to dev.to using RSS feed
• Social media/promotion < Organic traffic
• Newsletter powered by https://buttondown.email
• Analytics: Google Analytics + Simple Analytics

This post has about 7 month’s worth of learning in it, so see the following table of contents:

Don’t build your own if you’re about content

I could code the UI, but I used a theme, the goal here is not to code.

I wanted something I wasn’t actually that familiar with so I wouldn’t mess about with it initially, it also had to look good and “Just work”™️.

That’s how I ended up with the Hugo static site generator, Casper 2 (ported from the ghost.org default theme). My initial setup is documented in “Switching the lights on: Hugo vs Hugo config files”. I was running on GitHub Pages but recently updated to use Netlify when GitHub had a nasty outage, you can read more about that switch in “A tiny case study about migrating to Netlify when disaster strikes at GitHub, featuring Cloudflare”

It’s obviously useful to be able to modify some of the templates to eg.:

• add canonical links
• put the buttondown subscribe form (CSS was already there 👍)
• guides page + paywall (see “Add a client-side paywall using checkoutpage.co and vanilla JavaScript”)

The flow: from idea to published

Drafts and ideas live in Paper, it has a decent folder structure and a Medium-like text editor. Unlike the Medium mobile app it’s offline-enabled. Paper exports to Markdown so the content only needs slight alterations.

I have a master “content plan” which has a checklist with all the posts I’ve got in different states. It looks like this but with some unticked checkboxes.

Unsplash for images, gives a bit of life and colour to the site or https://carbon.now.sh if a code screenshot is more appropriate. I resize and run the images through an optimiser (see switching the lights on).

DEV has a great community, it’s still growing so there’s a lot of eyeballs and less content than other places. People who post on dev.to also seem less interested in tricking a curation algorithm and going viral, instead being happy to share their work/knowledge.

Large Medium publications can get you some traffic for that initial push to get a post off the ground.

Running your own site gives you flexibility and staying power, you’re not tied to a platform.

I see my setup like the author of this post describes his, Medium and DEV are just the edge of my content delivery network.

I’m building domain authority etc. eg. as your authority grows, some content that wasn’t ranking crazy well on Google will get an opportunity to shine.

Social Media/Promotion < Organic traffic

The angle with Code with Hugo is search engine optimisation (ie. organic search traffic, check out /open page).

When I started I would post to aggregators, it turns out having someone repost your content on Reddit or HackerNews is more powerful than you spamming it there, the views aren’t worth the effort, especially once you start getting organic traffic.

A tip I heard on the SyntaxFM podcast is that when you post on social media, use a format that fits with the medium. For example on Twitter, I don’t just spam the link to my post, I post a snippet or create a thread with some key points from the post.

Remember that you want your writing to compound. Put a link to the posts you want to drive traffic to in your successful posts, Hugo and Casper has a related posts section which means I don’t even need to think about it.

I’ve had a couple posts do well on Reddit and been featured on a few newsletters (read more about that here). That always helps with traffic, but it’s a spike and then it’s gone.

I’m now at the point where I get regular organic traffic, which is great.

Post and Newsletter Schedule

The Code with Hugo newsletter (usually) goes out on Monday 5pm UK every 2 weeks.

Initially, I was creating content for the newsletter, and sending it out every week (see the oldest posts in the newsletter archive https://buttondown.email/hugo/archive). I would then re-post whatever was in the newsletter on the blog. That “every week on Monday, content goes out” helped get me into the flow of things.

I thought getting content earlier would incentivise people to subscribe… it didn’t. The “long-form newsletter every week phase” was a lot of work and didn’t do a few things a newsletter can/should do for you: resurface older content and drive traffic to your site.

Newsletter 2.0 is more links, less text. The first few were a bit too heavy and wordy. I think I’ve hit the sweet spot with my latest “little update paragraph + a bunch of links” format 😄 .

I publish on codewithhugo.com at least once a week see https://accountableblogging.com/post-frequency/?url=https%3A%2F%2Fcodewithhugo.com, that visualisation is a bit off because I’m pretty sure I didn’t miss that week it’s telling me I did.

There’s a lot of content out there telling you the best days to publish. I like Mondays and the weekend, but it’s very hit and miss. Any day works, just get it out and keep re-promoting it later 🙂.

You should re-post according to platform algorithms eg. Medium prefers fresh content so cross post ASAP, DEV.to doesn’t as much so you could post a bit later. On Twitter you should promote a couple times for different timezones to catch as much of your audience as possible. This is where a newsletter shines, you send it out once and people trickle in for about a week.

Your email list is your way to stay directly in touch with your audience, it allows you to circumvent the aggregator, social media and other proprietary platform(s).

Newsletter: why Buttondown?

Buttondown (buttondown.email) is quite new so I managed to get the hugo URL: https://buttondown.email/hugo. Justin, the 👨‍💻 who builds buttondown, is always super helpful.

The basic features that make it viable are markdown support and scheduling support (day job you know). It’s also got cool features like Tweet embeds and link URL checking.

It’s reasonably priced (I ain’t near 1000 subscribers if anyone is asking) and Justin has helped me out multiple times (on his evenings and weekends, the savage 💪 ).

Analytics stack

I use 3 different tools for figuring out what content is doing well and why.

I use Google Analytics to track where my traffic is coming from and which pages it’s ending up on. It tracks users/sessions which is important if you want to know around how much you’ll be making from ads or how your info products are converting.

The Google Search Console gives me insights into which queries I’m doing well for. You can also look up your Alexa rank on alexa.com, it represents how much traffic you’re getting vs the rest of the internet.

Simple Analytics is one for the future, it allows me to have live stats in the open simpleanalytics.io/codewithhugo.com. They’ve recently added a “visitors online” feature, which is more accurate than Google Analytic’s “Active Users”. That’s because GA shows you hits from the last X seconds whereas Simple Analytics shows you who’s actually online.

Christin Hume