The blog setup

Jun 5, 2016 blog hugo markdown
Share on:

The Setup for this blog

After some testing with various tools I found a setup that works for me, so here it is …

Website creation

The website is created with the static generator Hugo and the Ghostwriter Theme.

Hosting

My hosting provider has been Webfaction for a number of years now.
Yes, you might find cheaper providers.
No, they are not the latest most whiz-bang provider.
What Webfaction has been for me is reliable, cheap enough with plenty of flexibility around tools (1-click installer, ssh access etc …)

DNS & Security

Although Webfaction DNS management is great, I started to want a little more.

I was interested in being able to cache the site, have some basic SSL support, HTTP/2 and other gizmos like page rules to redirect to HTTPS. There’s more and more services but Cloudflare is the one I picked as you can start with a free plan and move up and down their offering as you like.

Setup is quite easy :

  • Add a site in Cloudflare
  • Let it import your current DNS entries
  • Redirect your DNS server to Cloudlfare once done

I have to say that being able to get a SSL secured website, use HTTP/2, SPDY and IPv6 with limited effort and no special process on the hosting provider side is quite phenomenal !

Markdown

I don’t want to run things on a specific Mac/PC/iPad/iPhone so I found an online Mardown Editor StackEdit. It can save file to a number of Cloud storage provider (DropBox, Google Drive) and has Live Preview. That’s all I need for now.

Update Oct 2017 : On the Mac, Microsoft Visual Code works quite well to edit Markdown

Workflow

So how does all that work together ?

  • Cloudflare is setup to get all requests, force https via a page rule and cache/redirect the static site hosted on Webfaction.
  • I write a new post on StackEdit (adding some hugo’s specific headers) and save to DropBox (DropBox then automatically syncs the document to all my devices)
  • A scheduled task (cron job) runs on my Webfaction server to regularly import the content. This job runs the hugo binary stored on webfaction to generate the website in a folder, and copy the content of this folder to the right location (static webapp served by nginx).

Here is the script :

 1    #!/bin/sh 
 2    cd $HOME/<path_to_hugo_folder>/content/post   
 3    wget --max-redirect=20  -O $HOME/<path_to_hugo_folder>/content/post/posts.zip https://www.dropbox.com/<link_to_folder>?dl=1  
 4    unzip -u posts.zip  
 5    chmod u-x $HOME/<path_to_hugo_folder>/content/post/*.*  
 6    chmod g+w $HOME/<path_to_hugo_folder>/content/post/*.*  
 7    cd $HOME/<path_to_hugo_folder>  
 8    hugo --theme=ghostwriter  
 9    rm -rf $HOME/<path_to_static_nginx_folder>/*    
10    cp -rf public/. $HOME/<path_to_static_nginx_folder>

Note:
You’ll need to generate a share link in DropBox and change ?dl=0 to ?dl=1. This setting forces a download instead of the default webpage.

Conclusion

While probably not as easy than just another WordPress blog, the simplicity of the setup is a big win:

  • No Database
  • portable content (markdown files can be easily moved across platform)
  • Online editor with Live Preview
  • Automatic sync with other devices (with the added benefit of leveraging cloud storage reliability as well as local Time Machine backup on my Mac)

To-Do

This is not an official to-do list but some things I thought about while implementing this setup :

  • use GitHub to store posts so that changes can be tracked during commit/push/pull
  • Create an Automator workflow or a Mac app to create a Hugo companion app (GUI for basics tasks like page creation, theme selection, categories, site generation and copy)
  • Find a good Markdown iOS editor with DropBox support (write drafts in a separate folder and move when ready to publish)