This website
I felt like I wanted a space to share who I am, so I made this website. I also wanted to try some technologies and I’ll try to explain the thought process behind each of them.
The architecture
This is a static generated website that uses three main pieces of tech : Hugo, Netlify CMS and TailwindCSS.
I wanted to be able to edit “readable” files (Markdown in this case) and have it processed into a pure HTML/CSS website.
The main goal behind this stack was to have a static website (which is fast and easy to deploy) but with better editability than writing raw HTML. Another upside of static website is that they allow good SEO, but I have no idea how SEO actually works and I don’t really care at the moment (but it’s a nice upside nonetheless).
I’m also deploying on Netlify which has a great free tier.
Hugo
When searching for a static site generator, I considered three main options, which were the top three options on the list made by Netlify. The list used github stars which is a decent indicator of the popularity and maturity of a project.
These options were Next.js, Gatsby and Hugo.
First of all Next.js was quickly discarded as it didn’t seem to fit my use case very well. I might be very wrong on this as I didn’t look into it too much, but it seemed to me that it was made to be very flexible in matters of data sources, and if the NetlifyCMS documentation is correct, it required a plugin to load markdown. Although I am not using it for this project, the fact that I’m hearing a lot about Next.js makes me interested in using it for another project more suited to it.
Next (hehe) was Gatsby. I actually used Gatsby on another small project and I had a good time with it. I had some prior experience with React with allowed me to develop templates pretty quickly and the many datasource options made me able to pull data from a Google Sheet (I’ll write later on that project). I could definitely have gone with Gatsby and it would have been a great choice but I decided against it and leaned towards Hugo for a couple reasons.
- Speed : Hugo builds are very fast, which matters both because it makes the developer experience really smooth, and because one of the limitations of the Netlify free tier is build minutes. Having fast builds allow me to not have to worry much about that limitation. As an example, the latest build took 20s in Netlify, but the actual Hugo build process took 227ms, the rest of it being incompressible Netlify stuff.
- Simplicity : Hugo is more opiniated and has a more limited feature set than Gatsby. This would have been a downside if my use case didn’t match exactly what Hugo is made for, building static sites out of Markdown content. As a result of this, I barely had to configure Hugo itself and learning how to use it was very fast, allowing me to be productive quickly. Another upside of Hugo is that it’s a single executable and I was happy to not have to deal with a JS style npm/webpack environment. (This won’t exactly be the case in the end, but oh well).
So for all these reasons, I chose Hugo !
In the end, I am very happy with my choice, I’m pretty productive and other than a couple of things that took a bit more time to figure out at first (the way every page has to exist as content file and the go templating language), it was very easy to do what I wanted to with it.
Netlify CMS
Let me start this section by saying that adding an headless CMS to this project wasn’t a necessity, and I could have gone without Netlify CMS at all, just editing .md files through VSCode and pushing them like that. The reason I added it is that I wanted to try one for the future, in case I build a site that’s meant to be used and edited by non-tech people. It was more of an experiment to see how well it worked. This reason also drove the choice of headless CMS. Since I didn’t want to pay any hosting for this site (and the other sites I could eventually build with this stack), I needed a git based headless CMS.
Looking at the Netlify list once again, the biggest one was Netlify CMS, so that’s what I went with. Other options seemed too small (community wise) and this one looked good, so I just went with it without much research.
I don’t have much to say about this choice so far, the configuration was a bit tricky and the documentation isn’t too comprehensive on some stuff (granted I had issues with nested collections which is a beta feature). But I was able to make it work. Setting it up so that I could upload images which were then processed by Hugo required me to write a custom editor component but it was manageable.
All in all, Netlify CMS feels like it lacks a bit of maturity (important stuff is still in beta features) but it does the work fine. I didn’t use the preview option for the editor as it used React to render and I didn’t feel like rewriting templates from go to React. This detail makes me think it would be a lot more interesting to use Netlify CMS with either Gatsby or Next.js as that would allow you to re-use React components.
TailwindCSS
I started to hand-write my CSS for this project.
And then I remembered I really dislike writing CSS by hand and started looking for a CSS framework. And I realized theres a lot of them which made this search take forever. I mainly wanted something utility-first (utility-only even), small, and easy to use. Just something that allowed me to add a couple classes to my markup and made it look good and responsive.
TailwindCSS was very offputting at first as it just seemed to map css statements to classes 1-1 which looked weird and made your html look horrible, and it was like 3mb which is huge. Looking more into it, the size problem wasn’t an actual one as it comes with a way to remove unused classes and output a small final css file (the current file is 9kb minified, 2.7kb after brotli compression ). The downside of this was that I needed to add npm packages to my project, but you can’t have it all. I still need to figure out a way to make that build step automatic when I modify layouts (but not on every Netlify build, as it would be triggered by new content), which would probably involve git hooks.
As for the usage of TailwindCSS, I’m definitely loving it. It’s weird at first but I’m really liking it, I think part of it is not having to create new css classes everytime I want to style something. I just have to add the corresponding class to the html and i’m good. It feels very efficient, consistent and easy to read (when you start to learn the classes). It also doesn’t feel like it hides the CSS workings away from me, you still have to figure out what CSS statement you need, it’s just easier to apply and write. So the good part is I’m still learning CSS, but I don’t write it so I don’t hate it, yay !
Conclusion
To conclude, I had a lot of fun building this site, I learned a lot and I discovered new tech I’m definitely gonna reuse later. Now it’s time to write content to fill it !