From dynamic to static website

Time to change

I build my previous website in 2012 using LAMP stack.

The framework I chose at the time was CakePHP with MySQL database; given the UI was very minimalistic and basic, Bootstrap library was the best candidate to render the frontend.

As you know, frameworks should be maintained and upgraded regularly to get the latest changes and security fixes.
The cost to maintain a stable system wasn’t cheap if compared to the times I would have updated my portfolio — I probably never did it in 3 years.
Last but not least, even if I’ve added a Cache layer, the server response was not so efficient and the site slower than standards.

Meanwhile, in 2017 I completely change my daily stack: I started programming using C# and .NET framework with NoSQL database. However, I wasn’t sure to rebuild another web app for my new website so, I started looking for alternatives.

Building PWA using static website generator

I wanted to build a fast and accessible Progressive Web Application with the latest tools I was interested in.
I wanted to deploy it with Continuous Integration (CI) and Continuous Delivery (CD), without losing mind with lots of configurations.
I was also looking for a tool that I could easily set up to publish posts, consuming content from a Headless CMS using REST API.

I chose GatsbyJS: the reason is that it can be used to build static sites that are highly performant PWA and follow the latest web standards.
I could finally use the latest technologies including ReactJS, Webpack, GraphQL, modern ES6+ JavaScript.

I didn’t use the CSS Modules technique because I’d like to maintain my workflow based on BEMIT CSS (BEM + ITCSS) and Sass: I think it could be more maintainable, clear, reusable and language agnostic.

The greatest part is that I don’t have to constantly maintain up to date a complex infrastructure because all the content served is static and generated during the build and deploy phase.

Deploy and Hosting

After so much research I decided to use the Netlify platform. As you can see from Gatsby’s documentation:

Netlify is an excellent option for deploying Gatsby sites. Netlify is a unified platform that automates your code to create performant, easily maintainable sites and web apps. They provide continuous deployment (Git-triggered builds); an intelligent, global CDN; full DNS (including custom domains); automated HTTPS; asset acceleration; and a lot more.

I used GIT and GitHub private repo to versioning my code; since I’m the only one involved in the project, I decided to adopt a Trunk Based Development approach.
Every time I push my code to the master branch, Netlify will trigger a command to test my code, build the application and deploy it to production.

I can also deploy my code from other branches (let’s imagine a develop feature): Netlify will create a subdomain with a name derived from the name of the branch it comes from. It looks like this: develop--site-name.netlify.com 👏

Even if it might not be obvious, I think nowadays it should be mandatory to serve websites over HTTPS: Netlify makes it really easy to set up HTTPS on your custom domains, having the option to manage SSL, Custom SSL and even dedicated IP SSL for those businesses that require it.

Speed, Accessibility and SEO

As I wrote on my homepage:

“I am strongly interested in making high-performance websites, fully accessible by everyone.”

I use Chrome Accessibility Tools, AxE, Pa11y and Audit in my daily work so, my personal goal was to build a website that could reach more than 95 points in all the categories shown in Google Audit/Page Speed Insight tests.
The final score I got, once the site was published, was 100/100 🚀

Costs

Fasten your seatbelts because the basic plan of Netlify is completely free and, as mentioned above, it covers all the needs for a personal website: custom domains & HTTPS, instant Git integration, continuous deployment, deploy previews and access to add-ons.

Obviously I don't have to tell you that I decided to get rid of my previous hosting plan and paying just for my domain name once a year.

Final consideration after the result of this journey: I think static website generators are very powerful tools and can be used in many projects. Don't be skeptical, give them a chance.