How to Build and Deploy Your Website with Stattic and GitHub Pages

Sep 28, 2024 · Robert

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.
- Customize Your Site
- Modify the templates in the templates/ folder for custom layouts.
- Customize your styles in assets/css/stattic.css.
- 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 --fontsoption 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 (replace your-username with your actual GitHub username).
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.
- 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.