A starter project showing how to build a blog with the Eleventy static site generator using JavaScript templates (*.11ty.js
).
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.
- π― 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
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
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:
git clone [email protected]:reubenlillie/eleventy-dot-js-blog.git my-blog-directory-name
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
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
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