You are using an unsupported browser. Please update your browser to the latest version on or before July 31, 2020.
close
Home > Projects > What is Eleventy (11ty) and how can I use it on Glitch?
What is Eleventy (11ty) and how can I use it on Glitch?
print icon

Eleventy, or 11ty for short, is a static site generator based on JavaScript.  

Because you can use it with several template languages including Markdown, HTML and Nunjucks, it is a simple way to start creating a basic website - like a blog, while having the option to run more advanced configurations if you’re feeling fancy!

 

Here’s how to create an 11ty project on Glitch:

  • Click the New Project button and then select glitch-hello-eleventy from the drop-down menu.

  • This will remix a copy of the template that is saved to your account.

  • You will be able to find your project in the future by going to your dashboard.

 

Here’s how to edit your glitch-hello-eleventy project:

In your new 11ty project, you will see a few different folders in the project editor fileview. Most of the files within these folders are used by 11ty to generate your static site.  When you’re ready to begin editing your project, you will work out of the src folder (/src).

 

Using /src:

When you want to edit the pages and layout for your site, you will work out of /src

  • By default, the files in the /src use Markdown (.md) for editing pages and Nunjucks (.njk) for designing the layout.

  • In our template you will find the following pages already set up and ready for you to edit:
    about.md - This is where you can edit the About page for your site
    index.md - This is where you can edit the landing page for your site
    posts.md - This is where you can edit the list of other pages in your site.

  • To edit individual posts, you will work out of /src/posts/

  • To customize the layout, look and feel of your site, you will work out of /src/layouts/

 

Important notes about using the Glitch 11ty template:

The template, ~glitch-hello-eleventy is new on Glitch which means that there are a few limitations to keep in mind.  While these limitations exist today, we plan to provide more options for generated static sites in the future.  If there is a feature that you would like to see, you can post your request in our Community Forum.

 

Current limitations:

  • In order to use 11ty on Glitch, you will need to be using a project that is a remix of ~glitch-hello-eleventy.  This means that you cannot switch an existing project to 11ty.  

  • Git import will only work if the project is detected by our system to be generated_static when importing.

  • The project editor will use npm start and npm build to generate the site.  This means that it’s not possible to configure the project so that it uses different start or build commands.

  • When you are editing your project you are editing the live glitch.me site. When you stop editing, the site is served statically which means that you can not manually trigger a build in the project editor.  Instead, npm build will automatically run once the project goes to sleep. If you need to debug your build you can manually run npm run build in the project editor terminal.

 

If you’d like to learn more about how 11ty works, check out the official documentation.

Got more questions? Check out our Community Forum!
Open 24/7, the forum is where Glitch makers help each other and show off all the rad apps that they have created. It's the friendliest community of coders on the Web!
Feedback
1 out of 1 found this helpful

scroll to top icon