Getting started

Get Astro Milidev

Clone the Astro Milidev repository.

git clone https://github.com/bartoszlenar/astro-milidev.git my-astro-milidev

cd my-astro-milidev

Install dependencies:

npm i

Build the site:

npm run build

To develop the site with live reload:

npm run dev

To see the site in the production mode (remember to build the site with npm run build first after every update):

npm run preview

Customize the website metadata

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

Please check the type definitions to see which values are required.

Image paths

All image paths are relative to the public directory.

It’s essential that you start the path with /. Otherwise, you might encounter issues, especially when hosting your site with base path set in the astro.config.mjs file.

Global metadata

Start with GLOBAL variable:

// src/consts.ts

export const GLOBAL: GlobalSite = {
  title: "Astro Milidev",
  description: "a minimalistic blog+portfolio Astro theme",
  author: "John Doe",
  authorPhotoSrc: "/johndoe.png",
  logo: {
    darkThemeSrc: "/logo/logo_dark.png",
    lightThemeSrc: "/logo/logo_light.png",
  }
};

• title and description - part of the metadata (head, title, etc.) and RSS.
• author - part of the metadata, footer and home site.
• authorPhotoSrc - rendered on the home site and the bio under the blog posts.
• logo - optional, but if present, you must provide light and dark versions. Rendered in the header. If not present, title text will be rendered instead.

Home site

// src/consts.ts

export const HOME: HomeSite = {
  blogEntries: 5,
  projectEntries: 3,
  talkEntries: 3,
};

• blogEntries, projectEntries, talkEntries - how many entries from the particular collections are displayed on the home site.

Collections site

By default, there are three collections in Astro Milidev: blog, projects, and talks.

export const BLOG: BlogSite = {
  pageSize: 10,
  license: {
    name: "CC BY-NC-ND 4.0",
    href: "https://creativecommons.org/licenses/by-nc-nd/4.0",
  },
};

export const PROJECTS: CollectionSite = {
  pageSize: 10,
};

export const TALKS: CollectionSite = {
  pageSize: 10,
};

• pageSize - how many entries are displayed on the single page on the collection site.
• license - license information, added to all blog post sites.

There is also a special collection for tags that is fully autogenerated based on all others. You can set its name and pageSize in the same file:

export const TAGS: CollectionSite = {
  pageSize: 10,
};

Add your contact details

// src/consts.ts

export const CONTACT: ContactSite = [
  {
    type: "Email",
    href: "mailto:email@example.com",
    displayAs: "email@example.com",
  },
  {
    type: "X",
    href: "https://x.com/BillGates",
    displayAs: "@BillGates on X",
  },
  {
    type: "GitHub",
    href: "https://github.com/dotnet",
  },
  {
    type: "LinkedIn",
    href: "https://www.linkedin.com/in/williamhgates/",
  },
];

All above are displayed below the bio.

• type and href - the type of the contact (will be rendered as the link) and the URL that the link navigates to.
• displayAs - optional, but if present - rendered instead of the type.

Set up the address

Navigate to the astro.config.mjs file and set the site and base properties.

• site - the URL of your site, starting with protocol
• base - the base path of your site, if it’s hosted in a subdirectory. It should start and end with a slash.

// astro.config.mjs

export default defineConfig({
  site: "https://bartoszlenar.github.io",
  base: "/astro-milidev/",
  integrations: [tailwind(), sitemap(), mdx(), pagefind()],
  markdown: {
    shikiConfig: {
      theme: "css-variables",
    },
  },
});

Deploy the site

Astro Milidev already contains a github workflow that will deploy the page to Github Pages: .github/workflows/deploy.yml. The workflow is taken from the (official guide)[https://docs.astro.build/en/guides/deploy/github/].

For manual deployment instructions and other deployment options, see Astro’s docs.

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
  src="https://giscus.app/client.js"
  data-repo="bartoszlenar/astro-milidev"
  data-repo-id="R_kgDONiccDA"
  data-category="Announcements"
  data-category-id="DIC_kwDONiccDM4Cl5CN"
  data-mapping="pathname"
  data-strict="1"
  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.

RSS feed

RSS is generated automatically. The feed is available at /feed.xml and configured in src/pages/feed.xml.js.

Create your content

Collections

The collections are stored in the src/content directory and each collection has its own subdirectory. At the beginning there are bunch of example entries (e.g. this very file) that you can safely delete, so blog, projects and talks directories are empty.

More: Collections guide

Pages

Pages are in src/pages directory. By default Astro Milidev contains resume and contact.

Content

Astro Milidev uses markdown syntax (with MDX support) for the content.

More: Content and syntax guide

Extending Astro Milidev

Astro Milidev is based on Astro Micro and Astro Nano.

The changes are described in this post: Everything new in Astro Milidev.

Hi, I'm Timothy Blasingame

Welcome to my portfolio + blog! 👋

I'm currently a System & Database Administrator, but the tech junkie in me just can't stop tinkering. Follow along my journey as I explore the world of self-hosting and homelabs, as well as full-stack web development.

Contact:

clay@blasinga.me | GitHub | LinkedIn