Styling and Layout
Adding Last Updated Feature
Official Docs can be found here. Link
Creating a GitHub Repository
First we need to create a GitHub Repository.
When you are done creating your new repository we will have to add SSH Keys
to your account
In the upper-right corner of any page, click your profile photo, then click Settings.
In the "Access" section of the sidebar, click SSH and GPG keys.
Click New SSH key
You should now see this screen
I used my repo name BankaiTechDocs
for the Key name
Key type is Authentication key
Creating local SSH key
Go to your temninal and run this command
ssh-keygen -t ed25519 -C "[email protected]"
Press ENTER
and follow the prompts
You do not need to enter a passphrase
but it is recommended for security
If you do use a Passphrase, please keep it safe as you will need it every time you run Git pull
or Git push
Run the following command and copy the contents of the result
cat <location of new ssh key>
I ran cat /root/.ssh/id_ed25519.pub
Adding SSH key to GitHub
Go back over to GitHub and Paste the SSH key you just copied
Press Add SSH key
Creating a local .git repo
Go to the root directory of your website
This directory will contain your docusaurus.config.js
or docusaurus.config.ts
file
In your terminal, run the following commands
git init
git config --global user.name "<USER_NAME>"
git config --global user.email "<USER_EMAIL>"
Connecting to the remote Repo
We are going to need the SSH url for your repo, we can find that here
Run this command to add your remote repo
git remote add origin <SSh Repo URL>
[email protected]:TrueBankai416/BankaiTechDocs.git
Now run the following commands
git add -A
git commit -m 'main'
git push origin master
git pull origin main
You should now be able to make changes on GitHub and then run git pull origin main
to download the changes locally, or you can make changes locally and run git push origin main
to send the changes to GitHub
When you run git pull origin main
you will have to run npm run build
afterwards to apply the changes
Enabling the last updated footer
Editing the docusaurus config file
- Javascript
- Typescript
We will need to first make some changes in your docusaurus.config.js
file
nano docusaurus.config.js
Find the following Snippet of code
presets: [
[
'classic',
{
docs: {
routeBasePath: '/', // Serve the docs at the site's root
sidebarPath: './sidebars.js',
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: false, //{
// showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
// },
theme: {
customCss: './src/css/custom.css',
},
} satisfies Preset.Options,
],
],
Add the following lines in the docs
section
showLastUpdateAuthor: true,
showLastUpdateTime: true,
The snippet of code should now look like this
presets: [
[
'classic',
{
docs: {
showLastUpdateAuthor: true,
showLastUpdateTime: true,
routeBasePath: '/', // Serve the docs at the site's root
sidebarPath: './sidebars.js',
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: false, //{
// showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
// },
theme: {
customCss: './src/css/custom.css',
},
} satisfies Preset.Options,
],
],
We will need to first make some changes in your docusaurus.config.ts
file
nano docusaurus.config.ts
Find the following Snippet of code
presets: [
[
'classic',
{
docs: {
routeBasePath: '/', // Serve the docs at the site's root
sidebarPath: './sidebars.ts',
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: false, //{
// showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
// },
theme: {
customCss: './src/css/custom.css',
},
} satisfies Preset.Options,
],
],
Add the following lines in the docs
section
showLastUpdateAuthor: true,
showLastUpdateTime: true,
The snippet of code should now look like this
presets: [
[
'classic',
{
docs: {
showLastUpdateAuthor: true,
showLastUpdateTime: true,
routeBasePath: '/', // Serve the docs at the site's root
sidebarPath: './sidebars.ts',
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
blog: false, //{
// showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
// editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
// },
theme: {
customCss: './src/css/custom.css',
},
} satisfies Preset.Options,
],
],
Adding the last updated to Font Matter
Open up one of your .md
files in /docs
Add the following lines to the top of the file
---
last_update:
author: custom author name
---
You will have to add this too all of your .md
files
Now everytime you run git pull origin main
and npm run build
it will update the last_updated
line from git history
References
Font Matter Options
Introduction to GIT
How to Push Existing Project to GitHub
GitHub Remote Repositories
Adding SSH key to GitHub
Generating SSH key to local System