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.
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.

3. Deploy to GitHub Pages

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://fearlessly-dev.github.io/30days/ - then automate deploy using GitHub Actions.

4. Automate with 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.