commonplace

Built with 11ty (Eleventy).

A cozy and stylish digital bookshelf for tracking, reviewing, and showcasing all your reads.

---

🧑‍💻 Author

Created with love (and a bit of anxiety) by hellogaray.
Feel free to use it for personal purposes, contribute improvements, or ask questions via the GitHub repository.

---

✨ Features

• Minimal and responsive layout
• Dynamic quote sections per book
• Custom thumbnail for each book stat
• Markdown-driven content generation
• Modular component design (header, footer, thumbnails)
• CMS support with Netlify Identity / Decap CMS
• Easily update with from GitHub
• Ready for Netlify deployment

---

🔧 Tech Stack

• Site Generator: 11ty
• Frontend: HTML and JavaScript
• Animations: CSS and GSAP
• Nunjucks templating
• Markdown for content
• Local assets (covers, CSS)

---

💻 Coding Resources

• W3Schools
• freeCodeCamp - Responsive Web Design
• MDN Web Docs
• 11ty for Beginners - Kevin Powell

---

🚀 Installation & Deployment Guide

I recommend using 11ty for Beginners - Kevin Powell to get everything set up. Is easy to follow and if this is your first time using 11ty it will give you a basic undertanding on how to create your own site, which in turn will make using and customizing this kit easier for you.

Prerequisites

• Node.js (v18+ recommended)
• npm (comes with Node)

1. Clone the Repository

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO

2. Install Dependencies

npm install

3. Run the Development Server

npm run start

Or:

npx @11ty/eleventy --serve

Visit: http://localhost:8080/

4. Build the Site

npm run build

Output is generated in:

_site/

5. Push to GitHub

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

6. Deploy to Netlify

One-Click Deployment

Go to Netlify Start → Choose GitHub → Select repo → Deploy

Manual Setup

• Build command: npm run build
• Publish directory: _site

Netlify builds and publishes your site automatically.

✏️ 7. CMS (Decap / Netlify CMS)

If you include /admin/:

1. Enable Netlify Identity in your site settings
2. Enable Git Gateway
3. Add yourself as an Identity user

Access the CMS:

https://YOUR_SITE.netlify.app/admin/

You can now:

• Add or edit books
• Upload cover images
• Manage metadata
• Edit quotes

Changes commit directly to GitHub.

📁 8. Project Structure

.
├── src/
│   ├── _data/               # Title, Description and User
│   ├── admin/               # CMS config
│   ├── books/               # Markdown book files
│   ├── _includes/           # Components (header, footer, thumbnails)
│   ├── css/                 # Styles
│   ├── index.njk            # Homepage
│   ├── rating/              # Rating pages
│   └── ...
├── .eleventy.js             # Eleventy config
├── package.json
├── netlify.toml             # Netlify settings (optional)
└── README.md

🔧 9. Updating Dependencies

npm update

Or update Eleventy directly:

npm install @11ty/eleventy@latest

🧼 10. Clearing Eleventy Cache

npx @11ty/eleventy --clean

🖼️ Screenshots

Book Page

Night Mode

🎉 Done!

Your Book Highlights & Insights bookshelf is now:

✔ Installed locally ✔ Connected to GitHub ✔ Automatically deployed to Netlify ✔ Editable through the CMS