How this website is made

Basic structure

I had only rudimentary knowledge of HTML and CSS. So I thought the easiest way to build the site was to start from a base template that I could tweak incrementally.

I searched a bit online and found an archived website builder from Sadgrl that had exactly the base structure I wanted.

Website builder

I copied the CSS and HTML files and studied the structure of the website.

Content Setup

I wrestled with the idea to add new HTML sites one by one whenever I wanted to create a new blog post, but that process seemed tedious to me. That procedure would be fitting for more static websites, but not for a blog. At the same time I wanted full control over the styling so I didn’t want to hand control over to an overblown framework.

Eleventy seemed perfect for that!

I watched a small tutorial and followed the steps.

So basically, I have a index.md file, which holds the content of the homepage. In a _includes folder resides the layout.html file. This file is important because it still dictates the structure of my website. It uses a separate CSS file, of course.

In the layout.html file we can define where the main content goes. For example.

    <main>
    <div id="back_button_line">
    <a id="nav_backbutton" href="{{ post_overview_site }}">Back</a>
      </div>

    <hr class="post_title_line">
    <div style="display: flex; justify-content: center;">
        <h1 style=" color: #00e0d1;">{{ title }}</h1>
    </div>
    <hr class="post_title_line">
    {{ content }}
    </main>

Notice the Nunjucks {{ post_overview_site }}, {{ title }} and {{ content }} placeholders. These placeholders get replaced when actually converting your .md files using the YAML front-matter defined in those files.

Blog Content

My idea was to have two sites that lay out all blog posts that were made in a specific category. These sites are also regular .md files that have Nunjuck templates inside of them.

---
layout: layout.html
---

# Blog posts related to programming

{% for post in collections.programming reversed %}
<div><h2 style="display:inline">
    <a href="{{ post.url }}">{{ post.data.title }}</a>
</h2></div>
{% endfor %}

This is basically all the setup you need. You can start writing blog posts now. It is important that they have the yaml attributes you want to replace in the layout.html.

Additional setup

To display your code nicely (like Github) you have to install a plugin.

npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

You must add the plugin to your eleventy.config.js file.

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

    module.exports = function(eleventyConfig) {
        eleventyConfig.addPlugin(syntaxHighlight);
    };

Add a github CSS theme you like to your project and add it to your layout.html. That will result in code snippets like you see on this site.

Maintaining

To preview your website at URL http://localhost:8080/, type the following in your command line.

npx @11ty/eleventy --serve

When you are ready to publish your site, you need to build the site first.

npx @11ty/eleventy --input=. --output=_site

You can then upload all the files in folder _site to your hosting site.