Astro Websites

Astro CLIs

git clone #theme
npm install
npm run dev
#npm run build

npx http-server dist --listen 0.0.0.0
#npm install -g http-server
#http-server dist

Astro Themes

Find astro themes at: https://astro.build/themes/

• Astrothemes.club
• https://statichunt.com/ or https://github.com/statichunt

Photo Gallery Themes

1. https://github.com/obviyus/musee?ref=astrothemes.club

GPL3.0 | Fast, responsive , self-hosted image gallery. Ships minimal JS to the client.

#npm install
npm install astro-purgecss@latest

npm run dev
#npm run build

2. https://github.com/AREA44/astro-multiverse?ref=statichunt.com

One-page gallery design with a fully functional lightbox, designed by HTML5 UP

Blogs

1. https://github.com/saicaca/fuwari

2. https://github.com/godruoyi/gblog

MIT 🎈gblog, an open-source, simple and beautiful blog built with Astro

3. https://github.com/statichunt/geeky-astro

MIT | Very cool site with search and mdx

4. https://github.com/danielcgilibert/blog-template

GPL3.0 | 📚 Openblog is an elegant, simple, and user-friendly blog. Focused on accessibility, SEO and performance.

5. https://github.com/palmiak/pacamara-astro

MIT Pacamara is a simple blog theme for Astro that uses md and mdx files to store your content.

6. https://github.com/web3templates/stablo-astro

Dev Blogs

This one could also be used for CV thanks to its work section.

7. https://github.com/larry-xue/apple-style-portfolio

Unlicensed | This is a template with a highly minimalist style, greatly inspired by Apple’s design concept. It is built with Astro, TailwindCSS, GSAP, and Three.js.

App Directory

Looking for app directories or blog sections that you can filter interactively?

1. https://github.com/lukenguyen-me/astro-template-directory-website

Unlicensed | Astro template for a directory website in minimal theme, with reactjs + tailwind + shadcn

npm install lucide-react

2. https://github.com/NewDesignFile/template-directory

Unlicensed | A directory theme for Astro.

3. https://github.com/mickasmt/next-mobbin-clone

MIT | Replicate the design of mobbin.com to test the news components of shadcn-ui. #builtinpublic

This one has a blog which can be filtered per tags:

4. https://github.com/mickasmt/astro-nomy which I tinkered with on this post and related repo

MIT | Differents pages and examples apps built with Astro v4.5, shadcn/ui & react js. Open Source.

Services

Restaurants

1. https://github.com/moonbe77/fresh_bite

Unlicensed | Restaurant website template

2. https://github.com/unfolding-io/Astrorante?ref=astrothemes.club

• Very interesting video, as soon as you enter
• MultiLang (i18n)

AstroRante is a state-of-the-art website theme crafted for fine dining establishments. Combining the power of Astro, Storyblok CMS, Vue, and Tailwind, AstroRante delivers an unparalleled online presence for your restaurant.

Weddings

Modelling

1. https://github.com/iamnyasha/minimma

MIT | Interesting and simple site

CV Themes

If you are looking to impress with a new curriculum, why not doing it as a web?

1. https://github.com/KonradSzwarc/devscard

MIT | A fully customizable template to create your online (and paper) resume without writing a single line of code.

2. https://github.com/mmouzo/astro-cv-esquelete

MIT | A free, easy-to-use CV template with a clean design. Just fill in your details and you’re ready to go!

Links / Bento

1. https://github.com/DBozhinovski/astro-theme-ltree

An Astro theme that replicates Linktree and Linkinbio rolled in one. Optional TinaCMS on top.

Presentations with Astro

Product

1. https://github.com/midudev/landing-tesla?ref=statichunt.com

• With very interesting video sections!

Ejemplo de landing de Tesla con HTML, CSS, JavaScript, Astro y Tailwind

Docs

1. https://github.com/withastro/starlight?ref=statichunt.com

• Supports .mdx and i18n
• Search built in (with PageFind)
• When scrolling, you see in which section you are
• Blog section can be done with https://github.com/HiDeoo/starlight-blog

🌟 Build beautiful, accessible, high-performance documentation websites with Astro

Startup

1. https://github.com/matt765/Tailcast?ref=statichunt.com

MIT

Deploy Astro

NGINX on VPS

With Cloudflare

Cloudflare x Gitlab

Deploying Astro with CI/CD

FAQ Astro

npm list @astrojs/starlight
npm install @astrojs/starlight
npm install @astrojs/starlight --legacy-peer-deps #if you have some dep issues

import { AstroSeo } from '@astrolib/seo';

import { Image } from 'astro:assets'

import photopost1b from '/src/assets/img_folder/image.jpg';

<figure>
  <Image src={photopost1b} width={500} height={200} alt="Exploring Astro Images" />
  <figcaption class="caption">Say hi to Astro</figcaption>
</figure>

Math Mermaid and ChartJS for Astro

I discovered the following in a gh discussion: https://astro-digital-garden.stereobooster.com/recipes/math-support-in-markdown/ https://astro-digital-garden.stereobooster.com/recipes/mermaid-diagrams-in-markdown/

Astro Data Fetching

https://docs.astro.build/en/guides/data-fetching/

You can create a astro component: DockerCompose.astro

// DockerCompose.astro - Fetches and displays a docker-compose.yml file // Usage:

interface Props { url: string; }

const { url } = Astro.props;

// Fetch the docker-compose.yml content from GitHub const response = await fetch(url); const dockerComposeContent = await response.text();

{dockerComposeContent}