Simple blog theme based on Hello Astro but supports only Markdown and does not have the extra integrations. Uses UnoCSS instead of Tailwind.
Uses the following integrations:
- @astrojs/sitemap
- @astrojs/rss
- @astrojs/alpinejs
- astro-seo
- astro-robots-txt
- Full-featured blog with frontmatter (title, description, author, date, image, tags)
- High performance low overhead with minimal Javascript (AlpineJS)
- Full text client based search of blog pages via lunrjs (search index only loaded on first invocation of search on a page)
- Index page and individual pages for authors, categories and tags, including pagination
- Support for RSS feed, sitemap and robots.txt
- Full SEO support including Open Graph, Twitter Cards and Schema.org via JSON-LD
- Full support for Light and dark UI modes, as well as following system preferences, in accordance to TailwindCSS recommendation
- Customised 404 error page
- Calculates and show reading time for blog posts
- CSS/JS assets of external libraries loaded only when needed on a per page and per package basis - no unnecessary bloat
- Photo gallery and lightbox using PhotoSwipe (including display of EXIF tags)
- Carousel component using Swiper
The start uses the following external packages:
- Astro
- TypeScript
- Markdown
- Schema.org and JSON for Linking Data, type-checked using schema-dts
- Open Graph used by Facebook
- Twitter Cards
- AlpineJS
- Local full text search using Lunr
- reading-time
- PhotoSwipe
- exifr
- Swiper
- Remark Emoji
- UnoCSS
It follows the JAMstack architecture by automatically building a static version from the Git repository. The demo is deployed on Github Pages.
Inside this starter, you'll see the following folders and files:
/
โโโ public/
โ โโโ favicon.ico
โโโ src/
โ โโโ assets/
โ โ โโโ image.png
โ โ โโโ gallery/
โ โ โโโ gallery-name/
โ โ โโโ image.jpg
โ โโโ components/
โ โ โโโ header.astro
โ โโโ content/
โ โ โโโ blog/
โ โ | โโโ 2022-08-01-post.md
โ โ โโโ doc/
โ โ | โโโ documentation-page.md
| โ โโโ config.ts
โ โโโ layouts/
โ โ โโโ base.astro
โ โ โโโ blog.astro
โ โ โโโ doc.astro
โ โโโ pages/
โ โ โโโ index.astro
โ โ โโโ contact.astro
โ โโโ config.ts
โโโ package.json
Astro looks for .astro
, .md
or .mdx
files in the src/pages/
directory. Each page is exposed as a route based on its file name.
src/components/
is where we put any Astro components and similarly src/layouts/
for layouts.
Images can be placed in src/assets/
.
Blog and documentation content are created as collections of Markdown or MDX files in src/content
.
Any static assets, eg. images, can be placed in the public/
directory.
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:3000 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm lint |
Pretty print the source code |
pnpm check |
Check the source code for errors |
pnpm astro ... |
Run CLI commands like astro add , astro preview |
pnpm astro --help |
Get help using the Astro CLI |
- 1.0.0: Initial Release