This is the second iteration of my website, made with Astro with a React integration. It uses Sanity.io as a CMS.
To run the project locally:
npm install
npm run prepare
The prepare script installs husky enabling commit/merge linting via git hooks and lint-staged.
┌── public/
│
├── src/
│ ├── components/
│ ├── layouts/
│ ├── pages/
│ └── img/
│
└── package.json
public/
: Currently, contains smaller content like images.
components/
: Resuable components.
layouts/
: Components that encapsulate other html.
img/
: Images, pretty self-explanatory. Note, per Astro's docs, most images are placed here in src
, instead of public
.
Note: Each folder in
src/
has anindex.astro
file. For cleaner imports, each component should export into that file in their respective folders. Then, components can be imported with named imports from the index file.Additionally, both Vite and Typscript are set up so that the import alias
@components
is valid. Similarly for layouts, pages, and img folders.
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install |
Installs dependencies |
npm run prepare |
Prepares husky git hooks |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
A projectID
is needed for the sanity integration. SANITY_PROJECT_ID="[projectId]"
should be loaded in a .env
file, ignored by .gitignore
. See astro.config.mjs
Commit linting is configured with the Commitlint module. This helps to maintain a clean commit history for later viewing.
I've separated the types of commits and their formatting rules in the commits
folder, and will reiterate the fields here:
Field | Description |
---|---|
feat |
New behaviors or major milestones |
refactor |
Changes to codebase to improve structure, organization, and/or readability |
fix |
Fixes to bugs or bad behaviors |
style |
Changes to the styling of components |
chore |
Tasks that don't modify src, like updating dependencies, adding assets, etc. |
working |
Intermediate commits that represent a working idea, or one that is in progress |
perf |
Optimizations and improvements (e.g. page load time, images, etc. ) |
docs |
Changes to README files or other documentation |
test |
Addition/modifications to test cases |
Along with husky, this works with lint-staged to run eslint
and prettier
only on staged files at commit.