A New Easier Way

I’ve had several blogs and websites over the years. I’ll skip over my Microsoft FrontPage and Dreamweaver sites of my childhood, but since then I try every few years at making a blog.

I moved through lots of different platforms in the first several years with a lot of overhead or that I didn’t understand how they were built well enough to build in features I’d need or customize things.

I eventually landed on the same idea everyone else did – The biggest problem to running a blog is actually finding time and energy to make the content.

This problem seemeed to get worse as my ability to go tinker in code or get sidetracked with all the distractions we have these days increased.

image-20220902141751211

Enter Hugo

I’ve been a big fan of Hugo for quite some time now. There are probably other platforms that are newer and sexier these days, but the simplicity and lightweightness of everything and my (now) understanding of how to use it means I don’t see myself moving to something else anytime soon – especially once we solve the big problem…

Git Me Out of Here

My biggest problem with using the markdown ‘meant-for-developers’ blogging platforms is how much I have to interact with the cli. Don’t get me wrong, I am one of those weirdos that finds some virtue in using terminal based text editors and even Tried to browse the web in Emacs, so you’d think I’d love that kind of thing.

Just like all the webUIs, in-page editors, and drag and drop tools of the past, this just gets in my way. When my brain is in writing mode, I don’t want to have do anything but write the text and have it appear.

Working with images in posts was unacceptable too. Having to copy and paste to folders and make sure paths are correct gets in the way, even if you’re proficient with markdown.

image-20220902141904503

The goals for this new iteration of my Hugo flow was:

  • Be able to write anywhere, on any device easily
  • Automatic /easier publishing not dependent on git cli
  • Better image management automation

The New Setup

Not much has changed here – Hugo, Github, and Netlify are being used as the main technologies – but a few small changes has made sitting down to write all the way to publishing enjoyable and not a temptation to go hack on design or features.

Here’s the tools and changes that made this possible:

There’s a lot of markdown editors out there. Typora has one killer feature that makes it better than all the rest I’m aware of. It has advanced image handling settings.

Now, when you paste an image into a markdown file, it will automatically be copied and saved to a ./img (or whatever your structure is) folder.

The rest of its features are nice but this makes writing in markdown with lots of images actually worthwhile compared to alternatives.

  • Pcloud hosts all the content and image files.

I was planning to use GDrive here since I write a lot on a chromebook, but their authentication requirements and lack of tools for personal users in that regard has made me decide to never use GDrive for anything development related again.

I setup an Action on Github to fire on demand or via a webhook trigger that pulls all the content files into the repo. Rclone is a great tool for this.

I tried to setup a proper webhook that fires when a content change is detected, but I wasn’t able to get that working well with any of the providers.

  • HTTP-Shortcuts - An Android app to trigger the Github Action remotely from a phone.

Folder Structure

I’m sure you could get it setup in other ways, but having a folder structure like you see below is really helpful with the image settings in Typora and keeping everything organized in Pcloud.

image-20220902140113473

Final Thoughts

And that’s it – Now you can sync pcloud to your devices (or download your files), open up Typora (or any text editor), write your post, and click a button on your phone (or in Github actions) and your changes will be live in a few minutes.

image-20220902141933812

If you have tips or tools in your Hugo or blog workflow that are beneficial, please share in the comments below.

Thanks for reading.