featured image
instructions category

How to Use

Some suggestions for how to use this starter.

Chris Tham Chris Tham 2022-08-27 2 min read
#astro #help #starter
  1. Clone your own version of the starter template or fork the repository. Run yarn then yarn build or yarn dev.
  2. The default colour scheme is purple (#663399). Change to your preferred hue by doing a global search and replace of ‘-purple-’ to your favourite colour.
  3. The home (landing) page consists of a number of components (Hero, Feature, CTA, …) - edit these components in src/components to customise.
  4. The /contact page displays an OpenStreetMaps map via Leaflet - customise by changing to your preferred set of coordinates.
  5. src/config.ts has all the site parameters and navigation links - edit to suit.
  6. Create new Markdown or MDX pages in src/pages/blog (using either .md or .mdx extension).
  7. Any content created in the src/pages/blog subdirectory will automatically be a blog post. Use src/pages/post/2000-01-01-template.md as a base for creating a new blog post. Remember to set the default property in the frontmatter to false when you want to publish the page.
  8. If you create a new tag (eg. newtag) a new tag page will be created ie. /tag/newtag. The /tags page will enumerate all tags.
  9. Similarly, a new category (eg. newcat) will create a page in /category/newcat. The /categories page will enumerate all categories. You can further customise categories to include an SVG cover image, social image and description by adding your new category in CategoryDetail in src/config.ts.
  10. Blog, category, tag index pages support pagination. You can set the number of posts per page by changing PAGE_SIZE in src/config.ts.
  11. If you want to change the header, edit src/components/header.astro. Similarly, edit src/components/footer.astro to customise the footer.
  12. If you make a lot of changes, use yarn lint to check everything is okay.
  13. yarn format will pretty-print all code in the src folder.