Hello Astro is a full featured Astro multi-purpose starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.
Hello Astro can used for any/all of the following:
- corporate/marketing site
- blog
- documentation site
- portfolio site supporting photo galleries
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
This project initially started as a bare bones port of hello-gatsby-starter, but now contains more features (light/dark modes, category pages, search, diagrams, math and more!)
- 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
andplantuml
) - Display map at geo coordinates and zoom level using
Map
component (need to also includeextra: ['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)
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.
Inside this starter, you'll see the following folders and files:
/
├── public/
│ └── favicon.ico
├── src/
│ ├── components/
│ │ └── header.astro
│ ├── content/
│ │ ├── blog/
│ │ | └── 2022-08-01-post.md
│ │ └── doc/
│ │ └── documentation-page.md
│ ├── images/
│ │ ├── image.png
│ │ └── gallery/
│ │ └── gallery-name/
│ │ └── image.jpg
│ ├── 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/images/
.
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 |
---|---|
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 |
- 1.0.0: Initial Release
- 1.0.1: Moved social images to src, improved coverImage processing
- 1.0.2: Upgrade packages to latest
- 1.1.0: Update to astro v2.x, now works with node 18 and 19
- 2.0.0: New version supporting Astro collections! Also clarified that this is a multipurpose theme. Search can now include both Markdown and MDX pages!
- 2.0.1: Updated screenshots, and improved landing page.
- 2.1.0: updated to latest packages, fixed dev links, backported features from personal blog, including Next/Prev links, photo gallery support in Markdown, and improved pagination control.
- 2.2.0: Fixed lint errors, reimplemented map, lightbox and carousel to use leaflet, photoswipe and swiper packages instead of relying on external CDN.
- 2.2.1: Update to astro 2.0.10, fixed asset loading issue with base
- 2.3.0: Removed layout from blog and doc content
- 2.4.0:
@astrojs/images
now supportsvg
so no need for special handling - 2.4.1: Use rendered frontmatter for blog and doc posts, fixes issue with diagrams not rendering.
- 2.4.2: Updated packages