Friday, April 17, 2020

Follow these steps to create a GitHub Pages website without having to download anything

Step one is that you need craft and debug an HTML file locally on your own machine. Nothing fancy here – just open a text editor like NotePad and get rolling. An example of just such an app is here. You can use that if you want, but I would suggest you do this with your own code so you have the satisfaction of seeing your own creation as a web page anyone can access.

 Step two is that you store the file in a folder on your machine and rename it “index.html.” If it is any other name, it will not work on GitHub Pages.

Step three is make sure you have an account on GitHub. As of writing, this is totally free and requires no special software on your machine to get an account and manipulate GitHub right in your browser (stuff like Git that you have to download onto your machine can be learned later and are not necessary for this tutorial).

 Step four is create a repository on your GitHub account. Your webpage is basically just going to be a repository on your GitHub account. Just navigate to your GitHub account and click to create a new repository (aka “repo”). Just make sure the repo name is your GitHub user name plus “github.io” when you name it. My user name is olddognewtrix123, so when I made a repo that is supposed to actually be a webpage, I went on to my GitHub account, and clicked to create a new repo. When I was prompted to name the repo, I called it “olddognewtrix123.github.io.” If you do not name your repo correctly, all you will have created is just another GitHub repository. Which is great, but you won’t be able to hit it from your browser like a web page. So follow the exact naming convention. Leave the “Public” radio button selected. You can leave the “Initialize with ReadMe” checkbox unselected – it is not necessary. Now click the green Create Repo button.

 Step five is to click the Upload File button on the repository’s page. Select your index.html file from the folder on your machine and complete the upload. Fill out the comment fields and click the green Commit Changes button. You can repeat step three for any other files that your index.html file needs to run, like if you have a separate style sheet.

 Step six is super important and not a lot of tutorials mention it: you gotta make sure index.html has a ref tag, it is using the absolute path and not the relative path. So, click on the index.html file on the GitHub repository page. Once it is open you will see your HTML. Click the icon in the top right that looks like a pen to begin editing. Change any relative paths in your HTML to the absolute paths for the GitHub repository. So, if your HTML has
       <a href="/otherpage.html"/>
 you need to change it to 
    <a href="https://olddognewtrix123.github.io/otherpage.html"/>

Then of course commit your changes.

Step seven is simple – you wait. Sometimes it can take up to thirty minutes for your changes to show up on GitHub pages. After thirty minutes, plug the name of your repo (<yourusername>.github.io) into your browser. hit Enter, and bask in the glory of your new web page.

No comments:

Post a Comment