How to preview a website with GitHub Pages?

 

Step 1: Create a GitHub repository

 

Start by setting up a new repository where your website files will live.

• Open your web browser and go to https://github.com.
• Sign in to your existing account or create a new one.
• Click the New button (usually a green button near the top-left).
• Enter a repository name (for example, my-website), add a description if you like, and choose Public.
• Optionally check Add a README file to initialize your repo.
• Click Create repository.

 

Step 2: Add your website files locally

 

Prepare or create the HTML, CSS, JavaScript, and any other assets in a local folder.

• Open a terminal or command prompt.
• Navigate to the folder that contains your website project.

cd path/to/your-website

• If you didn’t initialize a Git repository yet, run:

git init

• Stage your files and make the first commit:

git add .
git commit -m "Initial commit"

• Link your local folder to the GitHub repo you just created (replace username and my-website):

git remote add origin https://github.com/username/my-website.git
git branch -M main
git push -u origin main

 

Step 3: Enable GitHub Pages in the repository settings

 

Now that your code is on GitHub, tell GitHub to host it.

• Go to your repository page (https://github.com/username/my-website).
• Click on the Settings tab at the top.
• Scroll down or use the sidebar to find the Pages section.

 

Step 4: Configure the source branch and folder

 

Choose which branch and directory GitHub Pages should use.

• Under Source, click the dropdown menu and select Main (or master if you use that).
• If your site’s entry point is in the root, leave / (root) selected. Otherwise, pick /docs if you keep your built files there.
• Click Save or Save and Continue.

 

Step 5: Wait for GitHub Pages to build your site

 

After saving, GitHub will start the publishing process.

• You’ll see a banner indicating Your site is ready to be published or a build log.
• It may take a minute or two for the first deployment.

 

Step 6: Access your live preview URL

 

Once deployment completes, GitHub Pages provides your site’s address.

• Back in the Pages section of Settings, look for GitHub Pages and find the URL, typically:

https://username.github.io/my-website/

• Click the link or paste it into your browser to view your website.

 

Step 7: Make updates and redeploy automatically

 

Any commits to the chosen branch will trigger a rebuild.

• Edit your local files and save changes.
• In your terminal run:

git add .
git commit -m "Update website content"
git push

• GitHub Pages will pick up the changes and update the live site.

 

Step 8: Troubleshoot common issues

 

If your site doesn’t appear or shows errors, consider these checks:

• Verify that index.html exists at the chosen root or /docs folder.
• Ensure there are no build errors in the GitHub Pages log (shown in Settings).
• Clear your browser cache or try in an incognito window.
• Confirm branch name matches what you configured (main vs. master).
• Check file paths for assets (CSS, JS, images) to ensure they’re correct relative URLs.