242saurus by BinKadal, Sdn, Bhd.

ℼ

Table of Content (Toc)

• Network Address Translation (NAT) Settings
• GitHub Repo 242saurus
  • File .gitignore
• Debian Packages
• Removed Packages
• Install NVM/node.js
  • Remove Old Node.js
  • Install Node.js
  • Remove Old Node.js
• YARN
• Install Docusaurus
• Test Docusaurus (local)
• docusaurus.config.js
• Deploy To GitHub
• ETC
• More Links

ℼ

Network Address Translation (NAT) Settings

VirtualBox

Docusaurus is using local port 3000. On your VirtualBox, you must redirect/translate the local port 3000 to the host port 5001.

• VirtualBox Settings
  • Network:Adapter1:
    • Enable Network Adapter
    • Attached to: NAT
    • Port Forwarding:
      • 127.0.0.1:5001 (Host) --- 10.0.2.15:3000 (Guest)

UTM

Docusaurus is using local port 3000. On your UTM, you must redirect/translate the local port 3000 to the host port 5001.

• UTM Settings
  • Network Mode: Emulated VLAN
    • Port Forward: New
      • Protocol: TCP
      • Guest Address: 10.0.2.15
      • Guest Port: 3000
      • Host Address: 127.0.0.1
      • Host Port: 5001
  • SAVE

ℼ

GitHub Repo 242saurus

• Create a new GitHub repo.
  • New Repository
  • Repository Name: "242saurus"
  • Description: "242saurus"
  • Public
  • Add README.md
  • Add .gitignore: NODE
  • Choose any free LICENSE
• CLONE Your GitHub Repo. E.g.

git clone [email protected]:cbkadal/242saurus.git

• REMEMBER: You are not CBKADAL!
• Write your memo on file "README.md".
  • Update/push "README.md" regularly.

ℼ

File .gitignore

Don't push the node.js files to GitHub! If you missed the .gitignore file option during the repo initialization process, copy the following into your .gitignore file: https://raw.githubusercontent.com/cbkadal/242saurus/master/.gitignore

ℼ

Debian Packages (root)

Make sure the following Debian packages are present in your system.

# ROOT privilege.
export DEBS="
aptitude
git
sudo
vim
"
date;
time apt-get install $DEBS -y

ℼ

Removed Packages (root)

Remove the current "yarn" version used by the Jekyll installation. It will be replaced with a newer one. That old "yarn" is in the "cmdtest" package.

# ROOT privilege.
aptitude purge cmdtest

ℼ

Install NVM/node.js (user)

Docusaurus needs a huge JavaScript runtime environment package called "node.js." Check https://github.com/nvm-sh/nvm/releases for the latest NVM package release. Currently, it is version 0.40.1.

# USER privilege.
NVM_RELEASE="v0.40.1"
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/$NVM_RELEASE/install.sh | bash

Close (exit) and reopen your terminal to start using nvm!

• One more time: close (exit) and reopen your terminal to start using nvm!
• Have I told you to close (exit) and reopen your terminal to start using nvm?

ℼ

Check Node.js Version (user)

Check for the latest LTS (Long-Term Support) version.

# USER privilege.
nvm ls-remote

You might have previously installed node.js before. For example,

• the latest LTS version (NEW_NODE_VERSION) is "v20.18.0"
• the current installed version (OLD_NODE_VERSION) is "v20.11.1"

ℼ

Install Node.js (user)

Set NEW_NODE_VERSION

# USER privilege.
NEW_NODE_VERSION="v20.18.0"
nvm install $NEW_NODE_VERSION
nvm alias default $NEW_NODE_VERSION
sleep 1
node -v

ℼ

Remove Old Node.js (if exists)

You might have installed node.js before (e.g. v20.11.1). Remove the old "node.js" if you wish.

# USER privilege.
OLD_NODE_VERSION="v20.11.1"
nvm uninstall $OLD_NODE_VERSION
sleep 1
rm -rfv $HOME/.nvm/versions/node/$OLD_NODE_VERSION/
node -v

ℼ

Install YARN (user)

# USER privilege.
npm install -g yarn
sleep 2
yarn --version

ℼ

Check UPDATE

# USER privilege.
npm outdated

ℼ

Example: Update npm 10.9.0

# USER privilege.
npm install -g [email protected]

ℼ

Install Docusaurus (user)

Go to your "242saurus/" (repo) folder.

# USER privilege.
npx create-docusaurus@latest Docusaurus classic --typescript

ℼ

Start Docusaurus (local)

Test if Docusaurus shows on port 5001 (host).

# USER privilege.
cd Docusaurus/
npm run start -- --host 0.0.0.0

ℼ

File docusaurus.config.ts

Goto (cd) folder "Docusaurus/" and edit file "docusaurus.config.ts". Remember, you are not "cbkadal".

  title: '242saurus',               // Or else
  tagline: 'This is the Way!',      // Or else
  favicon: 'img/favicon.ico',       // Or else
  url: 'https://cbkadal.github.io', // Or else
  baseUrl: '/242saurus/',           // Or else
  organizationName: 'cbkadal',      // (Usually your GitHub org/user name)
  projectName: '242saurus',         // (Usually your repo name)
  trailingSlash: true,              // "true" or "false"

ℼ

Deploy To GitHub

Replace "GIT_USER" because you are not "cbkadal"!

# USER privilege.
export GIT_USER="cbkadal"
export USE_SSH="true"
yarn deploy

ℼ

ETC

Restore From GitHub

# USER privilege.
# Inside repo "242saurus/"
cd Docusaurus/
npm install

Image Plugin

# USER privilege.
npm install --save @docusaurus/plugin-ideal-image

Raw Loader

# USER privilege.
npm install --save raw-loader

Fix

# USER privilege.
npm audit fix

UPGRADE DOCUSAURUS

To upgrade Docusaurus packages with the latest version, run the following command:

# @docusaurus/module-type-aliases@latest
# USER privilege.
npm i @docusaurus/core@latest @docusaurus/plugin-ideal-image@latest @docusaurus/preset-classic@latest \
      @docusaurus/tsconfig@latest @docusaurus/types@latest
npm audit fix

ℼ

More Links

• https://docusaurus.io/docs/

ℼ

REV: Sun 06 Oct 2024 17:00
REV: Sun 06 Oct 2024 14:00
REV: Sat 25 May 2024 13:00
REV: Thu 04 Apr 2024 21:00
REV: Wed 27 Mar 2024 23:00
STR: Sun 17 Mar 2024 00:00