Get Astro Milidev
Clone the Astro Milidev repository.
git clone https://github.com/bartoszlenar/astro-milidev.git my-astro-milidevcd my-astro-milidevInstall dependencies:
npm iBuild the site:
npm run buildTo develop the site with live reload:
npm run devTo see the site in the production mode (remember to build the site with npm run build first after every update):
npm run previewCustomize 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",
}
};titleanddescription- 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,titletext 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.
typeandhref- 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 thetype.
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 protocolbase- 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.
Astro Milidev is a minimalistic portfolio+blog Astro theme.
It originates from Trevor Lee 's Astro Micro theme, which is based on Mark Horn 's Astro Nano (after "nano" and "micro" comes "mili", hence the first part of the name).
Astro Milidev enhances the above codebases with a variety of features. I customized the original theme for my personal website, and also refactored core parts of the code, making it more customizable and extensible.
The changelog is available in this post: Everything new in Astro Milidev . Another post Getting started explains the configuration process step by step. The code is MIT-licensed and available on GitHub .
Enjoy!
Contact me: