Moving my blog to eleventy

Moving my blog to eleventy

I started blogging using Jekyll, it served me well for the most part but I wanted more control. I switched over to hexo for a while, it was good, had a lot of themes and migrating from Jekyll was a breeze. But there was something lacking: the ability to customize.

I love writing HTML and CSS so I wanted to develop my own markup and theme for the blog. Thus, began the hunt for a different SSG.

I came across Eleventy in one of Learn with Jason’s episodes and it looked promising, this is what got me hooked:

It is quite easy to setup and get started, so here it is! the blog in 11ty!

I am still working out the folder structure, but I seem to have a good layout that works for now.

Folder structure

/ |-- _includes # layouts |-- _site # eleventy builds the site here |-- css #
stylesheets, copied as is |-- img # images, copied as is |-- posts # blog posts
|-- .eleventy.js # eleventy's configuration |-- index.html # start page

Eleventy’s configuration

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addPassthroughCopy("css");
  eleventyConfig.addPassthroughCopy("img");
  return {
    passthroughFileCopy: true,
  };
};

Layout

This is how the index page is rendered with a list of links to posts:

{%- raw -%}
<div class="blog-list">
  <ul>
    {%- for post in collections.post reversed -%}
    <li>
      <a href="{{ post.url }}"
        ><h3>{{ post.data.title }}</h3>
        <span>{{ post.data.date | date: "%b %d, %Y" }}</span></a
      >
    </li>
    {%- endfor -%}
  </ul>
</div>
{%- endraw -%}

The site and the blog pages have their own layouts defined in _includes. In fact, the blog layout extends the site layout with its own content. Everyting is styled using plain old CSS.

Hosting

I decided to try netlify to host my blog and it has been fantastic! Best part is, it has built-in support for eleventy. Deploying is dead simple, point it to your git repo and the site is deployed. Updating is as simple as pushing changes to your repo.

I might buy a domain of my own someday, until then the site lives at https://kvrohit.netlify.app.

Published on August 01, 2020