There's levels to 11ty
11ty Hello-World Blog
The first example of 11ty we'll look at is a simple hello-world style blog.
We'll use the documentation to start a project with 11ty. Following these instructions, we install the necessary packages to our project to be able to run in 11ty.
Plug-ins are very useful with 11ty but they are not needed. In this example, I used a syntax highlighter plug-in.
Once these steps are done you're all set up and ready to create your site in markdown.
The simple blog I made looks like this:
If you'd like to see the code for the site check out my simple example on Github, all the site content is held in the README.md file.
11ty Blog with Template
The next example we'll look at goes more into depth of 11ty. We are creating this site from this template.
This site works by making a collection of markdown files that hold each post and get displayed by linking to those files in the index.html.
Here we are able to link on any page, the location of another file.
Each post follows a similar format (title, description, date, tags, layout, post content):
If you'd like to see the code for this 11ty blog, check out my Github.
Google 11ty Blog
Lastly, we'll look at a template created by Google that uses 11ty to make a blog. If you'd like to check out the template yourself, this is their Github.
Similarities
Google's 11ty template is structured almost exactly like the pervious blog template we looked at. All of the posts are held in one folder and each post has a bit of metadata linked with it then room for the post content.
Differences
The biggest difference you'll notice is the Google template is a lot more esthetically pleasing than the previous 11ty template. On this template there is also a way to make a draft post. By adding draft: true in the metadata of the post it will hide that post from the production site and only view it in your developer mode.
Why is this template worth using?
Google created this template to have the highest performance, accessibility, best practices, and SEO possible (which is very important since this is how Google rates if your site is put high on the engine's search page). With their template you will be able to take full advantage of Google's search algorithm.
I made a quick sample blog that can be found on my Github and looks surprisingly well for not doing any additional formatting or additional styling.
Top comments (0)