eleventy-dot-js-blog

A starter project showing how to build a blog with the Eleventy static site generator using JavaScript templates (*.11ty.js).

Demo

Netlify

Summary

The layouts are written entirely in vanilla JavaScript (files with the *.11ty.js extension). Eleventy processes those templates and creates prerendered copies of the site HTML.

Features

💯 Lighthouse scores for
- 💨 Performance
- ♿ Accessibility
- ☑️ Best practices
- 🔍 Search Engine Optimization
🏸 Lightweight front end
- 🕸 Semantic HTML
- 🎨 Progressively-enhanced, modular CSS
- 🍦 Vanilla JavaScript templates
🎛️ Customizable design and data options
🍬 Choose between emoji favicons and the Real Favicon Generator
💡 Dark/light mode based on user’s system preferences
🔣 Multilingual support (instructions in ./content/README.md and ./_data/README.md)
🔖 Smart pagination
🗒️ Extensive inline documentation

Project Roadmap

Here’s a list of new features being considered. Submit a feature request to add to this list!

🎚️ Dark/light mode toggle #14
🏷️ Tag archives for blog (coming with Computed Data in Eleventy v0.11.0) #7
🗓 Date archives for blog #16
💌 Contact form (using Netlify Forms) #17
📡 RSS feed for blog posts #3
🗺️ Sitemap #54
🔍 Search #18
📄 Documentation site #19
📣 Webmentions #20
💬 Comments #21
📝 Integrate with Netlify CMS #22
⚙️ Service worker to cache content for offline access #23
🖌️ Apply logo/branding assets #24
🖍️ Syntax highlighting for code blocks #25
✍️ Author information posts (options for mulitple authors and guest submissions) #26

Getting started

Run a local copy of this site on your computer.

Install Node.js on your machine (see 11ty documentation for version requirements).

Then enter the following commands into your terminal:

1. Clone this repository and all its dependencies

git clone git@gitlab.com:reubenlillie/eleventy-dot-js-blog.git my-blog-directory-name

2. Go to the working directory

cd my-blog-directory-name

Specifically take a look at the file named .eleventy.js to see if you want to configure any Eleventy options differently.

3. Install the project dependencies with NPM

npm install

4. Edit the `.js` files in the `_data` directory with your site information

5. Run Eleventy

npx eleventy

Or build and host locally for local development

npx eleventy --serve

Or build automatically when a template changes

npx eleventy --watch

Or in debug mode

DEBUG=* npx eleventy

Publish your own copy

The command npm run build will generate a copy of the site files in a _site directory, which you can deploy with any hosting service.

unclepebbs/blog