- Clone your own version of the starter template or fork the repository. Run
- 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.
- The home (landing) page consists of a number of components (Hero, Feature, CTA, …) - edit these components in
/contactpage displays an OpenStreetMaps map via Leaflet - customise by changing to your preferred set of coordinates.
src/config.tshas all the site parameters and navigation links - edit to suit.
- Create new Markdown or MDX pages in
- Any content created in the
src/content/blogsubdirectory will automatically be a blog post. Use
src/content/blog/2000-01-01-template.mdas a base for creating a new blog post. Remember to set the
draftproperty in the frontmatter to
falsewhen you want to publish the page.
- Documentation pages are also supported by creating content in
src/content/docsubdirectory (use sample pages as guideline - remember to set
sectionin frontmatter to create different sections and use
weightin frontmatter to change ordering of pages)
- 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
galleryfrontmatter (must name a subdirectory under
- Multiple images at beginning of blog post (with lightbox support) is specified using
imagesfrontmatter - this is an array of relative image file names in
src/images. The first image will be used as cover image (if
coverImageis not separately set)
- If you create a new tag (eg.
newtag) a new tag page will be created ie.
/tagspage will enumerate all tags.
- Similarly, a new category (eg.
newcat) will create a page in
/categoriespage 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
- Blog, category, tag index pages support pagination. You can set the number of posts per page by changing
- If you want to change the header, edit
src/components/header.astro. Similarly, edit
src/components/footer.astroto customise the footer.
- If you make a lot of changes, use
yarn lintto check everything is okay.
yarn formatwill pretty-print all code in the