DEV Community

Cover image for Deploy Your Portfolio Free with GitHub Pages (and Take It to AWS Next)
Vishal Patil
Vishal Patil

Posted on

Deploy Your Portfolio Free with GitHub Pages (and Take It to AWS Next)

#github #aws #webdev #beginners

A portfolio that only lives on your laptop helps no one. A live link on your resume helps everyone who reads it.

In this guide I show how to put a static portfolio (HTML, CSS and JavaScript) online for free using GitHub, GitHub Desktop and GitHub Pages, with no command line needed. At the end, I show how the same files can move to AWS as your next step.

Visit my portfolio: https://vishalpatil-devops-aws.github.io/portfolio/

What you need

Requirement Details
GitHub account Free account at github.com
GitHub Desktop Free app from desktop.github.com
Portfolio files A folder with index.html, plus css/, js/ and images/
File Explorer To extract the ZIP and copy files

The workflow in short: prepare the files, create a repository named <username>.github.io, clone it with GitHub Desktop, copy your files in, commit and push, then turn on GitHub Pages.

Step 1: Prepare the portfolio

  1. In File Explorer, right-click your portfolio ZIP and choose Extract All..., then click Extract.
  2. Open the extracted folder and check that the main page is named exactly index.html.
  3. Double-click index.html to test it in your browser.

Tip: In File Explorer click View > Show > File name extensions, so you can be sure the file is index.html and not index.html.txt.

Step 2: Create a GitHub account

  1. Go to github.com and click Sign up.
  2. Enter your email, password and username, then verify your email.

Note: Your username becomes your website address. If your username is vishal-dev, your site will be https://vishal-dev.github.io/. Choose a professional username.

Step 3: Install GitHub Desktop

  1. Download it from desktop.github.com and run the installer.
  2. Click Sign in to GitHub.com, then Authorize desktop in the browser.
  3. On the Configure Git screen, enter your name and email, then click Finish.

Step 4: Create the repository

For a personal portfolio the repository name must be exactly <username>.github.io.

  1. On GitHub click + > New repository.
  2. Name it <username>.github.io and set it to Public.
  3. Tick Add a README file and click Create repository.

You can also create the repository from GitHub Desktop (File > New repository), but creating it on github.com first is simpler for beginners.

Step 5: Clone the repository

  1. In GitHub Desktop click File > Clone repository....
  2. Select <username>.github.io from the GitHub.com tab and click Clone.
  3. Click Repository > Show in Explorer to open the local folder.

Step 6: Copy your portfolio files

  1. Open your extracted portfolio folder, press Ctrl + A to select everything, then Ctrl + C.
  2. Open the cloned folder and press Ctrl + V.

Warning: Copy the contents of the portfolio folder, not the folder itself. index.html must sit at the top level of the repository, or GitHub Pages will show a 404 error.

Step 7: Commit and push

  1. In GitHub Desktop, check that your files are listed under Changes.
  2. Type a summary such as Add portfolio website and click Commit to main.
  3. Click Push origin.
  4. Open your repository on github.com and confirm the files are there.

Step 8: Enable GitHub Pages

  1. In your repository click Settings > Pages.
  2. Under Build and deployment, set Source to Deploy from a branch.
  3. Choose branch main and folder / (root), then click Save.
  4. Open the Actions tab and wait for a green tick on "pages build and deployment". It usually takes 1 to 3 minutes.

Step 9: Open your live site

Visit https://<username>.github.io/ and check every section on desktop and on your phone. Add the link to your LinkedIn profile, resume and GitHub profile.

Updating your portfolio later

  1. Edit your files in the cloned folder.
  2. In GitHub Desktop write a commit message and click Commit to main, then Push origin.
  3. Wait a minute or two. GitHub Pages redeploys automatically. Press Ctrl + F5 to bypass the browser cache.

Troubleshooting

Problem Likely cause Fix
404 error index.html is in a sub-folder, or Pages is not enabled Move index.html to the repository root and check Settings > Pages
CSS or images missing Wrong path or different letter case (GitHub is case-sensitive) Match file names exactly and use relative paths like css/style.css
Site not updating Change not pushed, still deploying, or cache Push origin, check Actions for a green tick, then press Ctrl + F5
Push rejected The remote has changes you do not have Fetch origin, Pull origin, then Push origin again
Wrong branch Pages points to another branch Select the branch that holds your files in Settings > Pages
Sign-in problems Expired sign-in File > Options > Accounts, sign out and sign in again

Optional: use a custom domain

  1. Buy a domain from a registrar.
  2. Add four A records for the root domain pointing to 185.199.108.153, 185.199.109.153, 185.199.110.153 and 185.199.111.153, and a CNAME record for www pointing to <username>.github.io.
  3. In Settings > Pages > Custom domain, enter your domain and click Save, then tick Enforce HTTPS when the DNS check passes.

DNS changes can take up to 24 hours. Check GitHub's documentation for the latest values.

Next step: take it to AWS

Because the portfolio is plain HTML, CSS and JavaScript, the same files can also be hosted on AWS. That makes this a good first project for learning AWS services.

Option What it is Good for
GitHub Pages (this guide) Free static hosting from a GitHub repository A fast start with no AWS account
AWS Amplify Hosting Managed hosting that connects to your GitHub repository and redeploys on push Keeping the same GitHub Desktop workflow
Amazon S3 static website Files stored in an S3 bucket set up as a website Learning S3 basics
Amazon S3 + CloudFront (+ Route 53) S3 as origin, CloudFront for HTTPS and speed, Route 53 for a custom domain A production-style setup

A simple path: keep your GitHub repository as the source of truth, then in the AWS Console open AWS Amplify, connect GitHub, pick your repository and the main branch, and deploy. Or upload the same files to an S3 bucket, enable static website hosting, and add CloudFront and Route 53.

Warning: AWS services can generate charges. Set up an AWS Budget or billing alarm before you try them. AWS Console screens change over time, so follow the current AWS documentation for exact steps.

Final checklist

  • Portfolio extracted and index.html confirmed
  • GitHub account created and GitHub Desktop signed in
  • Public repository named <username>.github.io created and cloned
  • Files copied with index.html at the top level
  • Committed, pushed and verified on github.com
  • GitHub Pages enabled (main, / (root)) with a green tick in Actions
  • Live site opened and tested, link added to LinkedIn and resume
  • Billing alarm planned before trying AWS hosting

Conclusion

With a free GitHub account, GitHub Desktop and about 30 minutes, you can have a live portfolio at https://<username>.github.io/. From there, moving the same site to AWS is a practical way to keep learning.

Created by Vishal Patil

vishalcloudjourney

Top comments (0)