... | @@ -2,37 +2,35 @@ |
... | @@ -2,37 +2,35 @@ |
|
|
|
|
|
The guide will help you develop websites and host it on to github using Docusaurus.
|
|
The guide will help you develop websites and host it on to github using Docusaurus.
|
|
|
|
|
|
1. Installing docker. Open up a new Terminal by pressing `Ctrl` + `Alt` + `t`
|
|
### Requirements
|
|
```sh
|
|
1. WSL 2 (only for windows)
|
|
sudo apt update
|
|
2. Vscode
|
|
sudo apt install git
|
|
3. Docker
|
|
git clone https://gitlab.iotiot.in/newbies/pre-office-office/docker-containers.git
|
|
|
|
cd docker-containers
|
|
|
|
sudo install-docker-ubuntu-16.04.sh
|
|
|
|
```
|
|
|
|
- **Note:** The script will automatically install and **reboot** your system.
|
|
|
|
- **Note:** These steps only work on Ubuntu 16.04 OS. Any other OS will cause an error.
|
|
|
|
|
|
|
|
- After the system reboots, Open up a new Terminal by pressing `Ctrl` + `Alt` + `t`.
|
|
**Note**: The guide assumes that you have installed required tools.
|
|
- Run command `sudo docker --version` to verify that docker is successfully installed.
|
|
|
|
```sh
|
|
## Starting Docker container in Vscode.
|
|
# The output should be a docker version
|
|
|
|
$ sudo docker --version
|
|
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
|
|
Docker version 19.03.13, build 4484c46d9d
|
|
2. Unzip the docker-containers-master.zip
|
|
```
|
|
![remote-containers](upload/15.png)
|
|
2. Start docker container by running command, in the same terminal
|
|
3. Open Up VScode.
|
|
```sh
|
|
4. Press `Ctrl` + `Shift` + `p` in VScode. A bar will open up at the top.
|
|
cd docker-containers/docusaurus-container
|
|
5. Search for `Remote-Containers`
|
|
sudo ./start
|
|
![remote-containers](upload/16.png)
|
|
```
|
|
6. Click on "Remote-Containers: Open Folder in Containers".
|
|
3. You will get a new Terminal prompt,
|
|
7. In the pop up Window, Navigate to Downloads --> docker-containers-master --> code-style-container.
|
|
![terminal](upload/Selection_018.png)
|
|
![open-folder](upload/17.png)
|
|
|
|
8. Vscode will take some time to start up the container, once done the window will look like this below
|
|
|
|
![vscode-container](upload/18.png)
|
|
|
|
9. To open up terminal you can Press `Ctrl` + `j`.
|
|
|
|
![vscode-terminal](upload/19.png)
|
|
|
|
|
|
4. Initialize the docusaurus by running the command
|
|
10. Initialize the docusaurus by running the command
|
|
```sh
|
|
```sh
|
|
npx @docusaurus/init@next init {name-of-the-website} classic
|
|
npx @docusaurus/init@next init {name-of-the-website} classic
|
|
```
|
|
```
|
|
5. To preview the website run command
|
|
11. To preview the website run command
|
|
```sh
|
|
```sh
|
|
cd {name-of-the-website}
|
|
cd {name-of-the-website}
|
|
yarn start --host 0.0.0.0 --port 3000
|
|
yarn start --host 0.0.0.0 --port 3000
|
... | @@ -41,12 +39,12 @@ The guide will help you develop websites and host it on to github using Docusaur |
... | @@ -41,12 +39,12 @@ The guide will help you develop websites and host it on to github using Docusaur |
|
See your website by typing http://localhost:3000 in the address bar of your browser.
|
|
See your website by typing http://localhost:3000 in the address bar of your browser.
|
|
![website-preview](upload/wesite-preview.png)
|
|
![website-preview](upload/wesite-preview.png)
|
|
|
|
|
|
6. Making changes to the website
|
|
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.
|
|
- 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.
|
|
- Edit and make changes to these files in any text editor of your choice.
|
|
![docusaurus-folder](upload/Selection_020.png)
|
|
![docusaurus-folder](upload/Selection_020.png)
|
|
|
|
|
|
7. Uploading website to Github.
|
|
13. Uploading website to Github.
|
|
- Configure your website for Github, You need to these changes to your `docusaurus.config.js`
|
|
- Configure your website for Github, You need to these changes to your `docusaurus.config.js`
|
|
```js
|
|
```js
|
|
...
|
|
...
|
... | | ... | |