okpebbs/blog

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 [email protected]: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.

© 2020 by Reuben L. Lillie