astro-starter-template

This is a starter template for the new Astro project which is created by ansidev.

Features

• Astro v2, disabled Astro Telemetry.
• Astro Compress - Compress output HTML, CSS, JS, image.
• Astro PurgeCSS - Remove unused CSS from build output.
• Automate releasing new versions using GitHub Actions and following the git-flow branching model.
• Automate Netlify deployment, support GitHub deploy environment. Go to section.
• Automate rebasing PR branch via PR comment: /rebase, /autosquash, /rebase-autosquash.

Development features

• Node package manager: PNPM.
• Conventional commit.
• ESLint - Static code analyzer.
• Prettier - Code formatter.
• Renovate - Automate dependency updates.
• Vitest - Blazing Fast Unit Test Framework.
• changie, git-chglog - Generate changelog from conventional commits.
• taskfile - Task files for common tasks.

Manual

Getting started

Install

Run one of these commands to init a new project from this template

npm create astro@latest -- --template ansidev/astro-basic-template

yarn create astro@latest --template ansidev/astro-basic-template

pnpm create astro@latest --template ansidev/astro-basic-template

Setup GitHub repository

1. Create new GitHub Repository. Click here.

2. Create new Netlify site.

   • Recommended method: Deploy manually.
   • Disable Branch deploy and Deploy Preview feature since the site will be deployed using Netlify CLI.
     • https://docs.netlify.com/site-deploys/overview/#branch-deploy-controls
     • https://docs.netlify.com/site-deploys/overview/#deploy-preview-controls

3. Go to https://github.com/{user}/{repository}/settings/secrets/actions/new and add following repository secrets:

   Name	Description
   GH_TOKEN	GitHub Personal Access Token which has the repo scope. Click here to create a new one.
   NETLIFY_AUTH_TOKEN	Netlify Authentication Token. Click here to create a new one.
   NETLIFY_SITE_ID	Netlify site ID. You can obtain it via UI or CLI. UI: Go to https://app.netlify.com/sites/{netlify-site-name}/settings/general#site-details and click the copy button next to the site ID. CLI: Run netlify sites:list and copy the site ID.

Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── .changes
│   ├── unreleased
│   │   └── .gitkeep
│   ├── v*.md
├── .changie.yaml
├── .chglog
│   ├── CHANGELOG.tpl.md
│   ├── CHANGELOG_HEADER.tpl.md
│   └── config.yml
├── .commitlintrc.json
├── .czrc
├── .editorconfig
├── .env.local
├── .eslintrc.cjs
├── .github
│   ├── FUNDING.yaml
│   └── workflows
│       ├── auto_merge_release_hotfix_into_develop.yaml
│       ├── deploy_to_netlify.yaml
│       ├── draft_release_hotfix_pr.yaml
│       ├── rebase.yaml
│       └── release.yaml
├── .gitignore
├── .prettierignore
├── .prettierrc.cjs
├── .taskfiles
│   ├── task_dep.yaml
│   ├── task_git.yaml
│   ├── task_github.yaml
│   ├── task_release.yaml
│   └── task_site.yaml
├── .vscode
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── CHANGELOG.md
├── LICENSE
├── README.md
├── Taskfile.yaml
├── astro-basic-template.code-workspace
├── astro.config.mjs
├── dotenv.config.ts
├── eslint.config.cjs
├── netlify.toml
├── package.json
├── pnpm-lock.yaml
├── public
│   └── favicon.svg
├── renovate.json
├── src
│   ├── components
│   │   └── Card.astro
│   ├── env.d.ts
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       └── index.astro
└── 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.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:3000
pnpm run build	Build your production site to ./dist/
pnpm run preview	Preview your build locally, before deploying
pnpm run lint	Check coding styles
pnpm run test	Execute test cases
pnpm run astro ...	Run CLI commands like astro add, astro preview
pnpm run astro --help	Get help using the Astro CLI

Task commands

Command	Action
dep:commit	Commit changes after updating package version
dep:init_dep_branch	Init git branch deps/*
dep:update	Check whether the new version of the npm package broke the build.
git:push_current	Push current branch
release:batch_changelog	Generate changelog for existing git tags
release:changelog	Generate changelog for an existing version
release:changelog_next	Generate changelog for a new version
release:commit_release	Create release commit
release:create	Generate release commit
release:prepare	Install tools
site:build	Build site
site:clean	Clean the build output
site:install	Install dependencies

GitHub Deploy Environment

Branch	Event	Event Type	Is Merged	GitHub Environment	Note
main	pull_request	closed	true	production
main	pull_request	open	false	staging
main	pull_request	synchronize	false	staging
develop	pull_request	closed	true	preview	The head branch and deployment environment will be deleted after merged
main	pull_request	closed	false	skip running workflows
develop	pull_request	closed	false	skip running workflows
develop	pull_request	open	false	pr-{number}-preview
develop	pull_request	synchronize	false	pr-{number}-preview

Want to learn more?

Feel free to check the official documentation or jump into the official Discord server.

Author

Le Minh Tri @ansidev.

License

This source code is released under the MIT License.