Simple Website Template

How to make a website quickly, using github pages

1 Make a github account

Github is a place where people store code projects. It's used for open source development because people can collaborate on projects, or take an existing project and adapt it. Github relies on git, a version control software (version control = keeping track of changes to files), but you don't have to worry about that yet - just know that git and github are different things. Also, while Github is great for code, it's not only for developers!

2 Fork my repo, simple-website-template

A repo or repository is just another word for project, & fork is just another word for copy. The cathydeng/simple-website-template repo is the code for this website. To fork a repo, click the fork button on the top right.

A few things happen when you fork simple-website-template:

  • You get a copy of the code - a simple-website-template repo under your github account
    https://github.com/[YOUR USERNAME]/simple-website-template
  • You get a copy of this website - at your own url, yay!
    https://[YOUR USERNAME].github.io/simple-website-template
You have your own url because github has a really nifty feature, github pages, which hosts static pages for you. If you're curious, here are some notes on how this works:
  • For any github repo, if you have code in the gh-pages branch, github will look for whatever is in index.html & host it at https://[YOUR USERNAME].github.io/[YOUR REPO NAME]
  • You can see what branches a repo has by clicking the branch dropdown on a repo page. Think of branches as different versions of the files within your repo, kind of like 'save as' on a repo (yes, git-related words are weird).
  • When you create a repo from scratch, you start with one default branch called master, and you'll have to create the gh-pages branch. Within a repo, you can create however many branches you want.
  • Because there's already a gh-pages branch in cathydeng/simple-website-template, all forks of the repo will also have a gh-pages branch

3 Tweak stuff to your heart's content

HOW TO EDIT FILES

Within your simple-website-template repo on github (https://github.com/[YOUR USERNAME]/simple-website-template), you'll see index.html, a folder called css/ with custom.css inside it, and README.md (whenever a repo has a README.md inside it, github displays it on the repo page below the file list). You can click the files to see their contents, and click the icon to edit your code, in your browser!

HOW TO 'SAVE' YOUR CHANGES

When you're happy with what you have, you'll need to commit your changes. Think of committing as saving. Each time you make a commit on github, you can put a message saying what you did - in the future, you can see each of your commits, and how your files changed (version control! yay). When you commit, see step 4!

PREVIEWING YOUR CHANGES

You'll probably want to see what your website will look like, without blindly tweaking html/css - after all, coding is mostly an exercise in trial & error. This is where codepen comes in - coding in a browser! You can create a new 'pen', copy over your html & css, and see the result. Try deleting everything within the <body> tag in the html and making something completely new?

4 See the changes on your website! Instant gratification!

https://[YOUR USERNAME].github.io/simple-website-template