This is the source code for my personal website, snorre.io. It is built using Astro, a modern static site generator built on top of Vite. The source code is free and open source. Feel free to poke around and use it as inspiration for your own website.
To get started, clone this repo, install dependencies and run dev server:
git clone [email protected]:snorremd/snorreio.git
cd snorreio
bun install
bun run devThis project was bootstrapped from the Astro blog template with my own modifications and changes added.
It mostly still follows the same structure as the blog template:
├── public/
├── src/
│ ├── components/
│ ├── layouts/
│ └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json
Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.
There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the public/ directory.
Essentially I have a few main pages:
index.astro- The landing page with some info about my siteblog.astro- The blog page with a list of all blog postsblog/[slug].mdx- A blog post template for each blog postabout.mdx- Some backstory about meprivacy.mdx- Privacy policy detailing what data I collect (not much)projects.astro- List of projects I have worked on
I use Tailwind CSS for styling, which is a utility-first CSS framework.
I have a few components that I use throughout the site. The components folder also includes my Solid.js comment system and likes functionality.
/api/likes- Handles user likes for blog posts and other content
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
bun install |
Installs dependencies |
bun run dev |
Starts local dev server at localhost:3000 |
bun run build |
Build your production site to ./dist/ |
bun run build:watch |
Build your site and watch for changes |
bun run preview |
Preview your build locally, before deploying |
bun run astro ... |
Run CLI commands like astro add, astro check |
bun run astro --help |
Get help using the Astro CLI |
| Command | Action |
|---|---|
bun run format |
Format code with Biome |
bun run lint |
Lint code with Oxlint |
bun run check |
Type check with Astro |
bun run wrangler:dev |
Start Wrangler development server |
bun run wrangler:preview |
Preview with Wrangler Pages |
| Command | Action |
|---|---|
bun run db:migrate:local |
Apply migrations to local database |
bun run db:migrate:prod |
Apply migrations to production database |
bun run db:codegen |
Generate TypeScript types from database schema |
I host my site on Cloudflare Pages.
It has a generous free tier and is very easy to set up.
For my use case I just use the Cloudflare Git integration to automatically build and deploy my site on every push to the main branch.
This project uses Cloudflare D1 as a serverless SQLite database for storing user likes and other dynamic data. The database is configured in wrangler.toml and uses Kysely as the ORM.
The project includes database migration scripts:
bun run db:migrate:local- Apply migrations to local development databasebun run db:migrate:prod- Apply migrations to production databasebun run db:migrate:preview- Apply migrations to preview environmentbun run db:codegen- Generate TypeScript types from database schemabun run db:delete:local- Delete local development database
The source code is licensed under the MIT License. You are free to use it for your own website, but please provide attribution where you make direct use of my code.
The content, unless otherwise stated, is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Feel free to publish copies or derived work, but you must provide attribution and link back to my site and you must share any derivative work under the same license. Commercial use of my content is not allowed.