thoughts on code


Zen static site hosting with GitHub Pages, Middleman, and CloudFlare

I love static sites. They are fast, reliable, and SEO-friendly. I’m an avid user of Middleman, which is a Ruby-based static site generator. I have a fantastic Middleman workflow, but what about deployment and hosting?

When it comes to hosting provider, there are a few requirements from my end:

  • Easy to deploy
  • CDN-enabled
  • Reliable
  • Free or almost-free
  • Uses HTTPS

For close-sourced projects, I love using AWS S3. It’s fast, reliable, and cost next to nothing. But what if you’re happy about open sourcing the code? Or perhaps you don’t want to bother with installing AWS dependencies on your machine? Then GitHub Pages is a fantastic solution.

GitHub Pages is so easy to setup that you don’t really need to do much more than creating a repo. For the basics, check out their website.

Zen deployment with Middleman

To deploy a Middleman site, the easiest thing to do is by installing the middleman-deploy gem in your Gemfile (docs). If you’re using Middleman 4, make sure to install gem 'middleman-deploy', '= 2.0.0.pre.alpha'.

After running bundle install, activate the plugin in your config.rb:

activate :deploy do |deploy|
  deploy.build_before = true
  deploy.deploy_method = :git
end

And that’s it! Now you can deploy to GitHub Pages by running middleman deploy. This command will build the project and shove it into the gh-pages branch on GitHub, which is what GitHub Pages uses to serve your site. Within a few minutes, you should be able to see your site at username.github.io/project-name.

Custom domain

All serious sites need their own domains. No worries, GitHub Pages allows you to do this for free. To get started, create a CNAME file in your source directory. Inside of that file, put in the domain you want to use for the site. For this site, my CNAME file contains fei.is.

The next step is to properly configure your domain with your DNS provider. Take a look here for instructions.

Use HTTPS

GitHub Pages only supports HTTPS for non-custom domains. What if you want it on your custom domain? Enter CloudFlare. CloudFlare is probably one of my favorite tools for beefing up security. Setting it up takes minutes and the value it provides is almost instantaneous. One of its amazing features is that it gives you free HTTPS support. You read that right, FREE.

Add your site

First head over to CloudFlare, follow their instructions, and set up your domain. Once you see this on your dashboard, move on to the next step:

CloudFlare success status

Enable HTTPS

Next, head over the the “Crypto” tab, and enable SSL. NOTE: make sure to select “Flexible.” The other options won’t work properly with GitHub Pages.

Enable SSL on CloudFlare

If you have it set up properly, you should be able to visit https://mydomain.com. There are a slew of other security features you can enable. Feel free to experiment and enable what you need.

Ensure all traffic is over HTTPS

Now that we have SSL enabled, why not make all traffic HTTPS, all the time? Lucky for us it’s super easy to do on CloudFlare. Head over to the “Page Rules” tab and create a new page rule like so:

Always use HTTPS screenshot

This page rule says that for all traffic matching http://*.fei.is/*, use CloudFlare’s “Always Use HTTPS” rule.

That’s it

Now you have a static website hosted on GitHub Pages and served over HTTPS. How much does any of this cost you? A big fat $0. Gotta love the internet.


Next Article

What does Docker do again? Here’s a fantastic explanation

With the incredible hype around Docker, it’s amazing how I’ve avoided learning it until recently. For the longest time, I didn’t have a solid grasp on what it does and why it exists. Turns out I’m not alone. Many fellow developers also struggle with understanding what Docker does and how it can make their lives easier.

As I was browsing Hacker News...

Continue reading