Intro
For my sixth lab, I have to make a website with Docusaurus and host to GitHub. Also, add some features similar to Docusaurus in my ssg project.
Docusaurus
To initialize Docusaurus I ran the command npx create-docusaurus@latest my-website classic --typescript
.
After that, I started to customize the website.
I modified the theme color in the custom.css
files.
I also removed all the other docs and blog that was pre-generated from the template and added mine.
I set up my index page to redirect to /text-ssg-docs/docs/introduction"
import React from 'react';
import { Redirect } from '@docusaurus/router';
export default function Home(): JSX.Element {
return <Redirect to="/text-ssg-docs/docs/introduction" />;
}
I also add my documentation of my SSG project + some of my blog.
To deploy to GitHub I had to follow this instruction GitHub Deployment
Edited docusaurus.config.js
config file to fix my setup
title: 'Text-ssg docs',
tagline: 'Dinosaurs are cool',
url: 'https://Kevan-Y.github.io',
baseUrl: '/text-ssg-docs/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicon.ico',
organizationName: 'kevan-y',
projectName: 'text-ssg-docs',
Then I pushed my change to my repo. To deploy I have to run
cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy'
This will make a new branch in my repo and use that branch commit to host the website on GitHub.
Adding Docusaurus to my ssg project
I decided to use a third party package to have the full markdown feature + highlight with highlight.js. Issue#24
First I need to configure markdown-it and highlight
const hljs = require('highlight.js');
//Markdown config
const md = require('markdown-it')({
html: true,
linkify: true,
typographer: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (__) {}
}
return ''; // use external default escaping
},
});
Then removes the old part markdown conversion and replace by dataTreated.content = md.render(data);
.
After that, the implementation is done.
Top comments (0)