3 min read

Getting started

Table of Contents

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,
};
FieldReqDescription
TITLEYesDisplayed in header and footer. Used in SEO and RSS.
DESCRIPTIONYesUsed in SEO and RSS.
EMAILYesDisplayed in contact section.
NUM_POSTSYesLimit number of posts on home page.
NUM_PROJECTSYesLimit number of projects on home page.

Customize metadata for individual pages

// src/consts.ts

export const ABOUT: Metadata = {
  TITLE: "About",
  DESCRIPTION: "Astro Micro is a fork of Astro Nano.",
};
FieldReqDescription
TITLEYesDisplayed in browser tab. Used in SEO and RSS.
DESCRIPTIONYesUsed in SEO and RSS.

// 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",
  },
];
FieldReqDescription
NAMEYesDisplayed in contact section as a link.
HREFYesExternal url to social media profile.

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

Follow the steps at giscus.app. Once you get your custom Giscus script from that site, go to Giscus.astro and replace that script with your own.

// src/components/Giscus.astro

<script
  is:inline
  src="https://giscus.app/client.js"
  data-repo="trevortylerlee/astro-micro"
  data-repo-id="R_kgDOL_6l9Q"
  data-category="Announcements"
  data-category-id="DIC_kwDOL_6l9c4Cfk55"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="top"
  data-theme="preferred_color_scheme"
  data-lang="en"
  data-loading="lazy"
  crossorigin="anonymous"
  async></script>

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