How to Use
Some suggestions for how to use this starter.
2022-08-27 2 min read- Clone your own version of the starter template or fork the repository. Run
yarn
thenyarn build
oryarn dev
. - The default colour scheme is violet (
#663399
). Change to your preferred hue by doing a global search and replace of ‘-violet-’ to your favourite colour. - The home (landing) page consists of a number of components (Hero, Feature, CTA, …) - edit these components in
src/components
to customise. - The
/contact
page displays an OpenStreetMaps map via Leaflet - customise by changing to your preferred set of coordinates. src/config.ts
has all the site parameters and navigation links - edit to suit.- Create new Markdown or MDX pages in
src/pages/blog
(using either.md
or.mdx
extension). - Any content created in the
src/pages/blog
subdirectory will automatically be a blog post. Usesrc/pages/post/2000-01-01-template.md
as a base for creating a new blog post. Remember to set thedefault
property in the frontmatter tofalse
when you want to publish the page. - 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. - 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 inCategoryDetail
insrc/config.ts
. - Blog, category, tag index pages support pagination. You can set the number of posts per page by changing
PAGE_SIZE
insrc/config.ts
. - If you want to change the header, edit
src/components/header.astro
. Similarly, editsrc/components/footer.astro
to customise the footer. - If you make a lot of changes, use
yarn lint
to check everything is okay. yarn format
will pretty-print all code in thesrc
folder.