Features:
- Minimal styling
- Tailwind integrated
- Sitemap support
- Robots.txt support
- RSS Feed support
- Markdown support
- Webmanifest for PWA support
- Compress support
- Icons support
- Tags for posts
- 404 page integrated
- TypeScript support
- Dark mode support
Used astro integrations:
Inside this project you can find the following folder and file structure
├── public/
├── src/
│ ├── components/
│ ├── layouts/
│ └── pages/
│ └── styles/
│ └── types/
│ └── utils/
├── astro.config.mjs
├── README.md
├── package.json
├── tailwind.config.cjs
└── tsconfig.json
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 commands need to be run from the root of the project. The project is setup with yarn. You can as well set it up using npm.
# install dependencies
$ yarn
# start local dev server
$ yarn dev
# build production site
$ yarn build
# preview build locally
$ yarn previewFor adding new tags to posts you need to add the new tag in the array to the post located in src/pages/blog. For example tags: ["general", "tech", "nature", "new-tag"].
After adding this new tag you need to add this tag into the [tag].astro file that the dynamic route is created and when building the site. Here you need to add the new tag as a param in the getStaticPaths method.
export function getStaticPaths() {
return [
{ params: { tag: "general" } },
{ params: { tag: "tech" } },
{ params: { tag: "food" } },
{ params: { tag: "nature" } },
{ params: { tag: "astro" } },
// added this new-tag
{ params: { tag: "new-tag" } },
];
}The tags will be read out of all posts dynamically using the findTags method in src/utils/post.utils.
This theme is developed based on the Astro blog theme.