featured image
instructionscategory

How to Use

Some suggestions for how to use this starter.

Chris Tham Chris Tham Sun Jun 11 2023 00:00:00 GMT+0000 (Coordinated Universal Time) 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/content/blog (using either .md or .mdx extension).
  7. Any content created in the src/content/blog subdirectory will automatically be a blog post. Use src/content/blog/2000-01-01-template.md as a base for creating a new blog post. Remember to set the draft property in the frontmatter to false when you want to publish the page.
  8. Documentation pages are also supported by creating content in src/content/doc subdirectory (use sample pages as guideline - remember to set section in frontmatter to create different sections and use weight in frontmatter to change ordering of pages)
  9. Photo galleries are supported in Markdown posts without using MDX! Only one gallery (displayed at bottom of post) is supported. Specify the gallery using the gallery frontmatter (must name a subdirectory under src/assets/gallery)
  10. Multiple images at beginning of blog post (with lightbox support) is specified using images frontmatter - this is an array of relative image file names in src/images. The first image will be used as cover image (if coverImage is not separately set)
  11. 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.
  12. 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.
  13. Blog, category, tag index pages support pagination. You can set the number of posts per page by changing PAGE_SIZE in src/config.ts.
  14. If you want to change the header, edit src/components/header.astro. Similarly, edit src/components/footer.astro to customise the footer.
  15. If you make a lot of changes, use yarn lint to check everything is okay.
  16. yarn format will pretty-print all code in the src folder.
Prev
Roadmap
Next
Sample Gallery post (Markdoc)