This lab was about using docusaurus to create a webpage and implement a feature to the ssg-application. When I just open the website of docusaurus sample, I was quite surprised because it was very similar to my first open-source project in Release 0.2. In the first project, I need to find the markdown files with the wrong Korean translation. While I am looking for the file, I saw some weird grammar in the MD files. While I am following the tutorial for docusaurus, I found that the weird grammar was a tag in MD files to help docusaurus to create a webpage. The below is the sample of the tag in the MD file.
---
id: doc-with-tags
title: "A doc with tags"
tags:
- Demo
- Getting started
---
Overall, docusaurus is an easy tool to create a website. I think I will suggest to friends if they need to create a simple webpage in a short period of time without deep knowledge. This is because it is easy to approach to create a website even a person does not know what docusaurus is. Even I did not know what is docusaurus was before I started this lab, but I can create a sample page in a short period of time compared to using other programming languages to build a website.
And after finishing the tutorial on docusaurus, I decided to implement two features from the docusaurus, one is Search Engine Optimization(SEO) other one is a customized side navigation bar. This is because, SEO, will help the user of my application to make their created website more approachable to their website user. Also for the side navigation bar, for now, the user needs to change the URL to access different webpage created. However, if the navigation bar is created, at least if they create it in one command in SSG-application, they can just navigate through different web pages with the menu.
For the SEO, I added an HTML meta tag in the HTML template, create a function for prompt users to input the 3 kinds of meta data(title, description, keywords) to create, and add a customized Meta data tag in the HEAD tag in HTML. And for the navigation bar, I will a navigation bar tag in the HTML template and create a separate function to customize the sidebar if the user asked more than one file(also a folder). And put the link for all the pages to easily navigate to each other.
I fully implement this SEO feature in my application. However, for the customized sidebar, I could not implement it yet. I tried to implement it but it keep failing to create it. I think I need to think more about it and rewrite the code. I am planning to finish implementing it as soon as possible. The below is a prototype of how users add meta data tags for SEO.
PS C:\Users\suhhe\Documents\git\new\create-ssg\create-ssg> create-ssg --input Silver Blaze.txt
Please enter a title for your site: Silver Blaze
Please enter a description for your site: This is a text
Please enter a keyword for your site: SSG-Generated
Silver Blaze.html is created!
This is generated HTML file with a customized Meta data tag.
<meta name='title' content = "[##_Silver Blaze_##]">
<meta name='Description' content = "[##_This is a text_##]">
<meta name='keywords' content = "SSG-Generated">
These tags will help users to briefly see data on a site when they search a data on the internet. It means it can attract a user to visit the site.
While I am implementing the SEO feature, I was facing an issue that Html is created even before the user completes the answer for metadata.
PS C:\Users\suhhe\Documents\git\new\create-ssg\create-ssg> create-ssg --input Silver Blaze.txt
Please enter a title for your site: Silver Blaze.html is created!
Hence, I need to stop the application until the user finishes answering the metadata. Hence, I used the asynchronous function to solve this issue. And it worked!
The next step for the SEO is to think about a way to optimize more metadata to attract more users to the site and implement the side navigation bar to make it easier to use the created web pages.
Top comments (0)