SEP 23 2026

Updating The Site Data

Your Site's Package

As an 11ty static site, your blog is powered by Node. That means it is is a node package, and as such, has its own package.json file in the root directory. Right now, that file is equipped with The Bellwether's data.

Your package.json data is accessible in the pkg variable. That means, for example, that pkg.description will populate the "description" field.

I recommend updating this file as the first thing you do to signal that this blog is officially "yours" now, and not The Bellwether.

Site Metadata

The next step is to update the _data/series.yaml file. This is a rather straightforward process. Currently, this file is housing some placeholder data.

You can add properties to this file as needed. The purpose of this file is to store variables that will be used at the site's base or in the site's metadata.

Style and Appearance

Color Scheme

The Bellwether is a two-tone template, meant for two colors with sufficient contrast.

If you open styles.css in the root directory, find the selectors where the variables are defined.

/* styles.css */
:root {
  --light-color: #fbdcf1;
  --dark-color: #2a051d;

When I wrote the stylesheet, I intended for the light color to be the typical background and the dark color to be the typical foreground. However, if you prefer dark mode you can reverse this, and put a darker color code in the variable --light-color and a lighter color code in the variable --dark-color.

A few different color palette tools to explore different options:

Coolors

Discover millions of popular color palettes, or generate your own.

ColorKit

A free and fast color palette generator.

Paletton

A full featured color wheel tool allowing users to create palettes of various styles.

Picular

Generate the color of a single word.

Fonts

Three fonts have been imported from Google Fonts via an @import url() statement at the top of styles.css. Their variables round out the :root selector:

/* styles.css */
  --head-font: "Francois One", sans-serif;
  --text-font: "Sofia Sans", monospace;
  --code-font: "Inconsolata", monospace;
}

If you are unfamiliar with how to use your own fonts, here's a handy guide from DigitalOcean which will take you through several techniques.

Google Fonts is certainly among the easiest and most well-known resources out there for typefaces, offering 1,950 different families, but it is hardly the only one or the most expansive.

Fontjoy

A font pairing generator that allows you to generate sets of three fonts at a time.

Monotype.

A font pairing generator.

Variable Fonts

Resource for finding and trying out variable fonts.

Fontspace

170,000+ free fonts.

Modern Font Stacks

The fastest fonts available in every style.

The Site Logo

The "logo" that shows up on the top left corner of all posts (not pages) and links pack to the home page is actually an icon from Font Awesome. You probably want to replace this with something that goes with your site.

Replacing the Logo with Another Font Awesome Icon

The easiest way to change the logo is just to change it to another free Font Awesome icon. You can also find

Open _includes/logo.njk. This file has just one line of code. On the Font Awesome kit I linked, find any icon you like. There will be options for styling. Make sure to set the color with whatever your --dark-color variable is in your styles.css file. Then it should give you the HTML code. You can just replace the current contents of _includes/logo.njk with that code and you're set!

Using a Material Design or SVG icon

Another similar option is to go with Google Font's Material Design icons.

Once you clicked on the icon you wanted, I'd change the size to somewhere between 40 and 50. Set the color to the color you have stored in your --dark-color variable in styles.css. Then you can click the copy button, and it will copy the SVG code. Paste than in place of the HTML in _includes/logo.njk.

The logic is the same for any SVG icon. Instead of downloading the icon itself, you can just grab the SVG code and put it in the _includes/logo.njk file, but make sure you have the color correct. Most SVG icon sites will allow you to set your own color.

Here are some of my favorite sources for SVGs and icons:

• Icones
• SVGOwl
• The Noun Project -- except for public domain icons, attribution is required for black icons only. Otherwise, you can purchase an attribution-free license.
• Iconify -- make sure to carefully read license to determine if attribution is required.

Creating Your Own SVG Icon

I would recommend keeping your icon no larger than 50 x 50 pixels.

Rather than use an icon that's already available, you may prefer to create one yourself. There are a few free/freemium programs that allow you to do that.

Uploading a Picture as a Logo Instead

Instead of copying and pasting a block of SVG code, you can save an image file to your assets directory in your source files. It doesn't have to be an .svg image; it can be an .svg, .png, or .jpg, or any other valid image type. Personally, I like PNGs and SVGs because they allow for transparent backgrounds.

Let's say we have a file we want to save as my-logo.png. Since this isn't going to be attached to a specific post or page, we're going to place it in the assets/base/ folder.

Then, in _includes/logo.njk, we'll write:

<img src="/assets/base/my-logo.png" alt="my super awesome logo" />

The Front Page Picture

You should also change the picture currently on the home page. The image is currently sitting in /assets/base/bw-title-image.jpg.

The picture you choose should be square (preferrably 400px x 400px). Once you have it loaded, you'll need to update _layouts/page.njk. Specifically, find this line of code:

<img src=/assets/base/bw-title-image.jpg alt="photograph of woman holding bouquet of picked wildflowers" id="title-image" />

Take these steps:

1. Update the filename.
2. Update the alt attribute to something that fits.
3. Add a width attribute (it should be width=400).
4. Add a height attribute (it should be height=auto).

Steps 3 and 4 are unnecessary if the picture is 400 x 400 pixels.

Creating Posts and Pages

Once you are ready to fill your site with your own content, feel free to delete all of mine. Don't worry, you'll still have access to all of these docs online.

Pages and Posts are the two primary custom collections which power The Bellwether.

• Pages represent the static content of your site -- the stuff that has relevance regardless of age.
• Posts are the feeds of content that gets put out on a regular basis: the stuff that ages.

Adding a New Post

To create a new post, just add a new file in the posts/ folder in the root directory. Posts can have an .html, .md, or .njk extension, but I recommend .md to allow the markdown format. All three extensions will recognize the nunjucks templating language thanks to the configuration.

Required frontmatter

The front matter is written in YAML and is the very first thing in the file.

Adding a New Page

Any file created in the root directory with an .md, .njk, or .html extension is considered a page.

Frontmatter for Pages

Pages have different frontmatter requirements from Posts, but it's still important.