This is my personal template for an Astro project.
It uses the following stack:
It also has some opiniated optimizations for UX/DX that you might miss in other templates:
- Prefetches all links and uses View Transitions by default for seamless navigation
- Autosorts HTML's
<head>tags for better performance and SEO - Optimizes Docker image output size for production
To get started, click the "Use this template" button above, or run the following command:
pnpx degit github:angeloanan/personal-astro-template my-astro-projectThen, install the dependencies:
cd my-astro-project
pnpm installMust do:
- Double check for any missing
getStaticPaths()on pages with dynamic params. - Whitelabel package.json with your project information (enable
private: trueif needed) - Lock dependencies version to major version
- Replace
outputat astro.config.mjs with desired output target.serveris good for mostly server-rendered pages with few static / prerendered content.hybridis good for mostly static sites with a few dynamic routes.- Read more: https://docs.astro.build/en/guides/server-side-rendering/#configure-server-or-hybrid
- If using
hybrid, disable prerendering on unnecessary API routes
- Replace
siteon astro.config.mjs with your site URL (sitemap) - Replace SEO configurations at src/default-seo.ts
- Replace your favicon
- Optimize your robots.txt entry to account for Verified Bots
- Setup CI/CD that'll automatically deploy the app on update
- Docker: Double check for dependencies vs dev-dependencies requirements
Should do:
- astro.config.mjs
- Adjust Astro's prefetching strategy to your likings
- Check if your content is compatible with light / dark mode
To deploy the app using Docker, you can build and run the image just like any other Docker image:
To build the image, run the following command, replacing your username and app name:
docker build -t username/image-name .Then, run the following command to deploy the app, replacing your port number:
docker run -p 4321:4321 username/image-nameTo deploy the app using Cloudflare, you will need to replace the output at astro.config.mjs with cloudflare.
By default, uncommenting the code will deploy the app using Cloudflare Workers.
You can import the app to your Cloudflare account by importing the Git repository via Cloudflare's web interface.