DEV Community

Corey McCarty
Corey McCarty

Posted on • Originally published at coreydmccarty.dev on

Customizing 11ty Blog

I started down this road after a simple engagement on Twitter with Brob and he suggested that I start blogging on dev.to and even went so far as to say that I should think about posting to my own site and syndicating over dev.to. At that point I had a custom domain without any clue what to do with it.

But How

Luckily Brob went on to direct me here for a straight forward tool that can publish a personal blog using GitHub Pages and TravisCI. The instructions are really easy and after having setup my custom domain through GitHub Pages already, I had this 'up and running' within an hour. This is where is really stalled for a while. At this point I had my build process up and running and could view the sample blog from my custom url.

Unmodified blog

Get Started

Letting this thing go stagnant for too long made it feel progressively harder to get done. The page gives clear instruction on first steps.

  1. Edit the _data/metadata.json with your blog’s information.
  2. (Optional) Edit .eleventy.js with your configuration preferences.
  3. Delete this message from _includes/layouts/base.njk.

Edit _data/metadata.json

{
  "title": "Your Blog Name",
  "url": "https://myurl.com/",
  "description": "I am writing about my experiences as a naval navel-gazer.",
  "feed": {
    "subtitle": "I am writing about my experiences as a naval navel-gazer.",
    "filename": "feed.xml",
    "path": "/feed/feed.xml",
    "url": "https://myurl.com/feed/feed.xml",
    "id": "https://myurl.com/"
  },
  "author": {
    "name": "Your Name Here",
    "email": "youremailaddress@example.com"
  }
}
Enter fullscreen mode Exit fullscreen mode

This stuff is really easy. I'm starting to feel ashamed of having waited so long to work on this. All of the data here can be put together inside of 5 minutes.

Delete this message from _includes/layouts/base.njk

<main class="tmpl-post">
      <div class="warning">
        <ol>
          <li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
          <li>(Optional) Edit <code>.eleventy.js</code> with your configuration preferences.</li>
          <li>Delete this message from <code>_includes/layouts/base.njk</code>.</li>
        </ol>
        <p><em>This is an <a href="https://www.11ty.io/">Eleventy project</a> created from the <a href="https://github.com/11ty/eleventy-base-blog"><code>eleventy-base-blog</code> repo</a>.</em></p>
      </div>


    </main>
Enter fullscreen mode Exit fullscreen mode

Hack off that one div. Again I'm not sure what I was expecting to be difficult in this setup.

About

In order to customize the "About" page that is linked in the top nav pane you will need to edit about/index.md. While the markdown spec is prolifically generic, if you have any experience with using markdown on Reddit, Discord, or GitHub then it is pretty easy to use. Personally I am writing this through IntelliJ Community Edition with Markdown Support plugin and I'm able to see the output in realtime. Put in some basic information that you would like to be displayed on your page.

Start Blogging

After getting these things all completed you can start writing your first blog entry. I'm writing this entry as I complete the work that I'm describing. While working I have Eleventy running as npx eleventy --server --watch so that the build picks up whatever changes I make and automatically serves them for viewing in the browser (I'd hate to be publishing this without first testing that it works).

While writing this post I was able to get an image included using the included html templating language with <center><img src="/img/Generic11ty.bmp"/></center>

Creating tags for your posts is as easy as adding them in the heading of the markdown file after the default of 'post'.

title: Customizing 11ty Blog  
description: Cleaning up after forking  
date: 2019-08-13  
tags:  
  - post
  - 11ty  
  - travisci  
  - meta  
layout: layouts/post.njk
Enter fullscreen mode Exit fullscreen mode

Still a work in progress

At this point I have gotten the blorunning with my custom information so that it feels more like mine and less like some code that I forked and forgot about. While I'm not exactly a frontend developer, I plan on sharing my future work on some custom css as well as my online resume generator.

Top comments (3)

Collapse
 
bayuangora profile image
Bayu Angora

Can we use layout with .html rather than .njk?

Collapse
 
xanderyzwich profile image
Corey McCarty

I've not tried. HTML will likely not be able to use template language. The 11ty engine reads different template languages so I believe that it uses the file extension to decide template language to be applied.

Collapse
 
mathieuhuot profile image
Mathieu Huot

Eleventy will process html files through liquid template engine by default as long as your file is in your source directory (root of the project by default). 11ty config.