Getting Started with GitHub Pages

GitHub is a great resource for collaborative coding. It can also be used to create and host webpages. This way, you do not have to own and run your own server, pay an annual subscription, or be subject to the limitations of (say) the Pitt webspace. You can create websites by yourself or in teams, and you can continue to do so after you have graduated from Pitt.

How It Works

Here's the general idea. Git allows you to have multiple versions of your repo, called branches. This is so you can be working independently on different parts of a project. You can merge branches together to sort out any discrepancies, and you can pull from different branches.

You can tell Git to create a branch called gh-pages, which will be separate from the "main" (formerly called "master") branch in which you are doing your work. You will normally do your work in the main branch alone, and then when things are ready for prime time, you merge them into the gh-pages branch.

Alternative Approach: You can also work directly in the gh-pages branch, using a simplified language called Markdown. This is a way to avoid having to learn any HTML at all. However, basic HTML is not that hard, and we will be learning it anyway in this course.

Getting Started

The following tutorial from GitHub assumes that you'll be working in Markdown. This is why you will be asked to choose a "Theme", which is a visual template so you don't have to learn CSS (which we are also learning in this course anyway!). Go ahead and follow it nonetheless if you are creating a repo either for yourself or for a team. The Markdown and Theme are useful as placeholders until you get some real content to post.

GitHub Pages Tutorial: https://guides.github.com/features/pages/

Working on Group Projects

If you are going to be working on a group project and the repo has already been created, then you can skip those setup steps. Instead, make sure that the repo owner has made you a collaborator, and then clone the repo onto your own machine.

Important Note: The following page is not from our class, but from a similar one; and so while it is a useful resource, it will not correspond in every way to what we are doing.

Additional Resource: HTML and GitHub Pages Tutorial

Key Concepts to Remember

Branches: Separate versions of your repository for different purposes
gh-pages branch: Special branch that GitHub uses to serve your website
Markdown: Simple markup language for formatting text
Themes: Pre-built visual templates for your site
Collaboration: Multiple people can work on the same repository
Cloning: Creating a local copy of a repository on your machine

Next Steps

Once you've set up your GitHub Pages site, you can:

Customize your theme and layout
Add your own HTML and CSS files
Upload images and other media
Create multiple pages for your site
Use custom domain names (optional)

Remember that GitHub Pages is free for public repositories, making it an excellent choice for academic and personal projects.