Class Site

Your class site is your very own personal web space for the semester. This is where you will host all of the projects, websites, and any other related work for this class. You will turn projects in by publishing them to your site.

We’ll be using something called Git to publish our class websites through a Git repository hosting site called GitHub. Git is a version control system that is widely used within the developer community. Git records changes made to our files and allows us to revert to older versions if necessary. You can read more here.

First, we have to set up our GitHub account and make our first repository. Repository is just a more project-centric name for “folder”. We’ll be storing all of our website files within this repository.

  1. Make an account on GitHub (make sure to verify the account)
  2. Make a new repository by clicking the “+” in the top-right and selecting “new repository”
  3. Name your repository whatever you would like (or something like “class-site” if you can’t think of anything)
  4. Check “Initialize this repository with a README”
  5. Create the repository

Now, in order for our repository to be treated and rendered like a website, we’ll want to initialize GitHub Pages on this repository. Github pages is a feature offered by github (there are similar services offered by other git platforms) that makes it easy and free to host handmade websites.

  1. On the main repository page, navigate to the settings tab and select “Pages” from the sidebar
  2. Change the source from “none” to “main”
  3. The settings should save automatically

Next, we need to create a link between our local files and the online repository:

  1. Download GitHub Desktop
  2. Open the GitHub Desktop application and login with your GitHub credentials
  3. Go to File > clone repository
  4. Select the newly created repository
  5. Change the local path to a location that is unlikely to change (and one you will remember easily)
  6. Click “clone”

Now we have a local folder that is linked to our Github repository. Next, we just need to make our index.html and publish the changes!

  1. Find the folder that you just created
  2. Open your text editor, create a new file, and name it index.html
  3. Add all the necessary ingredients to the html document
  4. Make sure to add something in the body, so you can confirm it is working
  5. Save
  6. Open the GitHub Desktop application
  7. Select the new repository in the left-hand panel
  8. It should show that there is 1 changed file
  9. In the bottom-left dialog box, name the change (called a “commit”) something like: “create index.html” (it can be anything you like, but the clearer the better)
  10. Click “Commit to main”
  11. And, finally, click the “Push origin” button in the top-right
  12. Wait a minute or two for the changes to be applied to the online respository
  13. The changes that we made locally are now hosted online in our github repository!
  14. Any time we make changes locally to our folder, we will need to make sure to commit those changes and push them using the GitHub Desktop application before they will be reflected online

Your website will be published to your-github-username.github.io/respository-name. The changes will likely not appear immediatedly, so you will need to wait a minute or two. If it's been a few minutes and the changes are still not appearing, you can try a hard reset of the page by pressing ctrl+shift+r (on PC) or cmd+shift+r (on mac). This will refresh the page and clear the browser cache for the site which sometimes stores old information and versions of the page so it loads faster when revisted.

Spend some time setting up your class site. You can design it however you like. Think ahead and consider the content that we will be adding to our class sites over the course of the class in order to determine the ways that it can grow or adapt to the content being added. But don’t fret too much at this point, the class site will hopefully change quite a bit over the course of the class as you learn more. This will be your personal portal to every project that we do in this class. Make it personal! The only requirement is that it’s navigable and that all the links work!