search

hellotham / hello-astro

Hello Astro is a multi purpose Astro starter theme written in Typescript, TailwindCSS and AlpineJS. It supports Markdown and MDX based pages and blog posts.
https://hellotham.github.io/hello-astro
MIT License
158 stars 55 forks source link
alpinejs astro blog dark-mode katex leafletjs lunrjs markdown markmap mdx mermaidjs open-street-map photoswipe plantuml starter static-site tailwindcss typescript

readme

hello-astro

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.

Light

Dark

Lighthouse

Hello Astro can used for any/all of the following:

Uses the following integrations:

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!)

Features

External Packages

The start uses the following external packages:

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/
│   ├── 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.

🧞 Commands

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

Release History