How to Build and Deploy Your Website with Stattic and GitHub Pages
With Stattic, you can easily build a static site and deploy it to GitHub Pages for free hosting. This guide will walk you through how to create your site, export the build files to a GitHub repository, and automate your workflow to push updates live.
Prerequisites
Before we start, make sure you have the following:
- GitHub Account: Sign up if you don't have one.
- Git Installed: You can download and install Git from here.
- Stattic Installed: Make sure you have Stattic set up on your machine. If not, follow the installation instructions.
Step 1: Build Your Site with Stattic
First, generate your site's content using Stattic.
Create Your Site Content
- Add Markdown files to the
content/posts/
folder for blog posts. - Add Markdown files to the
content/pages/
folder for static pages like About or Contact.
- Add Markdown files to the
Customize Your Site
- Modify the templates in the
templates/
folder for custom layouts. - Customize your styles in
assets/css/stattic.css
.
- Modify the templates in the
Run the Build Command
In your terminal, navigate to your project folder and run:
python3 stattic.py --output ./build --fonts "Quicksand"
This command generates the static files in the
./build
directory. You can also pass a font list with the--fonts
option to use fonts from Google Fonts. If you don't specify a font, it defaults to Quicksand.
Step 2: Set Up a GitHub Repository
Create a New GitHub Repository
- Go to GitHub and create a new repository. Name it
your-username.github.io
if you want to use GitHub Pages (replaceyour-username
with your actual GitHub username).
- Go to GitHub and create a new repository. Name it
Clone the Repository Locally - Open your terminal, navigate to the directory where you want to clone your repository, and run:
git clone https://github.com/your-username/your-repo-name.git
Replace
your-username/your-repo-name
with your GitHub username and repository name.
Step 3: Copy Your Build Files to the Repo
Move Your Build Files - After running the build command, copy the contents of the
./build
directory into your GitHub repository:cp -r build/* your-repo-name/
Navigate to the Repository Folder - Navigate into your repository directory:
cd your-repo-name
Step 4: Push Your Site to GitHub Pages
Stage and Commit the Files - Add the files to your Git repository:
git add .
Then commit them:
git commit -m "Initial commit for static site"
Push to GitHub - Push the changes to your GitHub repository:
git push origin main
Step 5: Enable GitHub Pages
Configure GitHub Pages - Go to your GitHub repository, click on the Settings tab, then scroll down to GitHub Pages.
- Under Source, select
main
as the branch and choose/ (root)
as the directory. - Click Save.
- Under Source, select
Access Your Site - After a few minutes, your site will be live at
https://your-username.github.io/
.
Step 6: Automate Future Builds
Whenever you update your content, rebuilding and deploying the site is quick and easy.
Rebuild Your Site - After adding new posts or making changes, run the build command again:
python3 stattic.py --output ./build --fonts "Quicksand"
Copy and Push the New Build - Copy the updated files to your GitHub repository:
cp -r build/* your-repo-name/
Navigate to the repository:
cd your-repo-name
Then, add, commit, and push the changes:
git add . git commit -m "Updated content" git push origin main
GitHub Pages Auto-Update - GitHub Pages will automatically rebuild your site, and your updates will go live.
Using Stattic with GitHub Pages is a fast and efficient way to manage and host static websites. You can:
- Generate optimized static files with Stattic.
- Use GitHub Pages for free, easy hosting.
- Automate your updates with Git's simple push commands.
With no databases and minimal setup, you can enjoy a streamlined and secure static site. It's fast, secure, and lightweight---perfect for blogging, portfolios, documentation, and more.