File Structure

The source code of PutPut is managed in the file tree shown below in the image. To make changes on your e-book website, you'll have to get a bit comfortable with it.

To explain specific parts of code, we have added comments. These comments start with //. The text that comes after // is the comment and the text that comes before it is the actual code. So, whenever you see //, know that it's a comment to help you explain the code. Watch out for them.

To make things even more easier, we have added some 🎈 icons in the code. Wherever you the 🎈 icon, it means you'd need to modify those code lines before publishing.

putout
├── tailwind.config.js          // Tailwind CSS config
├── netlify.toml                // Netlify config file
├── .eleventy.js                // 11ty configuration
├── src/                        // Source files for ebook/site
│   ├── index.njk               // Homepage design
│   ├── _includes/              // Different layout files
│   │   ├── base.njk            // Base layout file
│   │   ├── tracking.njk        // Tracking code file
│   │   ├── ...
│   ├── chapters/               // Your eBook chapters 🎈
│   │   ├── chapters.json       // Default chapter tags & info
│   │   ├── 01-chapter-one.md   // Chapter file in markdown 🎈
│   │   ├── 02-chapter-two.md   // Chapter file in markdown 🎈
│   ├── styles/
│   │   ├── tailwind.css        // Tailwind CSS styling
│   ├── _data/                  // Sitewide data folder
│   │   ├── themes.js           // Different theme options
│   │   ├── site.js             // Your website data 🎈
│   ├── assets/                 // Images and other files 🎈
│   │   ├── ...

Modify Files/Folders

Instructions on files and folders that you'll have to generally modify before publishing your ebook site:

1. site.js File

The site.js file contains your important website data. From here, you can add your book title, description, author name, social links, etc. that are shown sitewide.

module.exports = {
  // Main site details
  title: "The Art of Baking",  // Short title of the book
  longTitle: "The Ultimate Guide to Becoming a Baking Master",  // Long title of the book (if not, keep the same as "title")
  author: "Chef Baker",  // Author's name
  description: "A comprehensive journey from novice to baking expert.", // Brief description of the book
  url: "https://putout.org",  // The exact domain or subdomain where you'll be hosting
  coverImage: "/assets/cover.png",  // Address for the cover image

  // Theme selection
  theme: "default", // Options: "default", "glass", "dark"

  // Social media links (optional)
  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://putout.org/" }
  ]
};

Below are the details about each element of the file:

  • title: Put your short ebook title. It's shown in the top header and in the meta titles.
  • longTitle: If the ebook also has a longer title, put it here. Otherwise, just put the title.
  • author: Put the name of the book author.
  • description: Provide one paragraph of book description that is shown on the homepage and as meta description.
  • url: Put the exact URL (domain or subdomain) where you will be hosting the ebook site. Do not put / at the end of the URL.
  • coverImage: First, put your ebook cover image in the assets folder and then provide the exact image filename here. Replace spaces in the filename with dashes - or underscores _.
  • theme: You can choose from the available themes as well – default (light), dark, glass, etc. Just write the exact option as the theme value and the entire site will change.
  • socialLinks: You can also add your social links on the homepage. Just add/remove the comments // from infront of the social platform and add your link.

You will also learn more about these things in the video tutorial on this page.

2. chapters Folder

The chapters folder contains all your ebook chapters in the markdown format – you can learn more about markdown on this page.

For example:

An example chapter file will look something like below – first, you have the frontmatter, and then, the content for the chapter:

---
title: "Your eBook Chapter"
description: "The chapter description in a paragraph."
customSlug: "your-ebook-chapter"
---
The entire **ebook content** goes here.

You can use markdown formatting as well.

The frontmatter here contains basic information about the chapter. It's written between two triple-dashes --- as shown above.

Having title and description is required, but permalink and others are completely optional here. You will learn more about frontmatter here.

3. assets Folder

The assets folder contains images and other static files you need. You can put ebook cover image and other image files in the folder and reference to them in your markdown files.

For example, if you copy an image named image-one.png in the assets folder then you can use ![image alt-text](/assets/image-one.png) to show the image somewhere in your markdown files.