Ditching Medium in favor to my own multilingual blog made with 11ty and Netlify CMS

I love to write.

I have been writing since I started to have internet access. I write about computers, about videogames, about programming and software development, about being a LGBT person.

From old blogs hosted on Blogspot and WordPress (that I still have the links, but I'm too ashamed to post because of my teenage writing), to more recently, dev.to and Medium.

But as someone that sympathizes with the slow blogging / slow content / slow web movement, none of these platforms seemed to be a fit for me. I like to write in my time, and their algorithms generally boosts posts with popular keywords or topics. And this is harmful to those who writes.

When Medium blocked one of my biggest posts behind their bizarre paywall, it got personal. You can read in nomedum.dev a little on how Medium's practices hurt the creators.

So, I wanted to take back the ownership of my own text content.

A few years later, there it is: marcuspereira.com, my personal self-hosted blog, using 11ty + Netlify CMS and hosted on Netlify.

The Premises

I was heavily inspired by https://manualdousuario.net/, my favorite technology related blog in the Brazilian blogosphere. So, if you are seeing some similarities, they are on purpose. Rodrigo Ghedinis an inspiration when it comes to transparency and commitment to the readers. You can read how he approaches lots of topics in the "about" section in Manual do Usuario's website.

That said, here's a few basic premises that I wanted to follow when creating my blog:

1. it should be multilingual. In the future, I want to move outside of Brazil and start an international career. Writing in English is a good way to show future employers that I can communicate good enough to understand and be understood. I'm also want to post in Brazilian Portuguese, my native language, so english-only was not an option.
2. it should be fast. Brazil is an unequal country. I want people that only has access to the internet in a limited 3G connection in an old Android Phone to be able to read my content without spending all their data plan.
3. it should be optimized. In the same sense that it should be fast, my blog should only use optimized images, videos over gifs, no unnecessary javascript and CSS and so on.
4. it should have image descriptions. It's not the fully accessible experience (for now), but at least, all images will have descriptions.
5. it should have a CMS or an easy way to write content to. Self-explanatory.
6. it should be cheap (free) to host and maintain.
7. it should be a static website or at least follow some JAMStackprinciples. I should be able to develop the website, then run a command to create all of my pages statically - so, no back end, no databases and so on.

Enter 11ty

For a few months, I tried the most common static page generators for blogging, such as Gatsby and Hugo but I didn't stick to it. It doesn't mean that they were bad, but sometimes I felt they were overkill for the things I was trying to achieve.

I found about 11ty, and it was a match: it is an extremely simple static site generator with great documentation and support for different template languages. I quickly bootstrapped a project and started to explore what can I do with it. I was able to write templates and then inject content from markdown (.md) files inside of it. Perfect.

I knew that I wanted to host it on Netlify (their free tier is great), so I went to it. I uploaded the bootstrapped project into a Github repository and configured it to deploy everything in the main branch to a test URL.

Then, I started to integrate Netlify CMS in the project. Netlify CMS is a great Content Management System that enables me to write my blog posts in rich text (in a graphical user interface), and then creates the .md files that will go into my post template. When I write something on Netlify CMS, the tool commits directly into my branch and deploys it.

Then, I spend a few months working on the blog in general. Implementing the basic layout, learning how to use Nunjucks as the template language, implementing tools such as SASS for writing styles, creating my own npm scripts for developing, building and deploying the pages and so on.

After that, I moved a few posts and then changed the test URL to the production one. This is the version 1.0 and I couldn't be happier about it - I basically achieved all of the premises that I had as a goal.

It's my code, it's my content. No paywalls, no restrictions. I can host it wherever I want.

A little about performance

This is the thing that I was most excited about. Since most of my premises were focused on the website being well optimized, I took extra care while developing it.

I didn't used any CSS framework, so I could make sure that the only CSS loaded into the page was used. It is not minified yet, but I'll fix this soon. For now, I'm not using any analytics tool. In the future I'll probably implement it to get basic info about my readers, but first I need to study all the open source ones (I don't want your data going into big techs). I'm also optimizing all images using squoosh before uploading it.

I did a small comparison for the same blog post on Google Pagespeed Insights (I tweaked the title a little), and these are the results for accessing on the mobile:

Blog. Score: 100 (mobile).

Yes. A big difference: exactly what I was trying to achieve.

So... what's next?

I still want to evolve this blog. These are my backlog:

• Implement latest and next posts at the end of an article. Done!
• Make sure the blog is fully accessible.
• Move all my posts scattered across Medium / dev.to to here. Done!
• Create English and Brazilian Portuguese versions of posts that doesn't exist in the other language. Done!
• Triple-check how link previews are being showed in the major social networks. Done!

But I'm gonna do it in my time. No pressure, no rush. Quality over quantity.

If you want to talk about this post, hit me on twitter! @pmarcus93