DEV Community

elizabeth-delor
elizabeth-delor

Posted on • Updated on

Figuring out 11ty... barely

Using Eleventy to build a website

Over the past week I was assigned to create an 11ty site to repost my dev.to blogs onto to get use to 11ty. In this assignment I had to create three different sites from three different starting points:

  1. No structure, just build it
  2. Eleventy Base
  3. Hax Base

Similar to my last post about APIs, I immensely struggled to get both 1 and 3 to actually work. So I will go into detail on the second one, aka the one that actually loves me and did what I wanted it to do :]

Eleventy Base <3

To begin, I used the template from this repo to have the structure needed to add blog posts to. From there, I had a little looksie around the repo itself and found the posts folder.
Image description

From there I decided to select three random dev.to posts from my account and put them in order from when I posted them. They are respectively labeled as #post.md from oldest to newest. Each post has the following structure to it:

---
title: "Installing Open-WC"
description: "Learn the basics on how to install Open-WC and use it!"
date: 2021-08-31
tags:
  - openwc
  - tutorial
  - terminal
layout: layouts/post.njk
---
### Applications Used:
* Terminal
* NodeJS (LTS)
* Yarn
Enter fullscreen mode Exit fullscreen mode

Similar to Dev.to, eleventy base utilizes the markdown formatting. The difference is that on the eleventy base, there is a section at the top that has the information for title, description, date, tags and even layout.

For later posts, I always was about to utilize href's to link from previous posts and next posts like this:

<a href="{{ '/posts/firstpost/' | url }}">Previous Post</a>
<a href="{{ '/posts/thirdpost/' | url }}">Next Post</a>
Enter fullscreen mode Exit fullscreen mode

If I had to select between the three options, I obviously would choose this one when building your own site as you can still customize as you please but do not need the stress of building everything from scratch or running into errors.

I GOT HAXCMS TO WORK [updated]

So I finally got this to work because I simply forgot to install yarn :] such a fun and fantastic find.

The Ones that Failed :[

So as stated earlier, I couldn't get the first and third repos to work T-T so sad
When doing the first one there was a lot of blood, sweat and tears (mainly tears but alas) but I was able to get the title screen to work. Now I did try to add posts, I really did, but kept running into errors.
Prior to getting the title screen I also managed to break the original repo somehow.

As for the Hax repo, I simply couldn't get past cloning the template. Once I downloaded npm and went to run it, it started to read and write a bazillion packages and I kept getting errors saying CANNOT GET / . Now I am by no means an expert but I do not think that was suppose to happen ¯_(ツ)_/¯ .

The Repos

Working
Base
Hax
Not Working ;-;
Free For All

Top comments (0)