Pixelbook

Pixelbook is a starter static blog template minimally styled with PicoCSS. Equipped with out-of-the-box support for a Sitemap, RSS feed, dark/light modes, content collection configuration, Tailwind, content tags, and Iconify icons. Inspired by eatonphil.

See pixelbook.skeptrune.com for a live demo.

🔥 Features

• type-safe markdown
• super fast performance
• accessible
• responsive (mobile ~ desktops)
• SEO-friendly
• light & dark mode
• sitemap & rss feed
• followed best practices
• highly customizable
• dynamic OG image generation for blog posts
• draft posts
• pagination

🚀 Project Structure

Inside of Pixelbook, you'll see the following folders and files:

├── .github/
│   └── workflows/
│       └── deploy-pages.yml
├── public/
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── images/
│   ├── components/
│   │   └── BlogPostCard.astro
│   ├── content/
│   │   ├── blog-categories/
│   │   └── blog-posts/
│   ├── layouts/
│   │   └── Simple.astro
│   ├── pages/
│   │   ├── posts/
│   │   ├── 404.astro
│   │   ├── index.astro
│   │   └── rss.xml.js
│   ├── styles/
│   │   └── global.css
│   ├── content.config.ts
│   └── theme.config.ts
├── astro.config.mjs
├── CNAME
├── .gitignore
├── .nojekyll
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

Any static assets, like images, can be placed in the public/ directory.

All blog posts are stored in src/content/blog-posts. All content tags go in the src/content/blog-categories.

💻 Tech Stack

Main Framework - Astro
Type Checking - TypeScript
Styling - PicoCSS, TailwindCSS
Icons - Iconify via astro-icon
Code Formatting - Prettier
Deployment - Github Pages

🧞 Commands

All commands are run from the root of the project, from a terminal:

Note! For Docker commands we must have it installed in your machine.

Command	Action
yarn install	Installs dependencies
yarn dev	Starts local dev server at localhost:4321
yarn build	Build your production site to ./dist/
yarn preview	Preview your build locally, before deploying

✨ Feedback & Suggestions

If you have any suggestions/feedback, you can contact me via my email or on X @skeptrune. Alternatively, feel free to open an issue if you find bugs or want to request new features.

📜 License

Licensed under the MIT License, Copyright © 2025

---

Made with 🤍