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 AccountSign 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.

  1. 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.
  2. Customize Your Site

    • Modify the templates in the templates/ folder for custom layouts.
    • Customize your styles in assets/css/stattic.css.
  3. 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

  1. 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).
  2. 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

  1. 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/

  2. Navigate to the Repository Folder - Navigate into your repository directory:

    cd your-repo-name


Step 4: Push Your Site to GitHub Pages

  1. 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"

  2. Push to GitHub - Push the changes to your GitHub repository:

    git push origin main


Step 5: Enable GitHub Pages

  1. 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.
  2. 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.

  1. Rebuild Your Site - After adding new posts or making changes, run the build command again:

    python3 stattic.py --output ./build --fonts "Quicksand"

  2. 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
    
  3. 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.


Happy Building with Stattic!