This repository is an example of deploying a Docusaurus website to GitHub Pages using GitHub Actions.
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
.
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:
-
Create the constants
organizationName
andprojectName
const organizationName = "<github-organization-name>"; const projectName = "<repository-name>";
Set the URL
const config = { // (...) url: `https://${organizationName}.github.io`, }; const baseUrl = /${projectName}/`;
Configure the base URL
const config = { // (...) baseUrl: `/${projectName}/`, };
Set the
organizationName
andprojectName
optionsconst organizationName = "<github-organization-name>"; const projectName = "<repository-name>"; const config = { // (...) organizationName, projectName, };
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/`, }, }), ], ], };
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 theactions/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
234432's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.