Docs

Design

This is a simple theme built with 11ty and for CCS, Pico. I was wanting a basic site that was easy to setup so I could add notes and journal items.

The pico framework is real light weight and easy to configure. On this sites home page pico has it's own grid system and that is applied with a loop and shows 4 posts per row. If there are less than the 4 posts, they are still equally split for the width of the page.

A simple theme switcher is included and determines the light / dark theme based on user settings.

All posts can be found in the posts directory and you may use markdown or nunjucks files for your posts.

Install

To begin using journa11ty you may Fork the repository and begin adding your posts and pages.

git clone https://github.com/cjerrington/journa11ty.git

Next install the packages

npm run install

There are some basic run scripts pre-written for you as well.

  "scripts": {
    "build": "npx @11ty/eleventy && npx -y pagefind --site _site",
    "build:search": "npx -y pagefind --site _site",
    "bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy",
    "watch": "npx @11ty/eleventy --watch",
    "serve": "npx @11ty/eleventy --serve",
    "start": "npx @11ty/eleventy --serve --watch",
    "dev": "npx @11ty/eleventy --serve",
    "debug": "DEBUG=* npx @11ty/eleventy"
}

Using Pico

I decided in hopes to make it simpler for myself and others, to install picocss from npm. You can update the css theme file by updating the .eleventy.js copy function.

eleventyConfig.addPassthroughCopy({"node_modules/@picocss/pico/css/pico.min.css": "css/pico.min.css"});

The documentation at pico is easy to follow and make adjustments as needed.

Using Prism for syntax highlighting

The @11ty/eleventy-plugin-syntaxhighlight is already installed along with PrismJS. Just like with Pico, the npm package is installed and you can choose your theme and update it in the copy function.

eleventyConfig.addPassthroughCopy({"node_modules/prismjs/themes/prism-tomorrow.min.css": "css/prism-tomorrow.min.css"});

Check out prismjs for more details, but with 11ty we only need to supply the CSS file.

Current theme options:

Custom CSS

There is a custom.css file that is passed in. This has a few site adjustments, but your own modifications are able to be added to this file as well.

The custom.css has the portion of styling for the search feature to display correctly in light/dark mode.

/* Updates for dark theme search */
[data-theme=dark]{
    color-scheme:dark;
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #eeeeee;
  --pagefind-ui-background: #152028;
  --pagefind-ui-border: #152028;
  --pagefind-ui-tag: #152028;
}

PageFind

I've included PageFind to make it easier to search your journal or blog site. To ensure your search index is updated, you need to build the site then run PageFind.

Traditional way 

npx @11ty/eleventy 
npx -y pagefind --site _site
npx @11ty/eleventy --serve --watch

Process included on build

While looking on how to add PageFind to an Eleventy site, I found this article from Robb Knight who uses the eleventy.on('after') process.

eleventyConfig.on('eleventy.after', () => {
  const pagefindBuild = execSync(`npx pagefind --site _site --glob \"**/*.html\"`, { encoding: 'utf-8' })
  console.log(pagefindBuild);
});

Now on serve and build you'll see the output of the Eleventy build and PageFind.

> journa11ty@1.0.0 start
> npx @11ty/eleventy --serve --watch

[11ty] Writing ./_site/about/index.html from ./about.njk
[11ty] Writing ./_site/tags/index.html from ./tags-list.njk
[11ty] Writing ./_site/tags/personal/index.html from ./tags.njk
[11ty] Writing ./_site/index.html from ./index.njk
[11ty] Writing ./_site/docs/index.html from ./docs.md (njk)
[11ty] Writing ./_site/posts/2025-05-01/index.html from ./posts/2025-05-01.md (njk)
[11ty] Writing ./_site/posts/2025-05-02/index.html from ./posts/2025-05-02.md (njk)
[11ty] Writing ./_site/posts/2025-05-03/index.html from ./posts/2025-05-03.md (njk)
[11ty] Writing ./_site/posts/2025-05-04/index.html from ./posts/2025-05-04.md (njk)
[11ty] Writing ./_site/posts/2025-05-05/index.html from ./posts/2025-05-05.md (njk)
[11ty] Writing ./_site/posts/2025-05-06/index.html from ./posts/2025-05-06.md (njk)
[11ty] Writing ./_site/posts/2025-05-07/index.html from ./posts/2025-05-07.md (njk)
[11ty] Writing ./_site/tags/notes/index.html from ./tags.njk
[11ty] Writing ./_site/tags/daily/index.html from ./tags.njk

Running Pagefind v1.3.0 (Extended)
Running from: "~/git/journa11ty"
Source:       "_site"
Output:       "_site/pagefind"

[Walking source directory]
Found 14 files matching **/*.html

[Parsing files]
Found a data-pagefind-body element on the site.
↳ Ignoring pages without this tag.

[Reading languages]
Discovered 1 language: en

[Building search indexes]
Total:
  Indexed 1 language
  Indexed 7 pages
  Indexed 64 words
  Indexed 0 filters
  Indexed 1 sort

Finished in 0.037 seconds

[11ty] Copied 5 Wrote 14 files in 6.54 seconds (467.2ms each, v3.1.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

If you have a lot of pages, overtime it might be better to use the traditional build process so your Eleventy build does not crash.

Search