A New Hope: Blogging Again

TL;DR;

I’m starting yet again a new blog but this time around I want to apply some of the priciple I would use at work, work backwards from and a set of features I want for my blog, use and MVP and Move Fast and Break Things approach and document through a series of posts each step of the way, by the time I’m done I should have a fully working system and some content in 🙌

First step is to “pusblish” this post on Github as simple md file, that’s as MVP as it gets

Disclaimer

This post and its content are heavily opinionated base on my experience and likes, I don’t meand to offend or attack anyone 😅

Intro

Blogging eh?

Sounds like it’s a super-straightforward way to share some knowledge to other and it is, these days you start typing away on whatever publishing platform you like and your’re golden.

If you want to use an off the shelf solution you can set up a blog on Wordpress or Ghost (just to name a couple I’ve used in the past) and use the very fancy editor to publish your super high quality content.

As an alternative you can use a static site generator like Jekyll or Hugo or go for some new fancy tools like Gatsby or Gridsome, type a way on a markdown file and you’re mostly done, these days is very very easy to get your content out in the wild.

Easy right? well, not really, even just chosing how to get your content out there can be overwhelming, and each and every one of the solutions above has pros and cons, for instance:

• Publishing Platform (Medium for instance)

  • Pros
    • Easy as pie, sign up, create your content, publish.
    • Everything is taken care of, from resizing images to social media metatags.
  • Cons
    • Limited control overall, yes everything is easy but at some point you might find yourself in a situation in which you whish to have a bit more control on what’s happening and you might hit a brickwall.
  • My personal cons
    • Every post on medium is another post on medium, is not Matteo Hertel publishing something and I’d like, if possible, not to be one of the many.
    • The content in not open source on Github, one of my requirement is to have all the content open source and have people raising PR to fix mistakes, make amends or fix my grammar.
    • Last but not least is not my own thing, I don’t want to build everything from scratch but I don’t want to use something where nothing is mine but the content.

• Off the shelf solution

  • Pros
    • The hard stuff is taken care of and the UX is sometimes amazing like Ghost’s editor, by far the best editor I ever used.
    • With plugins extensions and updates you’ll always be covered for new use cases or shiny new things coming out.
  • Cons
    • you have to either maintain the infrastructure (and pay for it) or use something like a shared hosting and take a huge hit on the performance side of things
  • My personal cons
    • I’ve used countless CMS in my career and I never found a use-case of having such a complex tool for a bunch of blogpost that will be sent down the wire as simple HTML page.
    • Updates, and infrastructure management are a pain in the neck.

• Static Site Generators

  • Pros
    • Blazing fast.
    • Worries free experience, no database to provision, no plugin to update, just write and publish.
    • Some of them like Gatsby and Gridsome are truly mindblowing, some of the tech powering those tools is out of this world
  • Cons
    • For SSG like hugo and jekyll you’re back to good ol’ HTML CSS and JS, the modern web stack requires a lot of tools that are not straightforward to set up most of the time.
    • For SSG like Gatsby and Gridsome you are locked in in a particular framework, next to impossible to get out of it if you decide to change direction (this should probably be in the personal cons 🤔).
  • My personal cons
    • Basically the combination of the two above.

Of course there is always the solution of building everything from scratch, as exciting as it sounds I tried that, in fact at the time of writing this my current blog is custom build from scratch, and I have the grand total of 2 posts there, there are too many things to consider and once the initial excitements fades, you end up with a half baked solution that you don’t want to maintain anymore, I’ve been there, don’t want to do it again.

The idea

A while ago (Now 2018) I’ve helped my best mate setting up a (personal blog)[https://github.com/giordi91/giordi91.github.io] he wanted something very very simple, I managed to convince him to use Hugo (as I love Golang and I was the one who was setting everything up) I was blown away on how easy was to set the whole thing up and how easy was for him to pick it up (even if he doesn’t listen to me half of the time 🤷‍♂️) after a wile I’ve automated the need of me to handle things away so he was happily bloggin away.

After a little while I’ve checked the repo just to see how it was going and I found this in one of the markdown posts

   <p style="background:gray;padding: 1em;">

I died a little bit on the inside.

Moreover when he asked me “Can I have an image comparison slider?” I had to put in a framework (I chose Vue because I like it) but it was such an overkill for something so simple and small and I refused to load jQuery in, if only there was a way to use simple HTML to tackle complex interaction without using a fully blown framework…

Web Copmponents to the rescue

As a former Polymer developer Web Components are my thing, unfortunately the modern web relies heavily on frameworks like React or Vue and 80% of the industry rotates around them and Web Components never had the loved they deserved, I will write up a separate post about Web Components and my experience with them, but the long story short is: after a lot of thinkering I found a nice wayt to use web-components in a static site built with Hugo, once that was done, it was all good to go so I decided to start this new project properly.

A new hope

Once I had the PoC(a blog post about this will be published at some point) working I was super hyped and started adding features to the whishlist and planned super complicated interactions and mind blowing features, but (sometimes) I learn from my mistakes and I had to come back down to earth and start walking before running, I’ve created a simple list of must have that will give me the Blog 0.1, that will be my foundation to build all the nice features I wanted to add.

Here’s the list: - All the content needs to be in its own repository, 100% decoupled from the blog UI - The UI will be a Hugo theme, with Web Components integrations - existing component can be added as needed - new component will be developed using the stencil framework - The UI needs a CI/CD pipeline to deploy to production - The blog needs a search functionnality (will use Algolia) - The images and assets will need to be optimised and served from a CDN (will use Cloudinary) - The final blog needs to be a PWA with offline support

But this is not it, what I will do is to publish a post for each step including everything that does not meet the eyes for instance:

- CI/CD integrations
- Deployment
  - on netifly
  - on firebase hosting
  - on kubernetes
- Security
- Testing
- PWA

and probably a lot more, this will both keep me interested and hopefully help other folks to undestrand the intricacies of the modern stack and if I can do it, anybody can!

Conclusion

To end the first of what I hope it’ll be a glorious series of blog posts, I’d like to encourage anyone who wants me to cover a particular topic to open an issue on github and I’ll do my best to cover it.

Until next time, have a good one.