GitHub/Website Hosting

From Wikiversity
Jump to navigation Jump to search

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 | edit source]

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

Create a Repository[edit | edit source]

  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.

Select the option to Initialize this repository with a README.

  1. Create the repository.

Edit the README[edit | edit source]

  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 | edit source]

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.

View the Page[edit | edit source]

  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 | edit source]

  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 | edit source]