How it works

I want to remember how and why this blog started. Hope it can inspire you as well.

Why? #

I'm long time reader of Cal Newport blog. One of the ideas that he talks about is owning your data.

And he mentioned IndieWeb a couple of times.

What is the IndieWeb? #

The IndieWeb is a people-focused alternative to the "corporate web".

Getting the domain #

The first step to own domain is, of course, figuring out a name. I've struggled with it for a long time. I have to thank Farnam Street fs.blog for inspiration.
Fortunately, kula.blog was available!

Building the blog #

I thought about using CMS like Ghost but in the end, decided to give 11ty a try. Mateusz Kwaśniewski used it for kwasniew.com and was encouraging everyone to try it.

Most of it was copy pasted from 11ty/eleventy-base-blog

Hosting #

I'm using Netlify. It's UX is great. Integrates with Github and Let's Encrypt. It's great. :)

Tweaking #

The most important change was changing the default font to native ones:

Taken from: The New System Font Stack?

I like how it looks and there is no web font to load :)

html, body {
font-family: -apple-system,
"Segoe UI",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",

More changes to come #

I don't want to rush UI changes. I am going to tweak and fix bugs. Most of the work I want to put into the articles.

Github styles #

updated 20 March 2019

Inspired by kwasniew.com I'm trying out sindresorhus/github-markdown-css and disabling code highlighting.

Favicon #

Made with xiconeditor.com inspired by my old one at krzychukula.github.io

Code Highlighting #

Only in css! Generated at prismjs.com

Update 2020.01 #

Added support for user preffered color scheme based. It's really easy if you use css variables.

:root {
--background: #fff;
--text: #333;

@media (prefers-color-scheme: dark) {
:root {
--background: rgb(0, 0, 0);
--text: rgb(196, 196, 196);

color: var(--text);
background-color: var(--background);

Update 2020.03 #

  1. Added smooth scrolling to anchors (when you click on the # sign next to the headers)
html{ scroll-behavior:smooth; }
  1. Added sharing buttons from sharingbuttons.io

Share on Hacker News
Share on LinkedIn

← Home