My personal website, built from eleventy-base-blog v9.
Incorporates CSSBox for the Gallery page.
- Make 'notes' and 'links' tag icons for home/archives post listings.
- Change Home to have blog post exerpts + notes
- Integrate music/spotify api for currently listening
- Redesign Home to be more minimal/typographic
- add color with paint covering background
- Add sections for blog, gallery, notes
- Make notes section browsable by tags
- Clone this Repository
git clone https://github.com/dapierce/dapierce.github.io.git
- Navigate to the directory and install packages
npm install
- Run Eleventy
Generate a production-ready build to the _site
folder:
npx @11ty/eleventy
Or build and host on a local development server:
npx @11ty/eleventy --serve
Or you can run debug mode to see all the internals.
The rest is from eleventy-base-blog v9 README.md
- Using Eleventy v3 with zero-JavaScript output.
- Content is exclusively pre-rendered (this is a static site).
- Can easily deploy to a subfolder without changing any content
- All URLs are decoupled from the content’s location on the file system.
- Configure templates via the Eleventy Data Cascade
- Performance focused: four-hundos Lighthouse score out of the box!
- 0 Cumulative Layout Shift
- 0ms Total Blocking Time
- Local development live reload provided by Eleventy Dev Server.
- Content-driven navigation menu
- Fully automated Image optimization
- Zero-JavaScript output.
- Support for modern image formats automatically (e.g. AVIF and WebP)
- Processes images on-request during
--serve
for speedy local builds. - Prefers
<img>
markup if possible (single image format) but switches automatically to<picture>
for multiple image formats. - Automated
<picture>
syntax markup withsrcset
and optionalsizes
- Includes
width
/height
attributes to avoid content layout shift. - Includes
loading="lazy"
for native lazy loading without JavaScript. - Includes
decoding="async"
- Images can be co-located with blog post files.
- Per page CSS bundles via
eleventy-plugin-bundle
. - Built-in syntax highlighter (zero-JavaScript output).
- Draft content: use
draft: true
to mark any template as a draft. Drafts are only included during--serve
/--watch
and are excluded from full builds. This is driven by theaddPreprocessor
configuration API ineleventy.config.js
. Schema validator will show an error if non-boolean value is set in data cascade. - Blog Posts
- Automated next/previous links
- Accessible deep links to headings
- Generated Pages
- Home, Archive, and About pages.
- Atom feed included (with easy one-line swap to use RSS or JSON
sitemap.xml
- Zero-maintenance tag pages (View on the Demo)
- Content not found (404) page