Are you looking to start blogging or publish your resume online? An excellent way to start is to host a static website in GitHub pages.
GitHub allows you to host a static website off of a repository. You only need to create a repository on your GitHub account, enable the GitHub Pages settings, and add your website content. Best of all, it’s free to host a static website on GitHub!
We’ll explore how you could create the site from scratch or start with a Jekyll-based static website template and publish it to your GitHub account.
Requirements
To effectively follow:
- A GitHub account. If you don’t have one, sign up for a GitHub account first.
- A computer with Git installed. This tutorial uses an Ubuntu 22.04 computer with Git version 2.34.1.
- Visual Studio Code with the Git extension enabled (installed by default with VSCode).
Create a New Repository
The first item you must have is the GitHub repository that will host your static website content.
First, sign in to your GitHub account, go to your repositories list, and click New to create a new repository.
On the next page, type the repository name you want. Make it as simple or as creative as you want. Also, add a Description (if you wish). Leave the repository visibility Public so that anyone can see it.
Once you’re happy with the new repository setting, scroll to the bottom of the page and click Create repository.
You now have an empty repository. Copy the repository link; you’ll need it later.
Clone the Repository to Your Computer
Next, let’s clone the repository to the local computer so you can start creating your website.
Open Visual Studio Code and click the Source Control button on the activity bar. Next, click the Clone Repository button and click Clone from GitHub.
Note. Chek our tutorial on how to improve Internet security with OpenVPN Cloud.
Click the repository from the list.
Choose the location to store the repository. In this example, let’s leave it to the home directory and click Select as Repository Destination.
After cloning the repository, click Open.
Add Content to Your Static Website
Let’s now add content to the static website. You can create the website from scratch and showcase your design and coding skills immediately. Or you can start with a template, which is what this section will demonstrate.
There are many places where you can download sample static websites. Jekyll-based templates are standard since GitHub Pages uses Jekyll under the hood. But if you’re not ready to take the plunge with Jekyll, any static website template should be ok.
For this example, let’s download a sample site from HTML5UP called Zerofour.
Extract the downloaded ZIP file to your repository folder.
Go back to your VS Code window and see the repository folder is now populated.
Push your Static Website to GitHub
You now have content for your static website. Now let’s push it to your repository.
Click the Source Control button to see the list of changes. In this case, the subject of the change is every file since you’ve just added them to your local repository.
Note. If you haven’t configured Git to use your GitHub username and email, run these commands in your terminal:
git config –global user.name “YOUR USERNAME”
git config –global user.email “YOUR_EMAIL”
Type a commit message and click Commit.
When asked if you want to commit directly instead of staging the changes first, click Yes.
After committing all the changes, click Push to push the local repository changes to your GitHub repository.
And your static website files are now present in GitHub.
Publish your GitHub Static Website
So you’ve created the repository and added your static website content, but you still have to tell GitHub to serve it as a website. To do so, we’ll need to configure the repository settings and enable GitHub Pages.
On the repository page, click Settings.
Under Code and Automation, click Pages. Choose main, / (root), and click Save. This means that the website source is the main branch under the root folder.
Once saved, GitHub publishes the website and gives you the URL, as shown below. Click Visit site, and your website opens in a new tab or window.
Your GitHub static website is now up!
What’s Next?
If all goes well and your GitHub static website has been published, you can modify your website code. Once you’re ready, go ahead and commit and push your changes to GitHub to update your website. You get the flow.
Try to keep the changes to a minimum between commits. If you need to undo changes, you can do so in small batches.
Try using Jekyll to generate your static website. Granted that the learning curve may be steep, but the benefits are worth the effort.
Also, notice that the GitHub static website URL defaults to https://<your_GitHub_username>.github.io? You don’t have to be stuck with it. You can map a custom domain (if you own one) to your GitHub static website to make it more personalized and branded. But that’s a tutorial for another day. Goodluck!
