A Docusaurus website deployed to GitHub Pages using GitHub Actions.

Overview

Deploy Docusaurus website to GitHub Pages using GitHub Actions

This repository is an example of deploying a Docusaurus website to GitHub Pages using GitHub Actions.

Configuring the GitHub repository

It uses the new GitHub Pages experience with GitHub Actions to deploy the website.

Enable this experience in GitHub.com -> Repository -> Settings -> Pages -> Build and deployment -> Source by selecting GitHub Actions instead of the legacy Deploy from a branch option.

In GitHub.com -> Repository -> Settings -> Environments you should see a GitHub Environment named github-pages.

Configuring Docusaurus

Generate a Docusuarus website using the following command:

yarn create docusaurus <folder-name> classic --typescript

Make the following changes to the docusaurus.config.js configuration file:

  1. Create the constants organizationName and projectName

    const organizationName = "<github-organization-name>";
    const projectName = "<repository-name>";
  2. Set the URL

    const config = {
      // (...)
      url: `https://${organizationName}.github.io`,
    };
    const baseUrl = /${projectName}/`;
  3. Configure the base URL

    const config = {
      // (...)
      baseUrl: `/${projectName}/`,
    };
  4. Set the organizationName and projectName options

    const organizationName = "<github-organization-name>";
    const projectName = "<repository-name>";
    
    const config = {
      // (...)
      organizationName,
      projectName,
    };
  5. Configure the blog and docs edit URLs

    const config = {
      // (...)
      presets: [
        [
          "classic",
          /** @type {import('@docusaurus/preset-classic').Options} */
          ({
            // (...)
            docs: {
              // (...)
              editUrl: `https://github.com/${organizationName}/${projectName}/tree/main/`,
            },
            blog: {
              // (...)
              editUrl: `https://github.com/${organizationName}/${projectName}/tree/main/`,
            },
          }),
        ],
      ],
    };

Adding a GitHub Actions deployment workflow

Use a GitHub Actions workflow template for GitHub Pages from the actions/starter-workflows repository. Place it in .github/workflows/<workflow-name>.yml.

Add steps for building the website before the GitHub Pages actions are executed and specify the path to the actions/upload-pages-artifact:

# (...)
jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      # 👇 Build steps
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16.x
          cache: yarn
      - name: Install dependencies
        run: yarn install --frozen-lockfile --non-interactive
      - name: Build
        run: yarn build
      # 👆 Build steps
      - name: Setup Pages
        uses: actions/configure-pages@v1
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # 👇 Specify build output path
          path: build
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1
You might also like...

Whatsapp-web-clone MERN project deployed on vercel and heruku

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 17, 2022

Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tornado.Cash.

🕵️‍♂️ TORN Detector Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tor

Dec 24, 2022

serverless plugin to setup custom domain for lambdas deployed with function url.

serverless-aws-function-url-custom-domain Automatically creates AWS CloudFront distribution and Route 53 records to AWS Lambda with Function URL (no a

Nov 27, 2022

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integration.

MongoDB Starter – Developer Directory A developer directory built on Next.js and MongoDB Atlas, deployed on Vercel with the Vercel + MongoDB integrati

Dec 20, 2022

A Notion themed portfolio developed with NextJS, deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jul 19, 2022

A simple daily news, used the api of Zhihu Daily, deployed on Vercel.

Daily News Introduction | 介绍 A simple daily news website, used the api of Zhihu Daily, deployed on Vercel. Inspired by @zkeq/news. 一个简单的,使用知乎日报api的,部署

Jul 26, 2022

Student reviews for OMS courses. Built with NextJS and Typescript. Backed by Sanity CMS. Deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dec 3, 2022

An example T3 app containerized with Docker, Docker Compose, and deployed on Railway

Create T3 App This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack. What's next? How do I make an app with this? W

Dec 19, 2022

Track Apple software update changes with Github Actions

What is this? This repo is scraping known Apple software update URLs and keeps the results in recursively sorted (and therefore diffable) JSON files.

Dec 8, 2022
Owner
Lars Gyrup Brink Nielsen
Co-Founder of This is Learning, Tech Writer, Tech Speaker, FOSS Maintainer, Microsoft MVP, GitHub Star, Author of "Accelerating Angular Development with Ivy".
Lars Gyrup Brink Nielsen
Deploy an Architect project from GitHub Actions with keys gathered from aws-actions/configure-aws-credentials

Deploy an Architect project from GitHub Actions with keys gathered from a specific AWS IAM Role federated by an IAM OIDCProvider. CloudFormation to cr

Taylor Beseda 4 Apr 6, 2022
Dyte's documentation portal built with Docusaurus.

Dyte Docs Dyte's documentation portal, built with Docusaurus. Explore the docs » View Demo · Report Bug · Request Feature Table of Contents About the

Dyte 70 Jan 1, 2023
Create a badge using GitHub Actions and GitHub Workflow CPU time

Generated Badges Create a badge using GitHub Actions and GitHub Workflow CPU time (no 3rd parties servers) Install $ npm i generated-badges -g Command

小弟调调™ 9 Dec 30, 2022
This is a simple boilerplate for a Deno website, deployed with Deno Deploy.

Simple Deno Website Boilerplate This is a simple website boilerplate built using Deno and deployed using Deno Deploy. Demo at simple-deno-website-boil

Bruno Bernardino 15 Dec 3, 2022
My personal website built with Next.js, TypeScript, twin.macro, Framer Motion, MDX and deployed on Vercel.

chrvaskos.com My personal website / blog built with some of my favorite technologies where I can showcase my work and write articles about anything ne

Vasilis Christoforidis 4 Mar 25, 2022
Get-A-Room example application using Domain Driven Design and Clean Architecture. Written in TypeScript and deployed to AWS with a serverless stack.

Domain Driven Microservices on AWS in Practice This project provides a Domain Driven Design & Clean Architecture-informed, multi-service event-driven

Mikael Vesavuori 5 Dec 31, 2022
Assume AWS IAM Roles using SAML.to in GitHub Actions

assume-aws-role-action This action enables workflows to obtain AWS Access Credentials for a desired IAM Role using AWS IAM SAML and a GitHub Actions R

null 180 Dec 31, 2022
Sync pages from Notion to GitHub to be used as a static website (JAM)

notion-jam Sync pages from Notion to GitHub to be used as a static website (JAM) Usage Quick Start Create a new Notion Integration Add Notion secret t

Victor 9 Nov 15, 2022
First smart contract deployed on Rinkeby.

Inbox-Contract First smart contract deployed on Rinkeby. It has a basic constructor which accpets a string and assigns the string to the message varia

Stanley Moukhametzianov 1 Dec 26, 2021