How and why set up a blog with Eleventy

I try to note the process of building this blog.

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

Why? #

I'm a long time reader of the 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, I 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,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen,
Ubuntu,
Cantarell,
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
}

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 the user-preferred 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);
}
}

html,
body
{
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

Update 2020.05.15 #

Added footnotes #

markdown-it-footnote

Switched the page to use rem units #

html {
font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
font-size: 1.6rem;
}

But stored them into variables:

:root {
--size_s: 1rem; /* 10px */
--size_m: 1.6rem;
--size_l: 2.2rem;
--size_xl: 2.8rem;
--size_xxl: 3.4rem;
--size_xxxl: 4.5rem;
}

/* usage */
h1 {
font-size: var(--size_xxl);
}
h2 {
font-size: var(--size_xl);
}

Added last modification date #

I'm not sure why I couldn't use nice keywords for modified like mentioned in 11ty date docs but just putting it by hand works just fine and will be more reliable in opinion.

date: 2019-03-19
modified: 2020-05-15

After looking at the feed.xml I'm not sure if date isn't intended for it:

<updated></updated>

I'll think if it's worth addressing.



Share on Hacker News
Share on LinkedIn


← Home


Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.

* indicates required

Please select all the ways you would like to hear from Krzysztof Kula:

You can unsubscribe at any time by clicking the link in the footer of my emails.

I use Mailchimp as a marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.