DEV Community

Tong Liu
Tong Liu

Posted on

Reflect on Lab 6

For the lab this week, we are going to create and run a React website called Docusaurus.

Docusaurus? What's that?

This is actually also the first time I heard of Docusaurus, the first thing I got to figure out was what Docusaurus is about. From the official definition, Docusaurus is a website that will help you ship a beautiful documentation site in no time. You can focus on your content and just write Markdown files.. So basically Docusaurus is a website for blog posting and all blog postings are generated with the markdown files you write for your blogs. Since it uses a Node.js script to install and deploy the website, users do not need to manually set up the website, so Docusaurus extremely simplifies the processes of creating a blog website also, it significantly decreases the time cost of creating and posting a blog by using markdown language other than HTML language,

How to set up Docusaurus?

To set up a Docusaurus on your local machine, the only 3 things you need to do are:

  1. Install Node.js on your local environment since Docusaurus is based on React and uses React server to serve its pages and React server requires Node.js
  2. Use npm to install Docusaurus, the command should look like this npm init docusaurus@latest my-website classic
  3. Go to Docusaurus's root folder, in my previous example, it is my-website, so use cd my-website to jump into it, and issue the command npm run start to run the server. And now you can enjoy your own copy of Docusaurus on your local machine. However, if you want to push it to GitHub and serve it on GitHub Pages, there are more steps you need to do.
  4. Of course, you need to create a new GitHub repository and initialize it on your local disk.
  5. Move the root folder of the copy of Docusaurus you just created to the root of this GitHub repo.
  6. Install an extra npm package named ph-pages by using the command npm install gh-pages --save-dev so that you can manually build and push the compiled Docusaurus GitHub Pages.
  7. Edit the config file docusaurus.config.js and change the filds of url and baseUrl based on the setting of your GitHub Pages.
  8. Edit package.json to add build scripts to it. You should add "predeploy": "npm run build" and "deploy": "gh-pages -d build", to the category of scripts
  9. Push your code to GitHub and run npm run deploy to deploy it on GitHub Pages.

Which function did I replicate from Docusaurus? And why I chose it?

The function I replicated from Docusarus is full(well.. almost full) Markdown language support, this is because I like to complete existing features before starting new ones. Markdown language support is the one I wanted to complete first.
However, it took a quite while to add full Markdown support to my project because my project is built on C++, not like other modern programming languages which already have many built-in functions and existing packages to implement markdown language support, C++ has very limited selections for Markdown parser, in actuality, there were only 4 selections for me to choose from, and what's more difficult is that each of them has their advantages and disadvantages. I first one I selected was Discount because it is the fastest one among these 4. But when I actually imported it into my project I realized, it is basically impossible for me to use it because the documentation of it was pretty vague, as well as my knowledge of C++ is relatively insufficient at the moment, in addition, maddy was written in ancient C language by hardcore programmers, inspecting the code to reverse-engineering it was beyond my capability.
I soon gave up and turned to Maddy which is written in C++ and with more friendly documentation and integration. However, Maddy also has disadvantages, the dominant one is it doesn't support all Markdown features(e.g. it doesn't support table). Since we don't have to make our implementation perfect in this lab, I chose to use this Maddy. Although my expectation for this lab was to make full support on Markdown language, I may leave it to the future when I found a better alternative C++ library for Markdown support or anyone who would find it.

Top comments (0)