Astro Nano is a portfolio and blog theme for Astro, created by Mark Horn as a lighter version of his Astro Sphere theme. It is built with Astro, Tailwind CSS, and TypeScript, ships no client-side framework, and includes light and dark themes, an RSS feed, a sitemap, and Markdown and MDX support.
How does the integration work?
Appwrite Sites includes Astro Nano in its template library. When you create a site from the template, Appwrite builds the theme from the appwrite/templates-for-sites repository and serves it as a static site on an Appwrite domain. If you connect a repository, every push to the production branch builds and deploys a new version.
Appwrite applies these build settings to the template:
| Setting | Value |
|---|---|
| Framework | Astro |
| Install command | npm install |
| Build command | npm run build |
| Output directory | ./dist |
| Rendering | Static |
The template builds on the node-22 runtime, which _APP_SITES_RUNTIMES enables by default. To create a repository from the template, configure version control for your instance first. Connect later deploys the template straight from its public GitHub source.
How to implement
To deploy Astro Nano with Appwrite Sites, there are several steps you must complete:
Step 1: Create a site from the template
For this step, you must create an account on Appwrite Cloud or self-host Appwrite if you haven't already. In your Appwrite project, go to Sites and click Create site. Search the templates for Astro Nano and select it.
Enter a Site name and a Site ID, then choose how to manage the code:
- Connect your repository creates a new repository from the template with your Git provider, such as GitHub, or connects one you already have, and redeploys on every push to the production branch. Choose this if you plan to change the content.
- Connect later deploys the template as it is. You can connect a repository afterwards from the site's Settings > Git repository.
Pick a subdomain under Domain and click Deploy. You can follow the build logs in the Console, and the site goes live on that domain when the build succeeds.
Step 2: Make the site yours
Clone the repository and edit the following files:
src/consts.ts: the site name, contact email, how many posts, jobs, and projects appear on the homepage, the title and description of each page, and your social links.src/content/blog/,src/content/projects/, andsrc/content/work/: one entry per folder or Markdown file. The sample blog posts explain each collection and the supported Markdown and MDX syntax.astro.config.mjs: setsiteto your site's URL so the sitemap and RSS feed point to the right domain.
Commit and push to the production branch. Appwrite builds the change and activates the new deployment.
Step 3: Add a custom domain
Open your site's Domains tab to serve the portfolio from your own domain. Follow Add a custom domain for the DNS records to create.
Read more about Astro Nano and Appwrite Sites
If you would like to learn more about Astro Nano and Appwrite Sites, we have some resources that you should visit:
