pixelbook Tailwind Templates

Pixelbook

AstroJS static blog template minimally styled with PicoCSS. Features include Sitemap, RSS feed, dark/light modes, content collection configuration, Tailwind, content tags, and Iconify icons.

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 šŸ¤

Top categories

Loading Svelte Themes