GitHub Pages 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. 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.
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
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 mainto
git push origin masterbelow.
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
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.