Github Pages Site and Opening HTML File w/ Local Browser VASTLY Different

Hello all, 

I am new to all of this so I am hopeful that there is someone out there who is able to help a newbie out.

There are a few pretty obvioius differences in the images below but I am using exactly the same code as the HTML file that I am opening in Chrome in the first image is what I uploaded and Committed to the master branch.

Opening HTML file in Chrome

Opening the githubpage link in Chrome

Most Notable Differences:

  • iframe sizes are different
  • first iframe doesn’t show site
  • Heading is aligned differently (left instead of center)
  • Logo is smaller

I am VERY new to development of any kind so I may not grasp a very technical answer. I am wanting to host the page for free if possible to show it’s progress to supportive friends and family so if github is not the best solution , I would be greatful for any other recommendations as well. 

I sincerely thank you for any time you are able to give to this.

Hi, @scotluman!

I’ve just checked your site, and it seems you’ve managed to fix some of these issues in the time since you first opened this topic. Nice work! That said, I’d like to share some tips that might help to improve your experience.

First of all, it looks like your project here is built using Vue.js. GitHub Pages is designed to host static websites (i.e. those written in HTML, CSS, and JavaScript only). This includes Vue.js sites, but they need to be correctly built and configured to deploy successfully.

My guess would be that you’re currently running npm run build locally on your Mac, and then uploading the built files from the resulting /dist folder via GitHub’s web UI. This is an accessible beginner workflow, but not especially efficient. It can quickly lead to discrepancies, as edits in the GitHub web UI won’t easily sync with your local project — everything relies on manually uploading and downloading files.

To save yourself hassle in the long run, it’s worth learning how to use Git to sync your project. This GitHub Learning Lab course can walk you through the process:

If you’d like to learn Git in more depth, I’d highly recommend this video series as an introductory crash-course:

Once you’re comfortable with Git, this guide provides a neat, simple workflow for deploying a Vue.js site using Vue CLI, Git, and GitHub Pages. As well as making edits easier to manage and deploy, this guide also covers essential configuration considerations to avoid trouble such as broken URLs:

I hope that helps!