Publish your web portfolio for free with GitHub Pages — in 5 minutes
GitHub is AWESOME and we all know that but not just for version controlling. It also let’s you publish static website for Free.
Without further ado, let’s start by publishing one.
Steps we’ll be covering here are:
- [Optional] Create a Static Website with https://unicornplatform.com or you can using existing one if you have it with you already.
- Create an Organization account (with your personal GitHub account).
- Create new repository on your organization account.
- Push your static website to GitHub.
- [Bonus] Custom Domain
Step-1: Create your website with Unicorn Platform
Create a completely responsive and amazing landing page less than a minute, in just 7 steps:
- Visit this URL : https://unicornplatform.com/app/
- 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
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
- In the upper-right corner of any page, click your plus(+) icon.
- Click New Organization from the menu.
- Under Organization Name, type a name for your startup.
- Under Billing email, type the email where receipts for your organization’s paid plan should be sent.
- OPTIONALLY if your organization account is owned by a business, select This account is owned by a business, then type your company’s name.
- Under “Choose your plan”, select a FREE billing plan.
- Lastly, click Create organization.
- Skip the rest of steps, you’ll be directed to your organizations page, something like this:
Step-3: Create a new repository for your site
- Click Create a new repository button
- Under the Repository name, make sure that it matches the format [organization name].github.io
- In my organization name is foobarweb, so I’ll name my repo as foobarweb.github.io
- Make the repository public, as private is paid.
- Click Create repository.
- 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
- Initialize your repo
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.
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
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:
- Add a CNAME file with your custom domain
- In your repository settings update Custom domain field with your own domain
- Now go to the admin panel of the hosting service you’ve purchased your domain from
- Find DNS settings and add the following:
Create CNAME record with Host set to www and the IP Address to foobarweb.github.io
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 “18.104.22.168”.
- Add a new record. Select “A Record”, set the Host to “@” and the IP Addressto “22.214.171.124”.
- Add a new record. Select “A Record”, set the Host to “@” and the IP Addressto “126.96.36.199”.
- Add a new record. Select “A Record”, set the Host to “@” and the IP Addressto “188.8.131.52”.
- You’re done!
NOTE: — Just wait for DNS changes to propagate. This can take up to 48 hours.
Thanks for reading. 😊