Technologies used by Coder.Today

A 4 minutes story written on Feb 2019 by

image

The stack behind coder.today

I finally found some spare time to invest in my website, so .. here it is!

Medium.com

Previously coder.today was a blog on medium.com with a custom domain. The advantages were:

  • free marketing, my articles could be found via medium.com searches and newsletters
  • online and mobile app editor
  • the writing experience. Medium really nailed it, that blank canvas, the fonts, the UI they all converge in a wonderful product designed to write.
  • no worries about security patches, operations (now dealt by GitLab)
  • free of charge (same as GitLab)

While I enjoy these freebies I reached a threshold where I wanted more custom features from my domain. My future plans include video and text tutorials, courses, newsletters and other stuff.

Medium was a good choice for an MVP, now I want to build a more custom Release Candidate.

Static FTW

I am the only contributor and I do not need a fancy admin like a CMS has to write articles. I also like Go and Hugo is already in the top generators, so I started using it. No back-end services to worry about it is a nice advantage so for me, a static website was a no brainer, I even wrote about its advantages:

  • raw performance (served as static assets or from CDN). A side-effect of a good performance is the SEO score, lower latency means better UX.
  • bulletproof security — no servers, injections, databases, data validation
  • low maintenance/operation complexity (or none?)
  • … more on 10 examples of static HTML website usages
image
raw performance gained, before vs after

Another advantage of building a custom small website is that you can achieve a higher performance!

The Backbone

image

Hugo is the main technology behind Coder.Today, the extended versions more specifically. It handles the following tasks:

  • content (markdown and HTML) generation
  • image processing (thumbnail generation)
  • SCSS, CSS and JavaScript minify and bundle
  • routing, templates and other details
image

I did not expect to find such complex features like:

So far I never run into a customization issue, Hugo is like a framework but allows the users to add new features or it gets out of your way if it reach its limits.

To move all my ~60 articles and drafts from medium to hugo markdown I built this utility: medium-to-hugo. There is no easy transition between 2 platforms and 2 formats. I had to manually inspect and fix all the articles, most of the issues were from the html-to-markdown bugs and some weird/custom Medium HTML element composition.

Customization

I started from a free theme, Hugo has a lot of them, but after a few days I ended up removing and changing most of it (it was an outdated, poorly written jQuery bloated theme, but it looks the way I wanted). The advantage of being a full stack web developer is that you can modify and improve a theme based on your needs. The looks are temporary until I get a chance to build a custom design.

Medium has its own lazy image loading system, Hugo does not so I wrote one. It is a pretty important feature if you ask me (to have on an website).

I still use a few front-end libraries (left from the theme), but in the next iteration I will remove most of their code: Bootstrap (only the responsive classes and no JS), FontAwesome (only ~20 CSS classes no JS) and Masonry.

image
GitHub's best replacement

GitLab is keeping everything safe and running. The source code is on a private repository, the hosting is done with GitLab Pages and the Continuous Deployment by GitLab CI/CD.

The setup was done with a single mouse click and a yaml, .gitlab-ci.yml:

image:
  name: klakegg/hugo:0.53-ext-alpine
  entrypoint: [""]

pages:
  script:
    - hugo
  artifacts:
    paths:
      - public
  only:
    - master

This is the simplest example, my YAML is a bit more complex, with S3 deployment as well.

image

There are also 2 official comprehensive tutorials: deploy to GitLab and Pages and SSL Certificates.

image

The domain nameservers, DNS, CDN and SSL are handled by CloudFlare. What does exactly mean for me:

  • instant changes on DNS entries (instead of 24h)
  • globally distributed cache (my website can be cached in 150+ locations on the globe, closer to the users)
  • secure, all the content is distributed via TLS (SSL)
  • cheaper (as a domain registrar, CloudFlare is the cheapest you can get)

Community

Medium.com comments/replies are notorious bad implemented, as in they consider each comment as an entire Post/article. Because I have no server/back-end and wanted to use a managed service I went down the safest path: Disqus.

Email

The newsletter is handled by Mailchimp and the email service by FastMail.

Costs

If I exclude my own time spent on making the website, the new version is cheaper. On Medium.com I had to pay 75$ to have a custom domain, on CloudFlare, GitLab, Disqus and Mailchimp I use the free tiers for now.

Takeaways

Overall I like using n website generator, for a technical person that is not afraid of markdown and bash it is a powerful tool. If you know web development it becomes a swiss knife!

Thanks! 🤝

Please share the article, subscribe or send me your feedback so I can improve the following posts!

I curate a list of articles, talks and papers for one/two times per month. They are mostly related to computer science, distributed systems, databases, Go, containers and Cloud solutions.

comments powered by Disqus