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

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


![EMTsU20YIS.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604686346501/0NlMFrTva.png)

That's my new blog that I have started. It's going to be more of a personal blog because my [Hashnode blog](https://blog.aboutdavid.me) 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](https://bulma.io) with [Webpack](https://webpack.js.org)
- 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1604693796951/VfWlDDDYK.png)
- The analytics problem was by using Simple Analytics. I've decided to make my analytics public so you can find them [here!](https://simpleanalytics.com/notebook.aboutdavid.me)
- 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](https://npmjs.com/package/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](https://gist.github.com/aboutDavid/130eaa4a61d87eff9ff47b30ad08bf00)
- Open Graph Images can be made using [vercel/og-image](https://github.com/vercel/og-image) with a few changes. I made a fork of the repo and made those changes [here.](https://github.com/aboutDavid/notebook-og-image-cards)

### Screenshots:
![](https://file.coffee/u/oSCvuVLJnu.png)
![](https://file.coffee/u/vnGWqtnf3B.png)
![](https://file.coffee/u/UmLBSBrt8V.png)
![](https://file.coffee/u/sXekWmUUU6.png)

### 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](https://notebook.aboutdavid.me)

Thanks for reading!