Exporting to GitHub Pages

GitHub Pages (opens new window) is a popular service which turns a git repository into a static website. In this tutorial, we'll show you how to integrate it with Bootstrap Studio, so that you can update your website automatically when exporting.

To do this, we'll write a Bootstrap Studio export script. These scripts are run automatically after you export your design from the application, and let you to do all sorts of post processing on your website.

Setting Up SSH

To be able to publish to github from our script, you need to go through GitHub's SSH setup (opens new window). When the script is run you won't be able to enter a passphrase, so you need to set up either a passwordless key, or (preferrably) one which is unlocked when you login.

Creating a Repo

GitHub Pages is straightforward to setup. You just need to create a public repository with the name <username>.github.io. When you commit and publish to this repo, github will update your website. You can learn more here (opens new window).

The Export Script

After everything above is setup and you're able to git push without having to enter a password, we can proceed writing the script.

Note

GitHub recently changed their default branch from master to main. We've updated the scripts below to reflect this. If your branch is still named master, you will need to change git push origin main to git push origin master below.

Mac/Linux

For Mac and Linux, we'll be writing a shell script. Save the code below as a file somewhere on your hard drive (we are assuming the name export.sh in this example).

#!/bin/bash

cd $1
git add -A
git commit -m "Website update."
git push origin main

Then, make the script executable with the following command:

chmod +x export.sh

Windows

For Windows, we'll be writing a Batch file. This is basically a collection of commands that are run one after the other in a hidden CMD window. Save the code below as a file somewhere on your hard drive with a .bat extension (we are assuming the name export.bat in this example).

@ECHO  OFF
CD %1
git add -A
git commit -m "Website updates."
git push origin main

TIP

You can learn more about export scripts in our other tutorial.

Changing the Export Settings

Finally, we need to tell Bootstrap Studio to run your script upon export. With your design loaded, open the Settings dialog and select the Export entry on the left. Then, expand the Advanced section, click the Browse button and locate your export script.

Finally, click Save to close the dialog. Now whenever you export your design, your changes will be committed automatically and pushed to GitHub. This will kick their build process into action and your changes will appear online at https://<username>.github.io within a few seconds.