Configuration

Configuration

All site settings live in a single file: src/_data/site.js. Change the values in this file to make the site yours.

Full Reference

module.exports = {
  // Book details
  title: "The Art of Baking",                                   // Short title (header & browser tab)
  longTitle: "The Ultimate Guide to Becoming a Baking Master",  // Full title (homepage hero)
  author: "Chef Baker",
  description: "A comprehensive journey from novice to expert.",
  url: "https://example.com",                                    // Your site URL (no trailing slash)
  coverImage: "/assets/cover.png",                              // Cover image — remove to hide

  // Appearance
  theme: "emerald",        // See Theme and Colors page for all options

  // Fonts — any Google Fonts family name
  fonts: {
    heading: "Inter",      // Headings, nav, buttons
    body: "Inter",         // Body/prose text
  },

  // Format generation
  formats: {
    pdf: true,
    epub: true,
  },

  // Footer branding
  showBranding: true,      // Show "Built with PutOut" in footer

  // Social links
  socialLinks: [
    { platform: "twitter", url: "https://twitter.com/yourusername" },
    { platform: "github", url: "https://github.com/yourusername" },
    // { platform: "linkedin", url: "https://linkedin.com/in/yourusername" },
    // { platform: "website", url: "https://yourwebsite.com/" },
  ],
};

Key Settings

title / longTitle

• title appears in the header, browser tab, and meta tags.
• longTitle is shown on the homepage hero section. If omitted, title is used.

url

This is the most important setting for SEO and social sharing. Set it to your actual domain (e.g. https://mybook.com) before deploying. It affects:

• Your XML sitemap URLs
• Canonical URLs on every page
• Social sharing previews (Open Graph / Twitter Cards)
• Structured data (JSON-LD)

Without the correct URL, search engines won't index your site properly and shared links won't show proper previews. See SEO and Structured Data for details.

theme

Selects the accent/brand color for the entire site. See Theme and Colors for all 8 options and previews.

fonts

Set heading and body to any Google Fonts family name. Use the exact name as shown on Google Fonts — multi-word names like "Playfair Display" work fine.

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

Popular pairings:

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

coverImage

Path to the cover image shown on the homepage. This image also appears:

• In social sharing previews when someone shares a link to your site on Twitter, Facebook, or LinkedIn
• As the cover of the generated EPUB file

Remove or comment out this line to hide the cover image entirely — the homepage hero section adjusts automatically.

formats

Toggle PDF and/or EPUB generation. Set to false to skip either format during npm run build. See PDF and EPUB for details and requirements.

socialLinks

Array of { platform, url } objects. Icons appear on the homepage and in the footer. Supported platforms:

Platform	Icon
twitter	Twitter/X icon
github	GitHub icon
linkedin	LinkedIn icon
website (or anything else)	Globe icon

Uncomment or add lines as needed:

socialLinks: [
  { platform: "twitter", url: "https://twitter.com/yourusername" },
  { platform: "github", url: "https://github.com/yourusername" },
  { platform: "linkedin", url: "https://linkedin.com/in/yourusername" },
  { platform: "website", url: "https://yourwebsite.com/" },
],

showBranding

When true, displays "Built with PutOut" in the footer. Set to false to remove it.

Favicon

Replace the file at src/assets/favicon.png with your own square PNG image (ideally 180×180 pixels). No configuration change needed — just swap the file. See Customization for more details.