Docusaurus-powered site to host tutorials and blog posts to support #30Days learning journeys
JavaScript
30days Of Learning
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.
1. Setup & Validate Site
Command
Description
npx create-docusaurus@latest www classic
Scaffold classic docusaurus site 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
2. Customize Site Contents
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 2021-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.
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://fearlessly-dev.github.io/30days/ - then automate deploy using GitHub Actions.
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)