Publish your web portfolio for free with GitHub Pages — in 5 minutes

Zain Zafar
Oct 28, 2018 · 4 min read

GitHub is AWESOME and we all know that but not just for version controlling. It also let’s you publish static website for Free.

https://pages.github.com

Without further ado, let’s start by publishing one.

Steps we’ll be covering here are:

  1. [Optional] Create a Static Website with https://unicornplatform.com or you can using existing one if you have it with you already.
  2. Create an Organization account (with your personal GitHub account).
  3. Create new repository on your organization account.
  4. Push your static website to GitHub.
  5. [Bonus] Custom Domain

Step-1: Create your website with Unicorn Platform

A landing page generated using Unicorn Platform, Amazing isn’t it?

Create a completely responsive and amazing landing page less than a minute, in just 7 steps:

  1. Visit this URL : https://unicornplatform.com/app/
  2. Select Project type

3. Select Platform (it’s just for their survey)

4. You’ll be presented with list of templates, select the one you like

Click ‘Start’ to continue

5. Click Export Page at the bottom left corner of the page

6. Download assets & .html files

7. You’ll get assets and index.html files put these in the same directory.


Step-2: Creating a new organization from scratch

  1. In the upper-right corner of any page, click your plus(+) icon.
  2. Click New Organization from the menu.
  3. Under Organization Name, type a name for your startup.
  4. Under Billing email, type the email where receipts for your organization’s paid plan should be sent.
  5. OPTIONALLY if your organization account is owned by a business, select This account is owned by a business, then type your company’s name.
  6. Under “Choose your plan”, select a FREE billing plan.
  7. Lastly, click Create organization.
  8. Skip the rest of steps, you’ll be directed to your organizations page, something like this:
Organization page for foobarweb

Step-3: Create a new repository for your site

  1. Click Create a new repository button
  2. Under the Repository name, make sure that it matches the format [organization name].github.io
  3. In my organization name is foobarweb, so I’ll name my repo as foobarweb.github.io
  4. Make the repository public, as private is paid.
  5. Click Create repository.
  6. Your repository is ready now.

Last-Step: Publish your web page

Lastly we’ll push our landing page code to the remote repository, we just created.

Open your project directory inside a terminal or command line and start type following commands one by one

  1. Initialize your repo
git init

2. Set remote origin for you repository

git remote add origin https://github.com/foobarweb/foobarweb.git

3. State & Commit all your project files

git add .git commit -m "Initial Commit"

3. Push your code to GitHub

git push -u origin master

4. Now go to foobarweb.github.io & you’ll see a your website is live.

It’s published on foobarweb.github.io

NOTE: The first time you generate your site it will take about 10 minutes for it to show up. Subsequent builds take only seconds from the time you push the changes to your GitHub repository


😎 BONUS!

You need to BUY your custom domain from GoDaddy, namecheap, AWS or any other services you prefer.

You can setup Custom Domain for your website with following steps:

  1. Add a CNAME file with your custom domain
  2. In your repository settings update Custom domain field with your own domain
  3. Now go to the admin panel of the hosting service you’ve purchased your domain from
  4. Find DNS settings and add the following:

CNAME

Create CNAME record with Host set to www and the IP Address to foobarweb.github.io

A-Records

Create A records that point your custom domain to the following IP addresses.

  • Add a new record. Select “A Record”, set the Host to “@” and the IP Addressto “185.199.108.153”.
  • Add a new record. Select “A Record”, set the Host to “@” and the IP Addressto “185.199.109.153”.
  • Add a new record. Select “A Record”, set the Host to “@” and the IP Addressto “185.199.110.153”.
  • Add a new record. Select “A Record”, set the Host to “@” and the IP Addressto “185.199.111.153”.
  • You’re done!

NOTE: — Just wait for DNS changes to propagate. This can take up to 48 hours.

Thanks for reading. 😊

Zain Zafar

Written by

Frontend Enthusiast, JavaScript Hacker with affinity to Design & Blogger

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade