Create a GitHub Pages website
- Create a GitHub account
- Create a GitHub Pages repository
- Create your local website
- Installing Git
- Create your local repository
- Link your local repository to your Pages repository
- Status / Add / Commit / Push
- Visit your GitHub Pages website
If you don't have a GitHub account yet, go to the sign-up page and create a new account with your username of choice and selecting a free, unlimited public repositories plan. You should then get an email from GitHub asking you to activate your account.
Once you are logged in to GitHub, click the + icon at the top to create a new repository. The name of the repository is important and has to follow the format yourusername.github.io. For instance, if my username is pedro, then the name of the repository has to be pedro.github.io.
Add a description if you want, perhaps along the lines of "This is the repository for my web portfolio. It is organized in such and such way.". Select it as public and tick Initialize this repository with a README, which will create at least one file in your repository.
Finally, you don't need to add a .gitignore, and pick whatever license you want (I usually go with the Mozilla Public License 2.0).
Once you click create, you should be redirected to your empty repository, which should look something like this:
First, create a folder in which you will be working on your website. This is going to be the folder we will connect to our GitHub repo. In my case, I will name it *dummy-pages. Inside it, we will put all of our .html, .css, .js and media assets. At the very least, you will need anindex.html, which could be something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>my dummy pages website</title>
</head>
<body>
<h1>hello!</h1>
<p>welcome to my dummy pages website.</p>
</body>
</html>
If you open index.html with your browser, you should see something like this:
Now that we have a local website, we need a local repository!
First, download and install git from the official website. No matter what your platform is, follow the installation instructions with all the default options.
IMPORTANT
We are going to use Git Bash (Windows) / Terminal (OSX) for this, which I will refer to it as terminal from here on. To find it on Windows, there should be a shortcut on your Desktop or you can find it under Start > Programs > Git > Git Bash. To find it on OSX, press CMD+Space and type Terminal then press Enter.
- on WINDOWS
- on OSX
To make sure that we have git correctly installed, type which git (OSX) or where git (WINDOWS) and press Enter. You should see something along the lines of /Users/you-username/bin/git. It's okay if it's not exactly the same. If nothing shows up, though this means you haven't properly installed Git! If you've opened your terminal window before installing Git, try quitting the window (not just closing it) and re-opening it again, then typing the above commands. Otherwise, I'd recommend the Installing Git section of this video series.
Now that we have Git installed, we need to navigate to our working directory (directory is another word for folder).
In a nutshell, the terminal is a non-graphical representation of your desktop, which means that everything you can do on your desktop with your mouse (open directories, open files, create new files, go back to previous directories, etc.), you can do in the terminal with your keyboard! Some of the important commands are cd which means change directory (and it shows the current directory on the left hand-side), as well as ls (OSX) or dir (WINDOWS) which means show me the contents of the directory I am currently in.
Assuming that our directory (dummy-pages) is inside CommLab, which is inside Spring2017 which is inside Documents, we usually start at the top of the directory structure (Home on OSX, C:\ on Windows). The folder you created in step 2, inside which is the index.html file is probably somewhere else.
type cd documents and press Enter
type cd Spring2017 and press Enter
type cd CommLab and press Enter
type cd dummy-pages and press Enter
That's a lot of repetitive typing. An easier approach to get the same result is to type cd followed by a space and then drag and drop the desired folder on top of the terminal. The path to this folder will populate and you should see something like this: cd Documents/Spring2017/CommLab/dummy-pages! Then press enter and you will have changed into that directory.
To make sure that we are in the correct directory, we can type ls (OSX) or dir (WINDOWS) and you should see only:
user@userdevice:~/classes/commlab/dummy-pages$ ls
index.html
user@userdevice:~/classes/commlab/dummy-pages$
Which means we're in the correct folder, because we can see the one index.html file that we created on step 3!
Now comes the Git part (Windows users, make sure you're using Git Bash, and not Command Prompt). To create a local repo, type git init, press Enter, and you should see Initialized empty Git repository in your-path/your-folder/.git/. Then you can type git status to see what is currently taken into account by Git. With only one index.html file, you should see something like this:
In order to connect it to our repository online (the one created in step 2), we need to get its URL from the main webpage. It should be https://github.com/yourusername/yourusername.io.git, but you can also find it on your repository page, here:
Now, let's go back to our terminal and add that URL as a remote:
git remote add github <PASTE THE URL HERE> (don't include the < and > characters)
If successful, nothing should happen, and you can check that we've added a new remote by typing git remote show which should output github. We now have a connection between our local repository and our remote repository! The next thing we need to do is download the files that exist in our remote repository (our README and our License, if we've chosen one). The equivalent of download in Git is pull. So we type git pull github master, some processing happens and if we type ls (or dir in Windows), we can see the files we've downloaded (such as README.md).
This is the typical git workflow to upload files, which you'll most likely do over and over during the course of the semester.
- First, we do
git status, which shows us, in red, the status of which files are not ready to be uploaded and, in green, the files that are ready to be uploaded. - Then, we do
git add -A, which tells git to add all of the modified/created/deleted files. Nothing should show up. - We can do
git statusagain to see what has been added. Previous red files should now be green, since we've added them.
- Now, we are ready to commit the green files (i.e. bundle them up together and give a name to the bundle, known as commit message). To do so, we type
git commit -m "adding index.html". In that case, "adding index.html" could have been anything, as long as it is between double-quotes ("") -e.g. "adding temporary website page".
- Finally, we upload everything by typing
git push github master(you might be prompted to enter your username and password for GitHub. When you type your password, you may not see anything. It's there, it's just being hidden. Do your best to type accurately).
Done! You can now go back to your repository page on GitHub and you will see the uploaded file index.html after yo've refreshed!
And finally, you can visit directly http://<your-github-username>.github.io (e.g. to see the contents of index.html! All the rest is just regular web development :)
Adding new files is just a matter of repeating steps 2 and 7!
We create a new file in our text editor (about.html), we modify its contents to say something about us, we add it in git by navigating to our folder (if we're not there already), and then we go git status, git add -A (adds all files), git commit -m "added about page" (committing what we just did), git push github master (uploads the file) and it should be visible at http://<your-github-username>.github.io/about.html!