Part 1: Setting Up Your Live Website

In this section, you'll create your GitHub account, choose a template, and publish your website live on the internet. By the end of this part, you'll have a working website with its own URL.

Step 1: Create Your GitHub Account

GitHub is a platform where developers store and share code. It's also where you'll host your website for free.

What to do:

  1. Open your web browser and go to GitHub.com
  2. Click the "Sign up" button in the top right corner
  3. Choose one of these sign-up methods:
    • Sign up with Google: If you have a Gmail account, this is the fastest option
    • Sign up with Email: Enter your email address, create a password, and choose a username
  4. Complete the verification process
  5. Follow any additional setup steps GitHub shows you
Note: If you already have a GitHub account, simply log in and skip to Step 2.
Tip: Your GitHub username will appear in your website URL like this: https://your-username.github.io. Choose a professional username if you plan to use this website for your portfolio or resume.

Step 2: Choose a Website Template

Instead of building a website from scratch, you'll start with a professionally designed template.

What to do:

  1. Open this link in a new tab: Template Gallery
  2. Browse through the available templates
  3. Consider these factors when choosing:
    • Purpose: Portfolio, resume site, or personal blog?
    • Style: Minimalist, colorful, modern, or professional?
    • Layout: One-page or multi-page site?
    • Features: Portfolio gallery, blog, contact form?
  4. Take your time to find a template you'll be happy with
Important: Choosing your template is an important decision. If you want to change templates later, you'll have to start over from Step 1. Choose carefully!

Step 3: Access the Template Repository

Once you've chosen your template, you need to access its code repository.

What to do:

  1. On your chosen template card, look for the button that says "GitHub Repo"
  2. Click this button
  3. You'll be redirected to GitHub, where you'll see the template's repository page
Screenshot showing the github repo button on template gallery
What is a repository? A repository (or "repo") is like a folder that holds all the files for a project. In this case, it holds all the files for your website: HTML, CSS, images, and more.

Step 4: Create Your Repository

Now you'll make your own copy of the template.

What to do:

  1. At the top of the repository page, look for a green button that says "Use this template"
  2. Click it and select "Create a new repository"
    3. screenshot showing the green use this template button
  3. Fill out the repository form:
    • Repository name: Enter a name like my-portfolio or personal-site
    • Description: Add a brief description like "Personal portfolio website"
    • Visibility: Keep it set to Public
  4. Click "Create repository"
Template card showing the GitHub Repo button
Critical: Your repository MUST be set to "Public" for GitHub Pages to work. A private repository won't create a live, publicly accessible website.

Step 5: Understanding Your Repository

You're now looking at your repository homepage. Here's what you'll see:

Quick Analogy: Think of building a website like building a house:
  • HTML is the structure (walls, rooms, doors)
  • CSS is the decoration (paint, furniture, style)
  • JavaScript is the functionality (light switches, appliances)

Step 6: Make Your Website Live

This is the most important step! Right now, your repository exists, but it's not a live website yet.

What to do:

  1. Click on Settings in the top navigation bar
  2. In the left sidebar, scroll down and click on Pages
  3. Under "Branch", click the dropdown that says "None"
  4. Select "main"
  5. Make sure the folder says "/ (root)"
  6. Click Save
  7. Wait 2-3 minutes for GitHub to build your website
Screenshot showing the github pages setup Screenshot showing the github pages setup

After waiting and refreshing the page, you'll see a message:

Success! Your site is live at https://your-username.github.io/repository-name/
Screenshot showing website url for your github pages live website
  1. Click the "Visit site" button to see your live website
  2. Congratulations! You now have a real website on the internet!

Step 7: Quick Access Setup

Add your website URL to your repository homepage for easy access.

What to do:

  1. Copy your website URL from Settings → Pages
  2. Click the <> Code tab to go to your repository homepage
  3. On the right side, find the "About" section
  4. Click the settings gear icon next to "About"
  5. Paste your website URL in the "Website" field
  6. Click "Save changes"
Done! Now your website URL appears in the About section. You can click it anytime to quickly visit your live site!

Congratulations! Part 1 Complete!

You've successfully:

  • Created your GitHub account
  • Chosen and copied a professional template
  • Created your repository
  • Published your website live on the internet
  • Set up quick access to your site

You now have a real website with its own URL that anyone can visit!

What's Next? In Part 2: Editing, you'll learn how to replace the template's placeholder content with your own personal information, change text, add your photos, and make the website truly yours!
← Back to Overview Continue to Part 2 →

This tutorial was created for students in the Master of Arts in Educational Innovation, Technology, and Entrepreneurship (MEITE) program at UNC Chapel Hill School of Education.