This is a Docusaurus-powered site to host tutorials and blog posts that can support #30Days learning journeys. Here are the steps used to setup this site and configure it for automated build-deploy workflows.
| Command | Description |
|---|---|
npx create-docusaurus@latest www classic |
Scaffold a new classic docusaurus site in www/ folder |
cd www; npm install |
Work with an existing docusaurus site scaffolded in www/ folder |
cd www; npx docusaurus start |
Validate setup with local preview (and hot reload) |
cd www; npm run build |
Build production-ready site (in build/ folder by default) |
cd www; npm run serve |
Preview production-ready site on local device |
| Action | Outcome |
|---|---|
Add hello.md under www/src/pages/ |
Creates a standalone web page accessible at path /hello |
Add hello.md under www/docs/ |
Creates a tutorial page (with prev/next navigation and sidebar) accessible at path /docs/hello |
Add hello.md under www/docs/basics/ |
Creates a tutorial collection accessible at path /docs/basics with /docs/basics/hello as first step. |
Add 2022-01-17-hello.md under www/blog |
Creates a blog post timestamped January 17, 2021 accessible under /blog/hello, with blog index at blog/ |
Edit site settings in www/docusaurus.config.js |
Customize various parameters for site metadata, deployment, themes, plugins and more. |
Edit docs sidebar settings in www/sidebars.js |
Customize sidebar configuration or learn to use auto-generated versions more effectively. |
| Update styling and layout and validate for light & dark theme | Use colorbox.io and guide to define color palette. Create style variables to update custom.css (based on the infima styling framework) |
| Add supported plugins for enhanced content or behaviors | Default plugins used are plugin-content-docs (for docs/ pages) , plugin-content-blog (for blog/) and plugin-content-pages for default pages. Check out plugin-sitemap, plugin-ideal-image and plugin-pwa for other useful features. |
| Action | Description |
|---|---|
| Modify docusaurus.config.js | Add organizationName=user, projectName=repo, deploymentBranch=gh-pages properties. Updated url property to relevant github.io version for now |
| Configure publishing source for GitHub Pages | Do an initial manual deploy using GIT_USER=<GITHUB_USERNAME> GIT_PASS=<GITHUB_PERSONAL_ACCESS_TOKEN> npm run deploy to setup the GitHub Pages branch. Generate Personal Tokens if needed. Validate deploy by visiting https://staticwebdev.github.io/30DaysOfSWA/ - then automate deploy using GitHub Actions. |
| Action | Description |
|---|---|
| Setup GitHub Actions for auto-deploy | We want this to auto-deploy build to gh-pages when new commit is made to main/. Follow the directions for "Same" repo - add deploy.yml and test-deploy.yml to .github/workflows -- commit changes! I used www/** for paths) and npm for build) |
| Visit Actions Dashboard | Commits should trigger action - verify that build/deploy works. |