Skip to content

Customization

Jump to bottom
deepakness edited this page Feb 8, 2026 · 1 revision

Customization

This page covers the things you can change about your site beyond the basic Configuration options.

Fonts

You can use any font from Google Fonts for your headings and body text. Edit src/_data/site.js:

fonts: {
  heading: "Playfair Display",   // Used for headings, navigation, buttons
  body: "Lora",                  // Used for chapter text and body content
},

Browse Google Fonts and use the exact font name as shown there. Multi-word names like "Playfair Display" work fine.

Restart the dev server after changing fonts (Ctrl+C, then npm run start).

Font Pairing Suggestions

Heading Body Feel
Playfair Display Lora Classic, editorial
Inter Inter Clean, modern
Merriweather Source Sans 3 Traditional, readable
Raleway Nunito Friendly, approachable

Cover Image

Your cover image appears on the homepage hero section and is used as the social sharing preview when someone shares a link to your site.

To change it, replace the file referenced in site.js:

coverImage: "/assets/cover.png",

Place your image in src/assets/ and update the path. If you remove the coverImage line entirely, the homepage hero section adjusts — it simply won't show an image.

Recommended: Use a high-quality image at least 1200×630 pixels for good social media previews.

Favicon

Replace the file at src/assets/favicon.png with your own. It should be a square PNG image (at least 32×32 pixels, ideally 180×180 for best results across devices).

Adding Analytics

PutOut includes an empty file at src/_includes/tracking.njk ready for your analytics code. Open it and paste your tracking snippet — it gets included on every page.

Google Analytics (GA4) Example

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Replace G-XXXXXXXXXX with your actual Measurement ID from Google Analytics.

Plausible Analytics Example

<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Customizing the 404 Page

When someone visits a URL that doesn't exist, they see a friendly error page with:

  • A "404" heading
  • A "Go Home" button
  • A "Start Reading" button linking to the first chapter
  • A list of all your chapters for easy browsing

You can edit this page at src/404.njk if you want to change the wording or layout.

Images in Your Book

Place images in src/assets/ and reference them in your Markdown chapters:

![Description of the image](/assets/my-image.png)

The image will appear inline in your chapter content on the website.

Note: Images in the generated PDF and EPUB formats have limitations. Complex or very large images may not render the same way as on the website. Test your generated formats if your book relies heavily on images. See PDF and EPUB for more details.

Printing

Readers can print any chapter page from their browser. When they do, PutOut automatically hides the sidebar, header, footer, progress bar, and navigation buttons — only the chapter title and content are printed.

No configuration is needed. This works in all modern browsers.

Related

PutOut Wiki

Clone this wiki locally