Making an "About Me" Page with GitHub Pages
The goal of this project is to make a personal web page, and to learn more about using GitHub. We will host our page on GitHub pages, which is a hosting service that allows us to serve our website from a GitHub repository.
Git is a tool used for keeping software projects organized, which makes both solo and team development work easier.
GitHub is a free service we'll be using to keep our code safe and help us collaborate. GitHub is like a backup service for your code. If you make sure to push your code there every class, you won't lose it. This is very handy for a lot of reasons; if you aren't using the same laptop during every class, or you accidentally delete a file or make a mistake after you've pushed it. When working in groups it also makes it much easier for multiple people to collaborate on the same project.
GitHub Desktop is an application on your computer (also known as a "client") which makes it easier to interact with your GitHub repositories from your computer
repository: also known as "repo"- a place to keep your code and files
commit: save the state of your current project. GitHub takes a "snapshot" of your files, when you want to save changes
commit message: a brief message added to commits, so we have a rough idea of what was changed when the commit was made
push: "push up your code" means to upload to the repository
pull: "pull down your code" means to download from the repository
clone: "clone down your repo" means to download the same repository to your computer
git: open-source version control software
open-source: refers to something people can use, change, or modify because it is publicly accessible
text editor: the application we use to write and edit code; in this class, we'll use Brackets
Go to https://github.com/ and sign up for an account.
GitHub won't spam you, but the email address you choose will be associated with your account and by default it may be published along with your code. If you don't want that, go to the Emails section under Account Settings. After you verify your email address there will be an option to "Keep my email address private".
Open the GitHub app and sign in. Click the +
at the top and name your new repository YOURNAME.github.io
. For example, if your GitHub username is pokemon-fan
then the name should be pokemon-fan.github.io
.
Now open Brackets and press Opt-Cmd-O
(File -> Open Folder).
Navigate to your home directory by pressing Shift-Cmd-H
(or use the pulldown menu). Choose your repository and then click Open (or
press return).
Press Cmd-N
(File -> New) to create a new file. Type anything you
want, such as "Hello World", into the window and then press
Cmd-S
(File -> Save). Choose the name index.html
and click Save.
Switch back to GitHub with Cmd-Tab
. You should see the changes you
made. Click on the box next to the changes you made (this should check off "index.html" too). Type in a quick note about what you did in the "Summary" box, and if you want to elaborate further, write something in the "Description" box- this will be your "commit message." Then, click "Commit to Master" and hit the "Publish" button to push your code to GitHub. You should now be able to visit your GitHub account in the browser, and see your new repository!
After about 10 minutes, you'll have your own website at http://YOURNAME.github.io/
Now, you can start putting things on your page. Try adding some HTML elements! Go to Brackets, and add some basic code. Start off by adding opening and closing HTML and body tags, then play around with adding some text.