A Student’s Guide to Creating and Publishing a Website
Using Bootstrap Studio and GitHub Pages to design and host your personal website.
Personal websites have become an increasingly popular way to display your work and achievements but many people still shy away from creating them because they either don't know how, assume it is expensive, or just don't have the time. Whether you have never opened a text editor before or are an experienced programmer who doesn’t want to spend time designing website components, this guide shows you how to quickly get a professional site up and running on a custom domain without writing any code.
This guide is primarily aimed at showing students how to take advantage of the GitHub Student Developer Pack by designing and publishing their own website on a custom domain for free. Non-students can follow this guide as well but software like Bootstrap Studio will not be free.
For an example of a website designed completely in Bootstrap Studio you can visit my personal website here and view the repository here. You can also try Bootstrap Studio in the browser here if you want to test it out before you download and start designing.
Note: With the GitHub student pack you can get your first year free but, after that, you will have to pay to renew your custom domain each year. The cost depends on which domain ending you choose (.com, .net, .engineering, etc.) and where you buy it from but a .com domain will cost about $10 a year. Alternatively, you can host your website completely free at yourusername.github.io
Setup Your GitHub Account
Create a GitHub.com account. Once you have done that go to https://education.github.com/pack/offers and follow the steps to verify your student status. It normally just requires you to enter your school email address.
Create a Website Repository:
Create a new repository with this name format USERNAME.github.io . Make sure that it is set to public and is initialized with a README.
Turn on GitHub Pages:
Go to the settings tab in the repository you just set up. Scroll down to the “GitHub Pages” section. Select the branch you want to deploy from.
Note: Your default branch will most likely be “master” mine shows main because I rename all my default branches to main.
Create the Website
Download Software:
Go back to https://education.github.com/pack/offers and follow the instructions to download and activate both GitKraken and Bootstrap Studio. GitKraken is optional but makes pushing and pulling your repository much easier and, as a student, you get GitKraken Pro for free so why not take advantage.
Clone Repository:
Open GitKraken and sign in using your GitHub account. Select “Clone a repo” then from GitHub.com and select the repository you just created from the drop-down. Take note of the folder you clone it into as that will be needed later.
Design Website:
Leave that cloned repository alone for now as we won’t need that until later. It is now time to open bootstrap studio and design your website.
You can either start from blank if you have an idea of your own or from a template to make it a little easier.
I'm not going to go much more into the design as there are better and more in-depth guides out there that explore this (here for example). This guide is mainly focused on getting your website published. If you need help with your design you can check out tutorials at https://bootstrapstudio.io/tutorials/ or leave a comment below and I will do my best to help.
Turn on preview to see what your website looks like in the browser. Once it is on just go to any of the display URLs in your browser and you will see a live version of your website.
Note: Make sure that your homepage is named index.html. This is the HTML page that will be rendered at yourdomain.com
Save and Export Website:
Once you are happy with your website it’s time to save and export your website. Saving it saves the .bsdesign file that bootstrap studio can read while exporting it produces the HTML and CSS. You should both save and export to the folder we cloned earlier.
Push:
Now if you go back to GitKraken on the right side you should see a bunch of changes. You are going to want to “Stage All”, type a commit message, and commit your changes. After that, we need to push those changes to GitHub by using the “push” icon on the top.
Once it successfully pushes your website should be published at USERNAME.github.io but we want to publish it at a custom domain.
Set Up the Custom Domain
Buy a Domain:
Buy a domain from any provider you choose. You can get a free year of certain domains by looking at the GitHub student pack, or .xyz domains are only $1 for the first year at porkbun.
I choose to host my domains at porkbun as they seem to be one of the cheapest around and I have never had any problems with them but for whichever provider you choose the next steps will be very similar.
Configure DNS:
In your domain settings, you should see a way to edit or configure DNS. Add these entries. Your domain should be everywhere you see jack.engineering and your GitHub username should replace Jack-alope.
Point Repository at Domain:
Go back to the setting of you repository and where you see custom domain enter the domain you just bought.
Note: You may not be able to enforce https right away. Just wait an hour or two and come back. Your website will still be available at http://yourdomain.com while you wait.
Editing:
One of the benefits of this method is that it makes it incredibly easy to update or completely redesign your website. Just open the .bsdesign file, make whatever changes in bootstrap studio you want, export it, and push the exported files back to GitHub as shown earlier. Within a few minutes, you should see your updated website.
Note: If you decide to delete entire files in Bootstrap Studio it will not delete them from the export folder. You will need to delete them manually.
Thank you!
Thank you for reading, I hope this guide helped you get your website up and running. If anything was unclear or you had any trouble designing and deploying your website please leave a comment or get in touch.
Resources:
- GitHub student pack: https://education.github.com/pack/offers
- Bootstrap Studio Tutorials: https://bootstrapstudio.io/tutorials/
- Bootstrap Studio Guide: https://medium.com/kotlin-lubumbashi/how-to-make-a-website-simply-and-quickly-with-bootstrap-studio-1ce01gigithubthub0c383ac
- GitHub Pages: https://pages.github.com/
- GitHub Pages Custom URL Docs: https://docs.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site
