Skip to main content

Connecting to GitHub

Adding Last Updated Feature​

Official Docs can be found here. Link

Example

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.

GitHub Settings

In the "Access" section of the sidebar, click SSH and GPG keys.

SSH and GPG keys

Click New SSH key

New SSH key

You should now see this screen

Paste key

note

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

Generate Keys

Recommended

You do not need to enter a passphrase but it is recommended for security

warning

If you do use a Passphrase, please keep it safe as you will need it every time you run Git pull or Git push

Take note of the Key location, we will need it in the next step.

Run the following command and copy the contents of the result

cat /root/.ssh/<id_key.pub>
info

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

key

Press Add SSH key

Creating a local .git repo​

Go to the root directory of your website

note

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

Repo URL

Run this command to add your remote repo

git remote add origin <SSh Repo URL>
Example

[email protected]:TrueBankai416/BankaiTechDocs.git

Security​

Installing talisman​

Go to the root directory of your website and run the following

curl --silent  https://raw.githubusercontent.com/thoughtworks/talisman/main/global_install_scripts/install.bash > /tmp/install_talisman.bash && /bin/bash /tmp/install_talisman.bash

Setting Up GitLeaks​

Creating a GitHub API Key​

Click the user icon at the top right and go to Settings

GitHub Profile

On the bottom left go to Developer Settings

GitHub Developer Settings

Creating a new Token (classic)​

Click on Tokens (classic) and then Generate a new Token

GitHub Tokens

Name the new Token and Select an Expiration Date

info

It is recommended that you set an expiration date instead of having no Expiration, For security reasons.

Check the Repo and Projects checkboxes and Generate the Token

Token Repo Token Project

Creating Action Secrets for GitLeaks​

Go to Settings and then Secrets and Variables > Actions and create a new Repository Secret

GitLeaks Secret

For the name, type in GIT_TOKEN

Paste your GitHub API Key into the secret field and then save.

Creating the GitLeaks Workflow Action​

Go to Actions and then Click New Workflow

GitLeaks

Set up a New Workflow

Workflow

Paste the Following Snippet

name: gitleaks
on:
  pull_request:
  push:
  workflow_dispatch:
  schedule:
    - cron: "0 4 * * *" # run once a day at 4 AM
jobs:
  scan:
    name: gitleaks
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: gitleaks/gitleaks-action@v2
        env:
          GITHUB_TOKEN: ${{ secrets.GIT_TOKEN }}
          GITLEAKS_NOTIFY_USER_LIST: "@<YOUR_GITHUB_USER>"
Running the Action​

Run the New GitLeaks Workflow

Run Workflow

Pushing to GitHub​

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

note

When you run git pull origin main you will have to run npm run build afterwards to apply the changes

Editing the docusaurus config file​

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,
    ],
  ],

Adding the last updated to Font Matter​

note

By default it will show the GitHub user that last updated the file. Setting this will override the GitHub name.

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
---

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

Buy me a beer

💬 Discord Community Chat

Join the conversation! Comments here sync with our Discord community.

💬 Recent Comments

Loading comments...
💬Join Discord
☕Buy me a coffee