GitHub is a provider of Internet hosting for software development and version control using Git, which is widely used by application developers and tech companies. However, you can also use GitHub to host your website even if you’re not a developer.
Each GitHub account/organization can only create one GitHub Pages, but an account can create infinite organizations, which means you can effectively host unlimited websites.
In this tutorial we will be using Webflow to generate a static site (by downloading website zip file), but it should work just as well if you use other ways to generate or download a static site.
Note: Your Webflow account must at least have Account Plan Lite, and you cannot use CMS on your website. Also, you cannot use Webflow form submission if you are hosting your website with GitHub.
If you have your website ready on Webflow, here is what to do next.
a. This is the initial interface when you first created your account. Click “New” or "Create a repository" (shown in red circle) to create a new repo.
b. You will be led to a page to create a new repository. Fill in the name of the new repository (1). IMPORTANT: Your repo name must be the same as your username, as it should go something like [username].github.io. Set the permission to Public (2), and click (3) to finish the process. In my case, my GitHub username is CTRLee, so my repo name should be CTRLee.github.io.
3. Download and Install Github Desktop
a. You can download GitHub desktop after you completed the above process. Click “Set up in Desktop”, shown in the circle.
b. Click the “Download for macOS/Windows” button. The button changes depends on which Operating System you’re downloading from.
c. Login with the Browser after opening GitHub Desktop.
4. Connecting a Repo
a. Go to your Repo’s page and click “Set up in Desktop”. There will be a pop up window asking you whether you want to open GitHub Desktop, just click “Allow”.
b. Choose a repo that you want to clone. You can also define the path of your Repo yourself. When it’s done, you can click “clone”.
c. You have now successfully connected your repo with your computer’s folder. You can click “Show in Finder/Explorer” to open the folder.
5. Open your Webflow project and download the ZIP
a. Open your Webflow project and click “Export Code” on the top right corner. (Red Circle)
b. There will be an overlay window pop up. Click prepare zip to pack up the website when the page is finished loading, then click “Download Zip” to download the entire website.
c. Move your ZIP file that you just downloaded to your GitHub repo folder and unzip it.
d. Make sure your index.html is located at your repo’s root folder. Normally, you don’t have to move any files.
IMPORTANT: Make sure the index.html is at the folder you just created/selected in step 4b/c.
6. Confirm changes on GitHub Desktop
a. Open GitHub Desktop. You should see all changes in the “Changes” row on the left, including files you just added.
b. Type in the changes in the Changes (1), then click “Commit to main” (2)
c. Click “Publish Changes” in Github Desktop.
d. Refresh the repo webpage to ensure the files are uploaded correctly.
e. Click “settings” on the top row after confirming all files has been uploaded correctly.
f. Click “pages”. (2)
g. Choose “main” from the dropdown menu, then click save. Please note that your changes will take a while to become effective. If this fails, you may have entered the repo name incorrectly. Check if it's in the correct [username].github.io format.
7. Confirm changes
a. Visit [username].github.io and make sure your website displays correctly. If this fails, it's likely that the index.html file is not correctly placed in the root folder (not in any subfolders).
8. Connect your domain.
a. Select a domain for your site. If not, you can get one from sites like 101domain.
b. Go back to your repo page. Click “settings” then click “pages” in the column
c. Type in your domain in “Custom Domain”, then click Save.
d. Go back to your domain provider's page and find the DNS settings. Type in the following data in the Domain DNS settings page. You can refer to this page for the latest IP addresses.
CNAME (www) record:
Note: You may have to wait for 24 hours until the changes become effective. If you got to this far and page doesn't work, it's probably just because you need to wait longer, so please wait patiently.
Hope this helps for people with a site that they won’t change too much and have a more limited budget. This is a great method especially for lean startups and freelancers. If you are a student, Webflow offers a FREE site plan for eligible students, with the ability to remove Webflow branding (something you can’t do with Wix on a free plan) so you should do that instead.
My name is Ryan Lee. I’m a Graphic Designer, and eager to solve any visual communication problems by combining the critical thinking of an engineer and the creative ideas of an artist. I am highly versatile in that I can work across different medium, from print to digital, to help you solve your problems.
Never miss anything new again
Thank you for subscribing! You'll receive a welcome email.