Build an MkDocs Material Site Using GitHub Only (No Local Install)¶
This guide walks you through building and publishing a Material for MkDocs site entirely within GitHub, using GitHub Actions.
Step 1: Create a New GitHub Repository¶
- Go to https://github.com/new
- Name it something like
Documentation - Click "Create repository"
Step 2: Create Branch for GitHub Pages¶
The branch is required to write the html data for displaying the mkdocs site.
gh-pages
Step 3: Add mkdocs.yml and Docs Folder¶
Create the following files using GitHub’s web interface:
mkdocs.yml¶
You can customize this later. See: https://squidfunk.github.io/mkdocs-material/setup/
You can also view a working example of an mkdocs.yml file here:
- https://github.com/defendthehoneypot/documentation/blob/main/mkdocs.yml
- Ensure you change the following lines to match your site before commiting
site_url: https://defendthehoneypot.github.io/documentation
repo_url: https://github.com/defendthehoneypot/documentation
Live site example:
- https://defendthehoneypot.github.io/documentation/
docs/index.md¶
Create a folder named docs/ and add a file named index.md:
# Welcome to My Docs
This site is built with [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/).
Step 4: Add GitHub Actions Workflow¶
Create this file in your repository:
.github/workflows/gh-pages.yml
name: Deploy MkDocs site to GitHub Pages
on:
push:
branches:
- main # Or 'master', depending on your default branch
permissions:
contents: write # Required to allow pushing to gh-pages
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: '3.x'
- name: Install dependencies
run: pip install mkdocs-material
- name: Deploy to GitHub Pages
run: mkdocs gh-deploy --force
Step 5: Allow GitHub Actions to Push to the Repository¶
- Go to your repo → Settings → Actions → General
- Scroll to "Workflow permissions"
- Select:
[x] Read and write permissions - Click "Save"
This gives the Action permission to push to the
gh-pagesbranch.
Step 6: Configure GitHub Pages¶
- Go to Settings → Pages
- Under Source, select:
- Branch:
gh-pages - Folder:
/ (root) - Click "Save"
Step 7: Understanding the nav Section (Optional)¶
The nav section in mkdocs.yml lets you define a custom navigation structure for your site.
Without nav (automatic)¶
If you do not specify nav, MkDocs will automatically create navigation by scanning your docs/ folder alphabetically.
Example:
If your docs/ folder has:
MkDocs will display:
- Home
- About
- Faq
Sorted alphabetically (or by file system order).
With nav (manual control)¶
To control order and display names, use nav:
site_name: My Docs
theme:
name: material
nav:
- Home: index.md
- About This Site: about.md
- FAQ: faq.md
This lets you:
- Change link titles
- Set custom order
- Nest pages into groups
When to use nav¶
Use nav if:
- You want to control page order
- You want custom link names
- You want grouped or nested sections
Leave it out if:
- Your site is very small
- You’re okay with alphabetical order
Step 8: Your Site Is Live¶
After you push to main, GitHub Actions will build and deploy your site.
Visit:
(Replace with your GitHub username and repo name)
Step 8: Updating Content¶
Any time you update docs/ or mkdocs.yml, GitHub Actions will automatically redeploy your site.
Resources¶
- MkDocs: https://www.mkdocs.org/
- MkDocs Material: https://squidfunk.github.io/mkdocs-material/