Hello and welcome to my 100 Days of Learning Challenge!
In the last few weeks, I've explored vanilla Javascript, learning SQL for work, and video editing, but this week I'm shifting my focus.
I'm going to build a personal blog using Eleventy!
Since I already host my personal site on Netlify, I thought using 11ty would be a great fit. I want to create my own platform for sharing blog posts, especially as I explore non-tech related topics that I don't think would be appropriate or relevant to share here on DEV.
I've tried to get an 11ty blog set up in the past, but I struggled to get it into a usable state. This is mainly because 1) I had no idea what I was doing and 2) I didn't know what I didn't know or where to get started. Looking back, the biggest blockers were probably not understanding how an 11ty project is structured, and then not knowing how to make it look good.
There's some knowledge gaps I've had to fill, and I'm in a much better place to tackle this project. I'm more comfortable with Git, deploying projects to Netlify, setting up dev environments, and learning how to learn. It also helps that there are even more resources for learning how to set up a blog with 11ty now.
I was even considering writing my own series on getting started with 11ty, but then I came across @raymondcamden's comprehensive guide to getting started in 11ty that he just posted about a week ago. Truly perfect timing! I will probably also take a stab at writing my own guide, since there are some things I'd like to highlight as a true beginner while they're fresh on my mind.
My plan for this project is to do some research (in progress) and make sure I understand the things that caught me up the last time I attempted this, and I'll get to building this out tomorrow. I intend to have something working, and looking pretty, by next week.
Here are some of the resources I'm using:
- A Complete Guide to Building a Blog with Eleventy
- 11ty Tutorial: Cranking Your Jamstack Blog Up to 11! (I didn't realize this tutorial was also by Raymond!)
- Raymond Camden's Blog
- 11ty Docs
- Let's Learn Eleventy! | Learn with Jason
Header by Green Chameleon on Unsplash
Top comments (10)
Good thing.
I am keeping my comment in terms of what I am doing instead of an advice:
My side I just write them down the same day what I've learned. Also, I try to anchor my learning to official docs like 11ty.dev/docs/ and get comfortable with website format*, and use stackoverflow or blogs for understanding a particular concept or bug.
*For example, I do remember the hyperlinks of docs so that I could easily type. Commit webadress into memory.If there is anything I can do to help, just let me know. Good luck!
Hello Raymond! I do have a question around shortcodes...
I followed your guide and got the project up and running with some sample posts, and I could see the basic blog/index.html with my list of posts. However, when I went to the next step to add the post excerpts, and updated index.liquid and .eleventy.js with your code snippets, I get errors that the tag "excerpt" is not found and that the template can't be rendered:
TemplateContentCompileErrorwas thrown[11ty] > tag "excerpt" not found, file:./blog/index.liquid, line:7, col:1, file:./blog/index.liquid, line:4, col:1
ParseErrorwas thrown[11ty] > tag "excerpt" not found, file:./blog/index.liquid, line:7, col:1
ParseErrorwas thrown[11ty] > tag "excerpt" not found
I've done a lot of googling around shortcodes but I can't figure out why it's not reading excerpt from the .eleventy.js file.
If you kill Eleventy and re-run it, does it help?
It doesn't unfortunately. Here is the full log:
[11ty] > Having trouble rendering liquid template ./blog/index.liquid
TemplateContentRenderErrorwas thrown[11ty] > Having trouble compiling template ./blog/index.liquid
TemplateContentCompileErrorwas thrown[11ty] > tag "excerpt" not found, file:./blog/index.liquid, line:6, col:1, file:./blog/index.liquid, line:3, col:1
ParseErrorwas thrown[11ty] > tag "excerpt" not found, file:./blog/index.liquid, line:6, col:1
ParseErrorwas thrown[11ty] > tag "excerpt" not found
AssertionErrorwas thrown:[11ty] AssertionError: tag "excerpt" not found
at new AssertionError (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:663:28)
at assert (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:815:15)
at TagMap.get (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:4226:9)
at new Tag (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:2464:32)
at Parser.parseToken (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:2552:24)
at ParseStream.parseToken (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:2565:80)
at ParseStream.start (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:1253:33)
at Object.parse (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:2720:16)
at new Tag (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:2468:24)
at Parser.parseToken (/Users/laurenfosgett/Eleventy-Projects/eleventyBlog/node_modules/liquidjs/dist/liquid.node.cjs.js:2552:24)
[11ty] Wrote 0 files in 0.04 seconds (v1.0.0)
The bolded portion above caught my eye, is that expected? The most similar thing I could find is this issue: github.com/11ty/eleventy/issues/2098
I should note I'm on MacOS Monterey, Node v14.18.2. And if there's somewhere else I should be directing these questions please let me know!
Do you mind zipping your code as is now and sending it to me? My personal email is raymondcamden at gmail dot com.
Sent your way, thanks!
Ok, I think the issue is that your files/folders are a bit different than they should be. That can totally be on my guide's fault, but look at github.com/cfjedimaster/eleventy-b... and note how in the root, we have .eleventy.js, with the blog folder under. In your zip, you've got _includes and blog at root, with .eleventy.js under blog.
Does that make sense?
Did my guide lead you astray?
Eureka! That all makes sense. I was trying to use another tip from a different guide related to Browsersync not live updating if there wasn't a body tag in the template, and that's where the _includes and layouts came from. I removed the _includes and layouts I added, moved .eleventy.js and now it's all working!
For the site structure, I think this is where I made my mistake: "Make a blog directory and then a .eleventy.js file that for now only contains"... I think this is user error on my part all around, and I didn't realize I created .eleventy.js inside the blog folder. Your directions make sense, and if I had looked at the guide repo earlier I might have caught this sooner.
Thank you so much for your help, I'm going to carry on with the guide and I'll let you know if anything else trips me up!
Woot! :)