This docs/ folder contains the source for the static Docusaurus site published to the GitHub Pages endpoint on this repo. It was created using the default quickstart command below, run in the root of the repository:
npx create-docusaurus@latest docs classicOpen the VS Code terminal and change to the docs/ directory. Run npm install to get local environment setup first. Then use the following commands for development:
| Command | Description |
|---|---|
npm install |
Install dependencies first |
npm start |
Preview site with dev server |
npm run build |
Build static site for deploy |
npm run serve |
Preview site from static build |
npm run deploy |
Publish static build to GitHub pages |
The site can be customized for basic themes and capabilities (config), styling (css) and content (sidebars, docs, blog). These are the core docs to reference for more details:
- Configuration
- Styling and Layout
- Using Plugins
- Deploying to GitHub Pages
- Static Assets
- Using Local Search - via community plugins
- Optimizing SEO - with metadata, sitemap etc.
- Swizzling - for deeper customization of core components
Some additional notes:
- Analytics options - for tracking page views. Options include:
- plugin-google-gtag - Google Tag Manger #1
- plugin-google-tag-manager - Google Tag Manger #2
- plugin-vercel-analytics - Vercel Analytics
- docusaurus-plugin-clarity - Microsoft Clarity (2+ yrs old)
- Cookie consent component - moved from
Planned(2021) toIn Progress(2022). Until that is ready, we can look at:- cookie-consent widget for GTM - with usage hints.
- react-cookie-consent package - with usage tutorial
Let's get these configured in order!
- Use the Styling with Infima tool to pick color palettes for dark and light modes to customize the
src/css/custom.cssfile defaults. - Update the
static/img/logo.svgfile with your desired new logo - and update the relevant logo references in the repository (search/replace) to use updated logo.
Relevant references:
- The Homepage layout is defined in
src/pages/index.tsx- and has a<HomepageHeader>(hero element) andHomepageFeatures(main body) as the core components. - The HomepageFeatures component is defined in
src/components/HomepageFeatures.tsx- and is a grid of cards with icons, titles and descriptions. Refactored this to load data from a JSON file insrc/data/features.jsonand use image paths instead of SVGs.