Secure and fast static site alert!

By Rahul Pandit

Posted on Thursday, 23 July 2020

Last updated on Tuesday, 12 April 2022

Update: I used to host this website on my own VPS but in March 2022 I moved it to a static site hosting service so some things (like SSL cert config, how static assets are served, etc) are out of my control.

First Hugo

I really like the appeal of static sites. Just write your articles in markdown or HTML, generate the site and upload it. Great from security point of view too. And hosting is super simple. You can host it on some crappy shared hosting service, a cheap VPS or basically any service that allows hosting a bunch of HTML files.

So, when I wanted to decide what tool to use to create my blog last year, Hugo was the obvious choice. It was boring but it worked flawlessly. Hugo's main selling point is that it's faster than other static site generators. Well, it sure is fast but it makes no difference to me because my website has only a couple of dozen webpages. Two things made me switch away from Hugo : First, Hugo's documentation is kinda confusing. And, second, good-looking and easily customizable themes are hard to come by. When I did find a cool theme, I saw that the theme developer had abandoned the project years ago. So just last month, I switched to Ghost.

Then Ghost

Ghost was a breath of fresh air! It has a sleek and simple interface and a sexy editor. Updates are pushed out almost on weekly basis. Basically, it's the new and improved Wordpress. Speaking of Wordpress, Ghost has the same business model as that of Wordpress. You can either self-host a Ghost blog or pay Ghost team to do it for you.

I really liked Ghost in the beginning but the honeymoon period didn't last very long. When I say the interface is simple, it really is bare-bones. If you're a power user who likes to customize the shit out of everything, well then, tough luck. I think it's this way because Ghost project is not really aimed at power users, it's aimed at non-technical users who just want to write and don't want to deal with complexities of a CMS. And they are incentivized to stay this way because of their business model. One look at their homepage or pricing page will tell you who their target audience is. Quick note about Ghost themes. Unlike Hugo, there are very few free themes. But at least these are high quality themes. I really liked Casper and Attila. In fact, I liked Attila so much that I ported it to my own static site generator using Bulma.

Two things made me switch away from Ghost though : incomplete exports and failed imports. You can export your ghost blog only in JSON format. This, by itself, means that the backup isn't complete. All the images are absent and they have to be backed up separately. I wasn't aware of this before deploying Ghost. Ouch. Then, just to make sure my backups are working and I can import whatever I had exported, I started a demo ghost blog on my local machine and tried importing the backup and it failed! It gave a strange error about Stripe account even though I wasn't using Stripe or Ghost's membership feature! At that point I thought fuck it, I'd rather write my own.

Now My Own

I had two options in front of me. Use a small blogging engine I had written for a college project or write a static site generator. Since this is a website with no dynamic components and I already like the concept of a blog being totally static, I decided to write my own static site generator in Python. I've used Bulma for front-end, the amazing Jinja library for templating, python-markdown for converting markdown to HTML and TOML Kit for parsing articles and configuration files. Yes, I'm writing posts in TOML files, wanna fight about it?! Hahaha. Since I wrote it for personal use, code is kinda all over the place but it works perfectly and it fits my use case and I can add/remove whatever feature I want, whenever I want. I'll probably refactor the code and upload it on the site later so you can take a look at it.

There's one more reason why I thought a static site would be better suited for my website. Tor project recently announced their #MoreOnionsPorFavor challenge. To participate in the challenge, you gotta make your website available as a Tor onion site and tell everybody about it. And making a static site available as an onion site is super easy. So, there's that. By the way, I'm gonna blog about making a static site available as an onion site so you can try it out too. Update : So, I finally wrote the post. You can read how to start your own tor onion service to know more details.

Totally Locked Down

One thing I have to mention here : this site might be one of the most locked down websites you've ever visited!

First of all, it's a static site. There's no dynamic content generation happening on the server side. It's just a bunch of HTML files with some text and images sprinkled in.

Second of all, the site has a TLS certificate with hardened configuration taken from Mozilla's Intermediate SSL config. I have disabled TLSv1 and TLSv1.1 and kept only TLSv1.2 and TLSv1.3 support enabled. I'm using 4096 bit Diffie-Hellman parameter and I've enabled OCSP stapling. In 2020, this should be the default anyway.

Third of all, the website doesn't use any Javascript. And I hope to keep it this way. I mean, for a static site which has only text and images, Javascript is totally unnecessary. I had my work cut out for me because Bulma, being a pure-CSS framework, doesn't force Javascript on you. There were some problems initially. For example, the navigation menu turns into hamburger menu on mobile devices and expanding/collapsing it requires Javascript. But, thankfully, as mentioned in Bulma documentation I can get rid of the problem by using is-active class to display navigation menu all the time.

Finally, this site has all the important security headers implemented including

  • X-Frame-Options
  • X-XSS-Protection
  • X-Content-Type-Options
  • Referrer-Policy
  • Strict-Transport-Security
  • Content-Security-Policy

All the headers have secure values which you can check by running curl in the terminal or opening Developer Tools in the browser. Talking a bit about Content-Security-Policy, it disallows everything including Javascript by default, allows images and CSS to be loaded from the website domain only, doesn't allow the website to be included in iframes and doesn't allow form submissions.

My website has A+ rating on Mozilla Observatory.

Mozilla Observatory Result

And, A+ rating on Qualys SSL Labs SSL Server Test.

SSL Labs Server Test Result

And, A+ rating on Immuniweb SSL Security Test too.

Immuniweb SSL Security Test Result

And Totally Fast

Making the website static and not having javascript has other benefits too. Loading time of your website improves a lot and you save bandwidth of your server and your visitors.

Note that the scores below often fluctuate from test to test. For example, I got 97, 99 and 100 when I performed the PageSpeed test 3 times! A lot depends on how busy your site is at the moment of the test, distance between the test server and your website server, route the packets take travelling between your server and the test server, health of the network in which your server and the test server is located, etc. So, take these scores with a grain of salt. But it did feel nice to get 100 though!

Homepage of this website got a perfect 100 score on PageSpeed Insights for both Mobile and Desktop.

PageSpeed Insights Mobile

PageSpeed Insights Desktop

And, it has A rating on GTmetrix Speed Test.

PageSpeed Insights Mobile

So that's my journey going from Hugo to Ghost to using my own static site generator to create a fast and secure website.



Cover Picture Credit : Photo by Halacious on Unsplash





Recent Posts

Deploy Vaultwarden password manager, Portainer, Nginx and Certbot in Docker


Good Pi-hole blocklists that stop online ads, trackers and malware


Block online ads, trackers and malware with Pi-hole, WireGuard, DoT and DoH servers


Free third-party DNS for blocking ads and trackers


My Chess Notes