GitHub/Website Hosting

GitHub supports free website hosting for static sites called GitHub Pages. This provides an opportunity to combine source code control and website hosting for learning HTML, CSS, and JavaScript.

Prerequisites

edit
  1. Complete the GitHub/Get Started tutorial to join GitHub and learn how to create a repository and add files.

Create a Repository

edit
  1. Review GitHub Pages: Websites for you and your projects
  2. Visit GitHub and sign into your account.
  3. Select Repositories / New.
  4. Enter username.github.io for the repository name, where username is your GitHub username name.
    Note: usernames and repository names cannot contain special characters such as underscore (_) when using GitHub Pages. If necessary, rename your account under GitHub settings before creating your repository.
  5. Select the option to make it a public repository.
    Note: only public repositories can have a website when using GitHub Free. Students can request a GitHub Student Developer Pack for free GitHub Pro while they are students.
  6. Select the option to Initialize this repository with a README.
  7. Create the repository.

Edit the README

edit
  1. Review GitHub: Editing Files in Your Repository.
  2. Select the link to your README.md file to open the file.
  3. Select the Edit this file icon (pencil) to edit the file.
  4. The README may contain anything you like. Because it is a private repository, only you and users you invite will be able to see this repository.
  5. Commit the change to modify the README file.
  6. Observe the new front page for your repository.
  7. If desired, edit the README and commit additional changes now that you are able to see how the README will appear.

Create a File

edit

GitHub repositories are typically managed using the git command line or a git utility. But it is also possible to edit content directly using the GitHub website.

  1. In your GitHub repository select Create new file.
  2. Enter index.html for the filename.
  3. Enter anything you wish for the file content.
  4. Commit the change.

Publish Pages

edit
  1. View your GitHub repository / Settings / Pages.
  2. Select the main branch and the folder containing your index.html file.
  3. Save the changes to publish your site.

View the Page

edit
  1. In a web browser, navigate to https://username.github.io to view your page. Be sure to replace username with your GitHub username name.
  2. If you are not able to view the file, the README.md file will need to be changed. Select a theme for this README.md file. Click on your Repository Settings, scroll down the page to GitHub Pages, Change Theme, Select Theme.

Enhance Your Website

edit
  1. Update your GitHub repository by editing index.html and adding web pages, CSS files, images, JavaScript, or other content as desired.

See Also

edit