Now that you have created a GitHub account, you can begin the process of hosting your HTML pages on the web. The tabs below will walk you through two steps in this process. The first tab shows you how to create a Read Me file for your repository. The second tab instructs you on uploading your root-directory folder that will contain future assignments. It's important to follow the directions on each tab very closely. Keep in mind that it may take several minutes for your GitHub account to update once an upload is completed.
- To get started, look to the left-hand side of your dashboard. You will see a prompt to create your first project. Click on the Create Repository button, which will take you to the Create a New Repository page.
- On this page, in the Repository Name field, enter your username followed by “.github.io”.
For example: If your username is StudentName321, your repository name should be as follows: StudentName321.github.ioIt is very important to enter the above name correctly. The highlighted portion must match your username for your URL to be linked to your account.
- Make sure the Public option is selected. (This should already be selected by default.) If this option is not selected, you won't be able to share your site link with your teacher.
- A little farther down on the page, you will see a checkbox labeled Add a README file. Make sure this option is checked.
- Skip the remaining options on the page (leave them in their default settings). Scroll down to the bottom and click the Create Repository button. This will take you to the page of the repository you just created.
On this page you will see one file: README.md. (This is the default file that was created when you checked the Add a README file box in the step above.) We will re-visit this file later in this lesson.
Fantastic! You have created your GitHub repository that will house your future web-based assignments!
Once you have reached your repository page, you can upload your root directory folder directly to this page via drag/drop. Alternatively, you can click on the Add file button and choose Upload files, which will bring you to the upload files page.
To upload, find the local folder on your computer that contains your course work and drag/drop the folder into your browser. You will see a progress bar as your files upload. Once the folder has finished uploading, scroll to the bottom of the page and click on the Commit changes button. Every time you make any changes to your repository, you must commit changes. This is the same as saving changes on a document you are working on. If you navigate away from this screen without committing your changes, they will not take effect.
You will then see a screen indicating that your files are being processed. After this is complete, you will be taken back to your repository page. You will now see the folder you just uploaded appear above or below the README.md file.
For example, in the following screenshot, the folder BasicWebDev has been added to the repository.
All your course work will be placed in your root directory folder, so make sure you are using proper file/folder naming to keep yourself organized.
Tip! You can return to your main repository page at any time via the following URL:
https://github.com/username/username.github.io
You can also return to this page by clicking on the Code menu option near the top of the page.
Question
What button should you always click when you make updates to your repository?
You should always click the Commit Changes button when updating your repository. This will ensure that the changes you have made will take effect!
Way to go! You have successfully published your work to GitHub. Now, how do you see it live on the web?
