Forem

Cover image for Getting Started With Git: Creating a Repository and Webpage for Your Resume!
John Ogbonna
John Ogbonna

Posted on

Getting Started With Git: Creating a Repository and Webpage for Your Resume!

You've heard of Git, right? Well, regardless, today's your lucky day!

We're going to walk through setting up a GitHub repository and using GitHub Pages to host your very own website—with your resume on it! Trust me, its much easier than it sounds!

Okay, so what makes Git so darn cool?

Git is more than just a tool—it's the backbone of modern software development. But what makes it so great?

🚀 Version Control – Ever made changes to a file and later wished you could go back? With Git, you can track every change, revert to previous versions, and even experiment without fear of losing progress.

🌍 Collaboration Made Easy – Whether you’re working solo or in a team, Git makes collaboration seamless. You can merge changes, resolve conflicts, and contribute to projects without stepping on each other's toes.

🔀 Branching & Merging – Git lets you create "branches" to work on new features without affecting the main project. Once you're happy with your changes, you can merge them back in—like magic!

🛠 Backup & Safety – Accidentally deleted your project? No worries! As long as it’s pushed to GitHub, your code is safe in the cloud and can be restored anytime.

📜 Open Source & Industry Standard – Git is free, widely used, and powers everything from personal projects to billion-dollar enterprises.

Simply put, Git helps you keep track of changes, collaborate effortlessly, and safeguard your work!

Now, I know what you're thinking. That was a mouthful. And you're. right. So lets get to it!

What you need:

  • A GitHub account. If you don't have one yet, sign up here.
  • A Mac or Windows computer—we’ll install Git on it.

Installing Git

Mac OS

  • If you are on a Mac, install Homebrew if not already installed. Then open up the almighty terminal (as I like to call it). Paste and run this command:
$ brew install git
Enter fullscreen mode Exit fullscreen mode

And just like that, all the hard work is done for you!

Windows

  • Now, I wish I could say the process was just as easy for Windows users, but I didn't come here to lie to you. But don't worry. We got this!

  • On this page click 64-bit Git for Windows Setup. - Chances are you're not using your grandma's computer so your machine is more than likely 64 bit
    64-bit Git for Windows Setup

  • Open the exe file once dowloaded and start the installation. Make sure these options are checked during installation
    installation

  • Continue through the installation using default settings. At the final step, select Launch git bash. (No need to review release notes)
    select open git bash

  • And just like that, installation done! See, I told you we'd get through this! I recommend launching Git bash on Windows to work with Git, as all the command that we will do should work with no issues there going forward!

Creating a repository

  • Log into Github
  • On the top right, click your profile (you may feel the need to change your profile pic to something that shows off the real you - I support you! But finish this tutorial first!)
    Select your profile

  • In the drop-down menu, Select your repositories
    your repositories

  • Select New
    Select  raw `New` endraw

  • Give the repository a name and description

  • Ensure the repository (Repo) is set to be public, this will enable us to host on Github pages

  • Select add a ReadMe file

    • What the heck is a Readme? - I'm glad you asked:A README is the first file developers see in a repository. It provides essential information about the project, such as its purpose, setup instructions, and usage. setup repo
  • When finished, click Create Repository

  • You will be taken to the new Repository page

    new Repository page

Using AI to create a resume webpage file

  • Do you ever get the feeling sometimes that the future is the present? Me too! Especially because now, we'll be getting machines to do the extra work that we don't feel like doing! We'll get it to transform your resume into a HTML file that can be rendered as a webpage in the browser!

  • In any (reliable) generative AI of your choosing, attach your current resume. Give it a prompt similar to this
    Transform my resume into a html webpage. Use responsive design and inline styling. Make it look pretty.
    You can also prompt it to emphasize certain skills based on how you want your resume to be presented

  • The response should be in HTML format, similar to this:
    html response

  • Copy / save the response. We will need his file later

Initializing the Git Repository on your local device

Open your terminal (Mac) or Git Bash (Windows)
Navigate to In the folder location of your choice, create a new folder. If you don't know how to navigate folders in a command line, have a brief look here. To create a new folder and navigate to it , enter

mkdir resume
Enter fullscreen mode Exit fullscreen mode

then:

cd resume
Enter fullscreen mode Exit fullscreen mode

like this:
like this

  • You are now in a new directory, where you will make a local copy of the repository hosted in Github.
  • Next we need to set up git our git credentials locally. Enter:
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
Enter fullscreen mode Exit fullscreen mode

replace "Your Name" and "your.email@example.com" with the appropriate values

  • Additionally, you may need to make sure Git Credential Manager is installed :

  • On Mac and Linux:

brew install --cask git-credential-manager
Enter fullscreen mode Exit fullscreen mode
  • On Windows:
    This is where now Windows users may have it easy! Git Credential Manager should already be installed with the installation of Git

  • We will now initialize this folder (directory) as a git repository. Enter the command:

git init
Enter fullscreen mode Exit fullscreen mode
  • You should get a response like this:
    response

  • Next, we need to sync this local repository with the one we created on Github. In your browser, go back to the tab that has the newly created repository

  • Click on the green code button. A dropdown will appear

  • In the dropdown, click HTTPS

  • Then, click the copy icon next to the URL
    copy icon

  • In command line enter this command

git clone URL
Enter fullscreen mode Exit fullscreen mode
  • Your result should look like this
    result

  • Enter ls in the command line to list the folder contents. You should see the a folder. This folder is linked to your Git repository. Enter

cd folder
Enter fullscreen mode Exit fullscreen mode

Replace folder with the name of the folder you created

  • To enter the folder. Enter ls again and you should see the Readme file: See the Readme file

Adding your resume HTML file to the repository

  • Still in the cloned folder, enter this command:
vi index.html
Enter fullscreen mode Exit fullscreen mode
  • Explanation: This command opens vim, a command line text editor, and it creates a file called index.html and opens it to be edited:
    Create index.html

    • By default, vim launches in view mode. To switch to edit mode and edit the file, type i, you should see the word INSERT at the bottom left edit mode
    • Copy the contents of the HTML file we used AI to generate. Paste it into the command line editor using command + v on Mac or control + v on Windows
    • Press escape on the keyboard to exit edit mode
    • To save and exit the editor, once you've exited edit mode, enter :wq and then press enter Save HTML file
    • We have now created your resume as an HTML file using the command line. This format will allow it to be displayed as a webpage
    • Now we get into the part that makes you a real cloud developer. Using Git!
    • In the command line, enter the command:
git status
Enter fullscreen mode Exit fullscreen mode
  • Explanation: git status displays the current state of the repository. It shows which files have been modified, staged, or remain untracked. Your new index.html file has been newly created, as such it is in your local version of the repository, but not in the remote repository hosted on Github. As such, you will notice that when you run git status, index.html will be listed in red as an untracked file
    untracked files

    • To add your web page to the remote repository we must first commit the file. Enter:
git add index.html
Enter fullscreen mode Exit fullscreen mode
  • Explanation: The git add command stages changes in Git, preparing them for commit (which we will do next). You can add specific files git add filename or all changes git add .

    • Now that we have 'added' the local file, we need to commit it. Committing in Git creates a snapshot of sorts, recording staged changes in the repository. Commits allow you to track changes, revert to previous versions, and collaborate efficiently. To commit this file, in the command line type
git commit -m "Your message"
Enter fullscreen mode Exit fullscreen mode
  • Every commit must have a message, denoted by "-m". Replace "Your message" with a description with what has been added or changed.
    commit

  • Once the change has been committed on your local machine, we now need to 'push' these changes to the remote repository hosted on Github, thus, syncing our changes. Enter

git push origin main
Enter fullscreen mode Exit fullscreen mode
  • Explanation:

    • git push uploads committed changes from your local machine to the remote repository in Github. origin refers to the default remote repository where your code is stored.
    • main is the branch name, meaning you are pushing updates to the main branch (We can worry about branching concepts another time).
    • This syncs your local changes with the remote repository, making them available for others to see or collaborate on.
  • Once the command is entered, if Git Credential Manager is installed, you should be promoted to log in to Git to authenticate in a separate window. If you are asked to log in through the command line, this will not work, as Github has ended support for such authorization. Don't fall for it, it will not work! Instead, make sure Git Credential Manager is installed as mentioned earlier in the article

    authenticate

  • Select Authorize git-Ecosystem when prompted

    Select Authorize git-Ecosystem when prompted

  • Upon successful login, Your changes will be pushed to the repository in Github

  • Open the browser tab with your Repo page and refresh. You will now see index.html and your commit message

    index.html and your commit message

  • On the Repo page click settings

    click  raw `settings` endraw

  • On the left hand side, click pages

    click  raw `settings` endraw

  • Make sure Deploy from Branch is Selected

  • Select Main Branch

    Select Main Branch

  • Click save

    Click save

  • Wait a few moments and refresh the page. Eventually you should see a link to your new site.

  • Click the link

    link to your new site

Image description

  • 🎉Celebrate!🎉 You now have your own website! We've also reviewed some fundamental Git concepts and commands! We've come so far together, I could almost shed a tear. We will be doing a lot more with Git in the future, this was just a taste. But for now, relax. you've earned it

Until next time!

Top comments (0)