🍦.11ty.js

This is the final post in a five-part series on “Getting Started with 🍦.11ty.js”

👣 Background

By this point, you should have already:

1. Installed and configured Git on your computer
2. Cloned 🍦.11ty.js from GitLab into your prefered directory
3. Installed Node.js and Eleventy

What is a text editor?

Not all text editors are created equal. When software folks speak about text editors, they’re usually distinguishing between those for plain text (namely, code) and word processors for rich-text documents (like those in LibreOffice, Apple Pages, or Microsoft Office).

All the files in 🍦.11ty.js are plain-text formats. Plain text files are lighter than rich-text formats. And unlike rich-text formats, you can open and edit plain text files with the program you prefer.

Here’s a list of the text editors that come preinstalled with some of the most popular operating systems:

• On 🐧 Ubuntu Linux, the default text editor is called Gedit.
• On 🍏 macOS, the default text editor is called Text Edit.
• On 🏢 Windows, the default text editor is called Notepad.

While you could use the default editor for your operating system to edit files occasionally, other editors are specifically designed to help you manage larger projects.

I use Vim. It’s free, open source, not-for-profit (all proceeds assist children in Uganda through ICCF Holand), and you can access Vim directly from the command line.

Now, Vim is unrivaled in its power and flexibility, but it also has a reputation for a steep learning curve. Although my I’m rather biased, I tell my students that any time and energy they dedicate to learning Vim will yield exponential returns in the long term. However, I don’t blame you one bit for wanting to reach for a different text editor while you’re getting your bearings.

There are dozens of text editors out there to suit a variety of tastes. Here’s a list of some other popular free and open source text editors that are available for all major operating systems:

• Atom, by GitHub
• VSCode, by Microsoft
• Notepad++, by Don Ho

Editing files in 🍦.11ty.js

Whichever text editor you choose, you’ll need to open the following files in the directory where you cloned 🍦.11ty.js from Git.

• 📝 Edit ./_data/site.json with your site’s information.
  Don’t be scared. You can change just about any text inside single quotes without breaking anything ('Safe to edit'). If you get stuck, please file an issue on GitLab where someone friendly can help.
• (Optionally) 📝 Edit .eleventy.js with your configuration preferences (a subject for another post)
• ❌ Delete the “Getting Started” message from ./_includes/layouts/home.11ty.js (I tried to make it obvious which lines)

In ./content/pages and ./content/posts/, you can edit or delete any of the files ending with the .11ty.js or .md extensions. To create a new page or post, I recommend copying and pasting one of these files to a new one until you get the hang of it.

To preview your site with Eleventy, you can enter the following command into your terminal:

npx eleventy --serve

Then open your browser and navigate to the URL Eleventy prints to your terminal (likely http://localhost:8080).

Use the build command, and Eleventy will generate a copy of your site to publish online with just about any webhost you like (for example, Netlify):

npm run build

🎉 You’re all set with 🍦.11ty.js! The only practical limit is your imagination.

Have fun! Make something worthwhile. And, if you feel so inclined, submit an issue, feature request, or merge request on GitLab to help make 🍦.11ty.js even better.