Build a website for the Fundamentals Course using Docusaurus

[yosefanajjar]

Deployed Website: https://fundamentals-course.netlify.app

Motivation

I love building static websites using the Jamstack architecture with tools like Gatsby and NextJS and have built quite a few and the other day I was looking at the Fundamentals Course repo and thought that I could easily put this content that we have in the coursebook into a static site that's faster to browse than Github (because it's static) and easier to navigate for beginners in web dev (the people this course is for) so I did a quick proof of concept version of it and had a meeting with @hshahwan she liked the idea and then I decided to continue and now I'd say the website is in a good place to go to production.

Docusaurus

I had in mind the documentation of redux and redux-toolkit they look very similar and I have seen other docs that also look similar so I went to their repos to see what tools were they using and it's called Docusaurus which is an open-source project by Facebook for building static sites and I thought it would work well for us their documentation is simple and the learning curve is way better when compared to a similar tool like Gatsby.

How to run this locally?

cd website
yarn && yarn start

Quick Explanation

• The file structure has a docusaurus.config.js file which has the metadata of the site along with deployment configuration and plugins
• The plugin we are using for the site content (coursebook) is the docs plugin which requires a sidebars.js file
• In the sidebars.js file we point to all of our files so users can navigate the content
• The content is written in markdown as it was but we could also write in MDX (markdown + react)

The Changes I Made

• Initializing the Docusaurus site
• Editing the metadata and landing page
• Change some of the coursebook files
  • Remove the .md when linking files as it's not needed and gave warnings in terminal
  • Remove the inline styling i.e <h2 style="font-weight: bold;"></h2> as it was breaking the app since this is React inline styling is a bit different as we know

Still To Do

• Deploy the site using Github pages (I did that but the URL was redirecting to GSG's main site for some reason (P1)
• Edit metadata to point to gazaskygeeks's social media (P1)
• Test out the website and make sure nothing is breaking (P1)
• Change the names of files and headings to be capitalized (P2)

Any feedback is welcome I hope you guys like this! This is a way for me to pay back to the code academy community and sorry for the massive number of files changed 😁