Documentation
Tools for Devs
Websites - Astro

Websites - Astro

Looking for creating cool and responsive web designs?

Astro can get you there very quickly.

New to SSGs and ASTRO in particular?

Get familiar with astro components:

Just SSG - Github ↗ Create a DIY website with Astro

Astro CLIs

ℹ️
See the 101 Astro Guide
git clone #theme
npm install
#npm run dev
npm run dev -- --host 0.0.0.0 --port 4321 #http://192.168.1.11:4321/
#npm run build
npx http-server dist --listen 0.0.0.0
#npm install -g http-server
#http-server dist
    • _index.md
      • _index.md
      • introduction.md
    • here you will find the astro components
  • package.json

    • Astro Themes

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

    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

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

    MIT | Very cool site with search and mdx

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

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

    1. 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.

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

    Dev Blogs

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

    1. 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

    What I like about Astro Template Directory Theme 📌
    • Search working in prod and also in Dev! Using lucide-react:
    npm install lucide-react
    1. https://github.com/NewDesignFile/template-directory

    Unlicensed | A directory theme for Astro.

    1. 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:

    1. 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

    Landing Pages with Cool VideoLanding Pages with Cool Video
    Not so performing, but impressive landing page
    Photo Galleries x Artist /ModellingPhoto Galleries x Artist /Modelling
    Not so performing, but impressive landing page

    CV Themes? Not a problem

    Links / Bento…also fine, see.

    Restaurants?

    Weddings

    I ,kind of’ have tinkered around website and services related to weddings.

    You can ese such themes:

    Applied for MotoVlog ↗

    Build sth for people close to you like this.

    And (maybe), scale it!

    Docs

    1. https://github.com/withastro/starlight

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

    Deploy Astro

    Select any of these website deployment methods

    NGINX on VPSNGINX on VPS
    Free Static hosting vs VPS hosting
    Cloudflare x GitlabCloudflare x Gitlab
    Deploying Astro with CI/CD

    The container artifacts for Astro are very simple:

    Astro SSG Static Hosting | Docker Config 🐋 ↗

    FAQ Astro

    Important Files for all Astro Webs 📌

    Look always for the <head> - It will guide you to a Base.astro, BaseLayout.astro, head.html…

    In there you can do interesting things, like adding web analytics.

    How to Install Dependencies 📌

    checking dependencies

    npm list @astrojs/starlight
npm install @astrojs/starlight
npm install @astrojs/starlight --legacy-peer-deps #if you have some dep issues
    Better SEO for Astro 📌
    • Seo Package for astro:
    import { AstroSeo } from '@astrolib/seo';

    as in the Minimal Studio Theme by michael-andreuzza

    WebSearch in Astro 📌

    As in the withastro/starlight Theme

    One of the most complete Astro themes ive seen - also supporting several languages

    Optimized images in Astro mdx Posts 📌

    You will need astrojs/mdx installed first and use it within .mdx files:

    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:

    Astro Data Fetching

    You can create a astro component: DockerCompose.astro

    Sample Astro component for data fetching 📌
    // DockerCompose.astro - Fetches and displays a docker-compose.yml file
// Usage: <DockerCompose url="URL_TO_RAW_GITHUB_CONTENT" />

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();
---

<div class="docker-compose-container">
  <div class="file-header">
    <div class="file-name">docker-compose.yml</div>
    <a href={url.replace('raw.githubusercontent.com', 'github.com').replace('/main/', '/blob/main/')} 
       target="_blank" class="view-on-github">
      View on GitHub
    </a>
  </div>
  <pre class="yaml-code"><code>{dockerComposeContent}</code></pre>
</div>

<style>
  .docker-compose-container {
    margin: 2rem 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f6f8fa;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }

  .file-name {
    font-weight: 600;
    color: #24292f;
  }

  .view-on-github {
    font-size: 0.85rem;
    color: #0969da;
    text-decoration: none;
  }

  .view-on-github:hover {
    text-decoration: underline;
  }

  .yaml-code {
    margin: 0;
    padding: 1rem;
    background-color: #f8f9fa;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #24292f;
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    .file-header {
      background-color: #161b22;
    }
    
    .file-name {
      color: #c9d1d9;
    }
    
    .view-on-github {
      color: #58a6ff;
    }
    
    .yaml-code {
      background-color: #0d1117;
      color: #c9d1d9;
    }
    
    .docker-compose-container {
      border-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>
    ServerlessWebsites - HUGO