SubscribeSupport Meibby.me

How to Use Github Pages Without Git?

February 29, 2020

This tutorial will explain how you can put your website online, for free, using Github.

You don't need any previous experience to follow along, but you will need a website that you want to publish.

If you don't have your own site yet, you can use this example HTML page I created. This is what it will look like when you publish it.

Github Pages only works with typical websites that are made up of HTML, CSS and JavaScript files. If your website uses server code like PHP, Python or Node.js it won't work with Github Pages

What is Github Pages?

Github is a website people use to share their code. It keeps track of all the different code versions, lets you follow other people's projects and lets people work together on projects.

Github Pages is a Github feature that lets you put your website onlline. You upload the HTML, CSS and Javascript files your website is made up of, as well as static assets like images. Github will then host those for you.

How to publish your website

  1. Create a github acount

    Open up github and create an account.

    By the end of this tutorial the website will be accessible by going to <your-github-username>.github.io so pick the username based on that.

    You'll need to confirm your email after you sign up. This will take you to the page for creating a repository.

  2. Create a repository

    After confirming your email, you'll be taken to a page that looks like this:

    github create repo

    For the repository name, enter: <your-github-username>.github.io

    repo name
  3. Upload your files

    On the next page that appears select upload an existing file.

    github upload link

    Using the file explorer, open the folder your website is in. If you downloaded the file at the beginning of the tutorial, this would be the folder the index.html file is in.

    Drag the the website files into the upload area. If you're using the example file, you only need to drag the index.html file into this area.

    github upload

    After the files have finished uploading, click the Commit changes button.

When the files have finished processing, you're all done! You can head to https://<your-github-username>.github.io to see your website.

Updating your site

Whenever you want to update your site, you'll need to login into Github and go to the repository page. The URL for this will be https://github.com/<your-github-username>/<your-github-username>.github.io/.

github update

Select the Upload files button, and upload your updated website files. When the files have finished processing, the changes will show up on your web page.

You may need to refresh your browser's cache to see the changes right away. You can do this on Windows and Linux by using the

⇧ Shift
keyboard shortcut.

On Mac you need to do

⌥ Opt
⌘ Cmd
⌘ Cmd

You may want to bookmark the upload page to make it easier to get to.

Thanks for reading!

I hope you found it helpful. If you have any questions or feedback don't hesitate to drop me an email.

And if you like my content, consider supporting me using one of the methods on that page. It helps me keep making content.

Ibby EL-Serafy

Ibby EL-Serafy

Hey, I'm Ibby, a human being living in Sheffield