Astro Blog/Document Template

Astro Blog/Document Template is a full featured Astro corporate/marketing/blog starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.

Live Example

Note: The orginal template is from Hello Astro. I modified it so it can be used in an universal way. I appreciate the author of this repo and I hope you can give her a star :).

Lighthouse Score

Dark theme

Light theme

Uses the following integrations:

• @astrojs/mdx
• @astrojs/image
• @astrojs/sitemap
• @astrojs/rss
• @astrojs/tailwind
• @astrojs/alpinejs
• astro-icon
• astro-seo
• astro-robots-txt

In addition, SVG and PNG illustrations sourced from Undraw

Features

• 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
• SVG design (unDraw, Hero Patterns, Iconify)
• Support for code syntax highlighting
• 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
• Display math equations using KaTeX via remark-math/rehype-katex (enclosed in $...$ or $$...$$)
• Display Mermaid, Markmap, PlantUML diagrams (authored as a code block with language mermaid, markmap and plantuml)
• Display map at geo coordinates and zoom level using Map component (need to also include extra: ['map'] is frontmatter to load CSS/JS assets for 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
• Documentation pages (modelled after astro docs starter but using Tailwind)

External Packages

The start uses the following external packages:

• Astro
• TypeScript
• TailwindCSS and TailwindUI
• Iconify
• Hero Patterns
• unDraw for illustrations
• MDX and 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
• Math equations using KaTeX via remark-math and rehype-katex
• Diagrams using Mermaid, Markmap and PlantUML
• Open Street Map using Leaflet
• reading-time
• PhotoSwipe
• exifr
• Swiper

It follows the JAMstack architecture by automatically building a static version from the Git repository. The demo is deployed on Github Pages.

🚀 Project Structure

Inside this starter, you'll see the following folders and files:

/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── header.astro
│   ├── images/
│   │   └── image.png
│   ├── layouts/
│   │   └── base.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── blog/
│   │       └── 2022-08-01-post.md
│   ├── svg/
│   │   └── image.svg
│   └── 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/images/ or src/svg/ depending on type.

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

🧞 Commands

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

Command	Action
yarn	Installs dependencies
yarn dev	Starts local dev server at localhost:3000
yarn build	Build your production site to ./dist/
yarn preview	Preview your build locally, before deploying
yarn format	Pretty print the source code
yarn lint	Check the source code for errors
yarn astro ...	Run CLI commands like astro add, astro preview
yarn astro --help	Get help using the Astro CLI

🔥 How to run!

• Clone/download this repository
• Open terminal and cd to the repository folder
• run yarn
• run yarn dev to build the project locally