I Migrated From Jekyll to Eleventy

I spent about two weeks migrating my website from Jekyll to Eleventy. Jekyll is probably very good for simple websites, but I added a lot of complicated features to my website, so the Liquid code was a mess. Now that all that complicated code is in JavaScript, I feel like it'll be much easier to maintain.

I'm not sure I can write a good post about my experiences, so I'll just make a big list of tips and links. (make sure to also read the Eleventy docs!)

• Globally set default layout (I used method 2)
• Use the Array.prototype.filter() method to grab only certain pages
• The slugify filter, used in the eleventy-base-blog repo, throws an error and halts the build when used with multi-byte languages like Japanese. You can always make your own slug filter
• Jekyll post templates set their date variable using a date string in the filename of the template. Eleventy's date key doesn't work quite the same. You can use computed data to control exactly how variables are calculated, but you can't overwrite the default date variable this way, which will cause undesired results when sorting posts by date. You can make a collection sorted by the computed date as a workaround
• Globster is a good website for learning about and testing globs
• Glob for all folders within a folder except one named folder
• You can use Passthrough File Copy to copy non-template files to the output directory unaltered. If you're trying to use the rename option to map the input directory to the output directory, make sure to put all globs in the filter option
• “How can I filter a collection by a frontmatter field?” (Useful for managing Jekyll's categories in Eleventy. I use something slightly different than what is linked because my categories are an array)
• Strip <script> tags and their contents from a string
• Strip HTML Tags in JavaScript (Doesn't remove contents of <script> tags. Use the above regex to strip <script> tags before stripping all HTML tags)
• gitignore all files of extension in directory (files in .gitignore are also ignored by Eleventy)
• “Is there a way to make a child DIV's width wider than the parent DIV using CSS?”
• Re-use the sitemap to grab a list of all pages in client-side JavaScript (this JavaScript runs in the browser, not when Eleventy is generating the site)
• If you have set a default layout, make sure to code the layout so it skips rendering for pages with "permalink: false" (or else every build that hides draft posts, and manipulates post URLs with string functions, will fail)