This is a demo site to practice using Git and Github Pages. It is a basic portfolio/resume template. Feel free to alter/edit it to your liking. If you have experience with Web Dev, you can use a completely different site for the lab.
Profile photos are randomly pulled from ThisPersonDoesNotExist. Every time you refresh you should see a different one.
Choose one of the following options to copy this repository to your local machine.
Forking | Downloading | Cloning |
---|---|---|
Click Fork on Github, then clone your forked repo by running git clone [email protected]:<YourUsername>/UltimateGitResource.git |
Click CODE -> DOWNLOAD ZIP at the root directory of this repo on Github |
Run git clone [email protected]:GoldinGuy/UltimateGitResource.git |
![]() |
![]() |
![]() |
(Each method comes with its own upsides and downsides. Downloading is quick and easy but you lose the repo's history. Forking allows you to compare your own history and the original repo's, but takes an extra step to get the code to your local machine. Cloning requires you to change the remote origin from this repo to your own custom one, and keeps the old repo's history).
Once you have the repo on your local machine, edit the site to your liking in a text editor (I recommend either VSCode or Atom). (You can skip this step if you don't care about customization - it's just cool to have your own personal profile site)
- You can change the font to anything you like from Google Fonts by replacing the name of the font in the HTML link.
- You can use any of the TailwindCSS classes to edit your styling.
- The quickest way to edit the site is to
Ctrl-F
for the default person "Alex B. Carroll" and replace it with your name. Then do the same for their email "[email protected]", address, linkedIn, and so on. It will likely require a basic knowledge of HTML5.
Based on the option you chose above, follow these steps to create a remote if necessary and push changes
Forking | Downloading | Cloning |
---|---|---|
Since you forked the repo, you already have a remote repository. | On Github, create a remote repository. You can do this by clicking the + icon in the top-right, then new repository , then filling out the name and description. I recommend naming it Ultimate Git CheatSheet but you can call it whatever you want |
Same as Downloading |
Run Git commands in the terminal to push your local state to the remote repo. (If you cloned the repo, make sure you made at least one change to the site).
Forking | Downloading | Cloning |
---|---|---|
git init |
git init |
git remote set-url origin [email protected]:<username>/<repository-name>.git |
git add . |
git add . |
git add . |
git commit -m "<name your commit>" |
git commit -m "<name your commit>" |
git commit -m "<name your commit>" |
git push |
git remote add origin [email protected]:<username>/<repository-name>.git |
git push |
git log |
git push -u origin master |
git log |
If you navigate to https://github.com:<username>/<repository-name>
, you should now see your repo in all its glory
We are now going to setup Github Pages
to host our demo site for free
- Navigate to the
settings
tab of the Github repo athttps://github.com:<username>/<repository-name>/settings
. - Scroll down to the section titled
GitHub Pages
. - Click
branch
and selectmain
. Then click the folder icon and selectdocs
. This sets the Github pages to build from the/docs
folder which contains our site. - Click save, and wait a minute for your site to load. It should look similar to the image below when complete.
- You're done! Now you have your own personal profile/resume site, hosted for free on Github. You learned how to use the most common commands, and hopefully have a basic understanding of how git works.
In the index.html file there is a DUMMY_API_KEY
.
By completing this lab as normal, we are simulating an API key (essentially, a password) being accidentally exposed (A common mistake that I have made several times)
For this bonus challenge, you must quickly remove all traces from this credential from your history. Requirements are as follows:
- You must include the
DUMMY_API_KEY
in the initial commit - You must use Git commands to remove the API Key from your history. There are many ways to accomplish this.
If you are stuck, click here for a hint:
Use Rebase, Force Push, Commit --amend, or git filter-branch
Notably, if this was a real data breach and you already pushed the API key, it's too late. You should do the above, but I also recommend invaldiating and changing the API key to be safe. Github has an article about it here.
This template is based on an open-source portfolio site found here