My 2017 stack 🚀

Recently I started refactoring my website, it has reached now its 5th stack over these its 5 years of existence. From wordpress to jekyll, passing quickly through nunjucks templates compiled first with Grunt then with Gulp, I can say I've been through a lot of setups. Since the whole point of having a personal website for a developer is to experiment, so I think it has been serving its purpose.

As tradition goes, it's time to write about my current decisions, why I'm happy about them in comparison to what I had immediately before.


HTTPS

Serving custom domains over HTTPS on any free plan isn't standard:

  • Gh-pages doesn't support it
  • Heroku only supports https on paid plans
  • Surge also requires paid plans

With Cloudfare it's possible to serve HTTPS, plus, it provides you a hassle free dashboard to create subdomains, manage your DNS, etc.

Setting it up is a no brainer, head over there and create your free plan account. Add your domain and Cloudfare will scan it for you, configuring itself automatically and then providing you with the two nameservers assigned to you.

Then, you move on to your Registrar. Add the nameservers and bam. Done.

Once your DNS has propagated (can take some time, but for me it took minutes), you can go over the Page Rules settings, create a new rule (Force HTTPS) and on the filter you can add

http://*.yourdomain.com*

Your traffic will almost instantly start being redirected to HTTPS.

Serving

Once you successfully started using Cloudfare as a proxy to your subdomain, you can start thinking about where are you going to serve your files from. From my perspective I had 3 options to consider:

I'm emphasise on frontend development, which means my playground (website) won't have much complicated backend logic, if any. So, yeah, let's start something by over-engineering it.

I'd been serving files through Gh-Pages since forever, it works fine, is nice and centralise your concerns. Versioning and serving are on the same place. Though, since I moved away from Jekyll, working with frontend static builds hasn't been as smooth as it could be.

Keeping your /dist on a separated branch then your /src is possible, but a bit tricky, the best way I know is working with subtrees. But then again, it could/should be simpler to have them separated.

Motivated by Separation of Concerns, I decided to try leaving only versioning to Github and using Surge to serve my statics. And I have to say: I couldn't be happier with this decision.

I simply added my /out folder to the .gitignore file, and created a deploy task on my npm scripts. Done.

Plus, if I feel like it, I can just add a hook to it and run the deploy task right after git push.

Surge works great and has a simple, easy to use CLI (Command Line Interface). I totally recommend you give it a try if your goal is to serve a static generated website.

Development

On my daily work I've been using React, and I'm quite happy with the component architecture, css-in-js approaches and all that jazz. But a SPA (Single Page Application) never felt right for my personal website.

NextJS came along and I instantly fell in love with the idea. Server-side Rendering a React application is one of the best things that happened to frontend development lately. The framework itself is great, minimalistic yet powerful. NextJS provides you an easy to customise NodeJS server, a simple CLI, out-of-the-box Styled-JSX and, among many other things, a static website generator as of version 3.0. So that was my weapon of choice.

I've done some other work with NextJS and I cannot recommend it enough.


If you found this helpful, please recommend it to your network by clicking on the 💚 . Also, if you feel like giving me a feedback, give me a shout on twitter, I’ll appreciate that.