Getting started

Install astro-micro

Clone the Astro Micro repository.

git clone https://github.com/trevortylerlee/astro-micro.git my-astro-micro

cd my-astro-micro

npm i

npm run build

npm run dev

Customize the website metadata

To change the website metadata, edit src/consts.ts.

// src/consts.ts

export const SITE: Site = {
  NAME: "Astro Micro",
  DESCRIPTION: "Astro Micro is an accessible theme for Astro.",
  EMAIL: "trevortylerlee@gmail.com",
  NUM_POSTS_ON_HOMEPAGE: 3,
  NUM_PROJECTS_ON_HOMEPAGE: 3,
};

Customize metadata for individual pages

// src/consts.ts

export const ABOUT: Metadata = {
  TITLE: "About",
  DESCRIPTION: "Astro Micro is a fork of Astro Nano.",
};

Add your social media links

// src/consts.ts

export const SOCIALS: Socials = [
  {
    NAME: "twitter-x",
    HREF: "https://twitter.com/boogerbuttcheeks",
  },
  {
    NAME: "github",
    HREF: "https://github.com/trevortylerlee",
  },
  {
    NAME: "linkedin",
    HREF: "https://www.linkedin.com/in/trevortylerlee",
  },
];

Deploy the site

To set up RSS and Giscus, it’s easier if the site is deployed and has a URL for you to use. Instantly deploy to Vercel or Netlify by clicking the buttons below.

To deploy manually see Astro’s docs.

Set up RSS

Change the site option to the deployed site’s URL.

// astro.config.mjs

export default defineConfig({
  site: "https://astro-micro.vercel.app",
  integrations: [tailwind(), sitemap(), mdx(), pagefind()],
  markdown: {
    shikiConfig: {
      theme: "css-variables",
    },
  },
});

Set up Giscus

Comments are disabled until you add your Giscus configuration.

1. Follow the steps at giscus.app.
2. Copy .env.example to .env.
3. Add the four values from the script that Giscus generates:

# .env
PUBLIC_GISCUS_REPO="your-github-name/your-repository"
PUBLIC_GISCUS_REPO_ID="your-repository-id"
PUBLIC_GISCUS_CATEGORY="Announcements"
PUBLIC_GISCUS_CATEGORY_ID="your-category-id"

Add the same environment variables to your deployment service.

To stop other websites from using your Giscus configuration, add a giscus.json file to the root of your repository. Replace the example URL with your deployed site URL:

{
  "origins": ["https://your-site.example.com"]
}

To change the Giscus themes used, edit the setGiscusTheme function in Head.astro.

// src/components/Head.astro

const setGiscusTheme = () => {
  const giscus = document.querySelector(".giscus-frame");

  const isDark = document.documentElement.classList.contains("dark");

  if (giscus) {
    const url = new URL(giscus.src);
    // Change "dark" and "light" to other Giscus themes
    url.searchParams.set("theme", isDark ? "dark" : "light");
    giscus.src = url.toString();
  }
};