DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Amazing
Amazing

Posted on

Lab #6: Experience a mature SSG project

Docusaurus way too good for hosting docs

This week lab, we got a chance to play around with Docusaurus. You can check out my Docusaurus and GitHub Pages hosted site. It was fast and straight forward to set up a Docusaurus project, the doc is crystal clear. During the time exploring Docusaurus, I want to have full markdown support for my project and syntax Highlighting for code blocks base on what Docusaurus did. After I was allow to use a proper library to have full markdown support for my website, I found markdown-it a library that fully help my project to implement full makrdown support.
My code transform to this:

var md = require('markdown-it')();

const heading1Markdown = (content: string): string => {   
  return md.render(content);
  };

Enter fullscreen mode Exit fullscreen mode

You can check out all my change throught 051a53. I'm in the progress to have my website support hilighting for code block base on the programming language prefer to issue-14 soon.

I also update the doc and resolve a conflict in my package.json where I used to have 2 typescript package that install and causing some bug in my code

Hosting Docusaurus to GitHub Pages

When I try to host my Docusaurus project to GitHub, my website display only my README.md file but thankfully for a detailed doc on how to deploy Docusaurus project to GitHub Pages. I was able to make a few change to my config files which help me to host my Docusaurus project

const config = {
  title: 'tpmai',
  tagline: 'Dinosaurs are cool',
  url: 'https://BeAmazedVariable.github.io',
  baseUrl: '/docusaurus_testing/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'BeAmazedVariable'  , // Usually your GitHub org/user name.
  projectName: 'docusaurus_testing'}

 module.exports = config;


Enter fullscreen mode Exit fullscreen mode

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!