GitLab

Building Docusaurus website using docusaurus container.

The guide will help you develop websites and host it on to github using Docusaurus.

Requirements

1. WSL 2 (only for windows)
2. Vscode
3. Docker

Note: The guide assumes that you have installed required tools.

Starting Docker container in Vscode.

1. Download ready made docker-containers for the module - https://gitlab.iotiot.in/newbies/pre-office-office/docker-containers/-/archive/master/docker-containers-master.zip

2. Unzip the docker-containers-master.zip

3. Open Up VScode.

4. Press Ctrl + Shift + p in VScode. A bar will open up at the top.

5. Search for Remote-Containers

6. Click on "Remote-Containers: Open Folder in Containers".

7. In the pop up Window, Navigate to Downloads --> docker-containers-master --> code-style-container.

8. Vscode will take some time to start up the container, once done the window will look like this below

9. To open up terminal you can Press Ctrl + j.

10. Initialize the docusaurus by running the command sh npx @docusaurus/init@next init {name-of-the-website} classic

11. To preview the website run command sh cd {name-of-the-website} yarn start --host 0.0.0.0 --port 3000 See your website by typing http://localhost:3000 in the address bar of your browser.

12. Making changes to the website - Navigate to folder {repo-root}/docusaurus/{name-of-the-website}, you will find all the docusaurus website files here. - Edit and make changes to these files in any text editor of your choice.

13. Uploading website to Github. - Configure your website for Github, You need to these changes to your docusaurus.config.js

    ...
    url: 'https://__userName__.github.io', // Your website URL
    baseUrl: '/testProject/',
    projectName: 'testProject',
    organizationName: 'userName'
    ...

    For example : Lets say my github project name is - Shuny-Interfaces and my user name is shunyaos

    Then the docusaurus.config.js will be

    ...
    url: 'https://shunyaos.github.io', // Your website URL
    baseUrl: '/Shunya-Interfaces/',
    projectName: 'Shunya-Interfaces',
    organizationName: 'shunyaos'
    ...

-   To upload the website to github run command.
    ```sh
    git config --global user.email "{your-email-id}"
    git config --global user.name "{Your-name}"
    GIT_USER={your-git-username} yarn deploy
    ```