aboutDavid's Blog

I made my own blog using 11ty, 11ty base blog, and Bulma.

David's photo
David
Nov 6, 2020·

2 min read

In one of my mirrored DEV posts, you may have seen that it was originally published on notebook.aboutdavid.me

EMTsU20YIS.png

That's my new blog that I have started. It's going to be more of a personal blog because my Hashnode blog is more developer focused.

Requirements

  • It is supposed to be simple, yet elegant
  • As less clicks as possible
  • No "sell your data" analytics.
  • Be able to easily setup (Like those easy "Deploy to Heroku" buttons)
  • Make it easy to write posts
  • Gzip and Brotli compression
  • Caching (ability to make website load faster/save bandwith)/Ability to work offline
  • Custom Emojis for cross-browser/device platform compatibility
  • Open Graph Images

Meeting those requirements

  • The simple, yet elegant part was easily solved by using the Bulma CSS framework with Webpack
  • The "less clicks" problem was just solved by putting all of the posts on one page. Just one click to see the content that you want! brave_5Lm7stejkD.png
  • The analytics problem was by using Simple Analytics. I've decided to make my analytics public so you can find them here!
  • The easy to set up problem was solved by having a _data/metadata.json where all of the config goes so I can easily modify it at any time
  • I made it easier to write posts by just using Markdown. That's seriously it.
  • Gzip and Brotli compression is actually very easy when you use http-server. It is also faster to start then using 11ty's built in --serve option.
  • Caching/Ability to work online was easily done by using a Service Worker.
  • Custom Emojis were solved by using Twemoji. You can easily set that up here
  • Open Graph Images can be made using vercel/og-image with a few changes. I made a fork of the repo and made those changes here.

Screenshots:

What I have learned:

  • For bigger projects that use webpack, you might want to use SASS as it is very easy to learn and include
  • Webpack can bundle so many different file types! Images, JavaScript CSS, SCSS, SASS, Handlebars, cjs, etc.
  • I learned more about Nunjucks because of 11ty.
  • I learned more about 11ty and how it works and how to use plugins.

You can see a demo of it here

Thanks for reading!