This is a demo website.
index.htmlcontains the contents of the websitestyles.csscontains the styles (background, colors, fonts, etc...)main.jscontains the JavaScript code for the interactive elements of the site (clicking on the image to interact with it)
GitHub also doubles as a static web server! If you enable a feature called "GitHub Pages", in addition to storing your files, GitHub will run a static web server that can serve those pages on the web.
-
Go to this github repo's settings and under Github Pages choose "main" branch as the source. (screenshot shows "master" branch which is the old GitHub terminology for the "main" branch)
-
Go to the specified URL (it will likely be username.github.io/simple-website, where "username" is your GitHub username) and you should see the HTML page we created. You might have to wait a minute or two before it shows up.
-
Open your command line terminal and navigate to your Development folder
cd ~/Development/ -
Clone the repository using the SSH link given to you in GitHub, it should look something like this:
git clone [email protected]:XXXXX/simple-website.git -
In the command line, navigate into that folder and then open it in your text editor.
cd ~/Development/simple-website -
Now open the code in Sublime Text (or another text editor of your choice). Note, if the
subl .command in the instructions below doesn't work for you, you can just open Sublime Text yourself and open this folder from within Sublime Text by clicking the "File" menu, then "Open".subl ~/Development/simple-website -
Once you have the files on your computer, find them in and double click on
index.htmlto view it in a web browser (you can refresh the page to view it again after you add new code). Congrats! You now have a copy of the website on your own computer. You'll notice the URL of your browser isn't on the web, now it is pointing to a file on your computer.
-
Lets create a new page called
goodbye.html -
Put the following code in
goodbye.html. This is what a bare-bones HTML page looks like.<!DOCTYPE html> <html> <head> <title>Goodbye!</title> </head> <body> <h1>Goodbye World</h1> <h2>Adios</h2> <p> What a short website </p> </body> </html>
-
Commit this page
git status git add goodbye.html git commit -m "add goodbye page"
We're going to practice that workflow one more time. Lets add navigation.
-
In
index.htmlinside the body tag, lets add the following.<a href="goodbye.html"> Goodbye Page </a>and in
goodbye.htmllets add a link back<a href="index.html"> Home Page </a> -
Now if you refresh the page, or open
index.htmlagain in your browser, you should be able to navigate back and forth between the two pages! -
Once you see that the links are working correctly, lets commit both of those changes in one commit
git status git add index.html git add goodbye.html git commit -m "add navigation links to website"
-
Push to GitHub
git pushIf this is the first time you're pushing, you may have to set an upstream branch. If you read the output of
git pushit will tell you what to do. Essentially this is just synchronizing this branch locally with the corresponding branch in the remote repository. -
Once you've pushed the website to the main branch on GitHub, you should be able to view it online! Your URL will likely be something like:
username.github.io/simple-website
Remmber,
- you can always see what is in the staging area with
git status - you can always see what is in the commit log with
git log
Use these commands frequently to build your mental model of what is going on in your Git repository.
- Make a change
- Commit that change
- Push to GitHub
- Repeat 5 times
You can make any five changes you wish. At first, I'd reccomend simple changes, like updating text. Once you get the hang of it, you're welcome to update the styles, or edit the HTML. If you'd like to make more than 5 edits, feel free to keep going and have fun! I'd encourage you to keep going until you feel you've got the hang of how Git works.
More broadly, our goals with this assignment are to:
- build a mental model of the structure of the local Git repository (the one on your computer). What is in the staging area? What is in the commit log? Building and maintaining a mental model of what is going on is a key skill in working with code, even beyond GitHub.
- build some muscle memory around using Git from the command line, as we will be using these tools every day for the rest of the class
Finally, if you'd like to pursue a third learning objective here, you may. That objective is to explore a new and unfamiliar codebase and understand how it works. See if you can figure out how to give every page in your website a consistent look and feel. To do this, you'll need to figure out how to link the same stylesheet to both index.html and goodbye.html as well as any other page you create.
If you'd like to take a crack at playing around with the JavaScript...you may do that as well! Good luck!