Git the Fork Outta Here!

Melissa Gonzalez
Adventures in Code
Published in
6 min readJul 31, 2017

Sharing Your Code for Fun and Profit

GitHub has several features that allow a developer to be an active member of the tech community. In class, we’ve used GitHub to post Gists, Repositories, and a Personal Website. Each of these features puts us and our code out there so others can see our work and get a sense of what kind of developer we are!

Sharing your code on GitHub is a good way to put yourself out there and allow others to see you and your work!

Gists

Gists are just files you can post online.

In class, we uses GitHubGist to post one thing we learn each day!

In class, we use the Gists feature to write a Daily TIL (Today I Learned). Posting something you learned every day shows others how you think and learn!

Gists, of course, can be used to post any other type of information, such code snippets or anything else you’d want to share.

Repositories

GitHub repositories are the bread and butter of the operation! GitHub repositories are largely just Git repositories that have been pushed online. This serves several purposes:

  1. As a way to back up files in case you mess up your code or if your computer gets lost, stolen, or destroyed.
  2. As a way to share code so you can use other people’s files and vice versa.
  3. As a way for multiple people to work on different parts of the same project without affecting the main code.

To create a new repository, click on the + sign on the right side of the nav bar in GitHub, and click on New Repository:

It should take you to the page below:

Under Repository Name, type in the same name as the Git repository on your computer. Technically, it doesn’t have to be the same name, but this will make it easier to keep track of your projects in the future!

All other fields are optional! When you’re ready, click the Create Repository button! You should then see yourself on this page:

Then follow the instructions on this page based on whether you a creating a new repository on your computer, pushing an existing repository, or importing code from another repository.

Forking and Merging

While forking and merging may sound a bit dirty, for programmers, this is simply means creating and working on a side branch of a project and then implementing it with the main branch once the side project is complete.

A fork is simply a copy of the original repository, that you can make changes to without affecting the existing app. You can then later merge the changes with the master branch when you’re ready to go live with the changes.

A more common reason to fork a repository is to make changes to someone else’s work or to use it as a starting point for your own project.

So far, we’ve only been working on small individual projects, so we haven’t learned how to fork our repositories yet. Therefore, we’ve only been working on the main branch (also called the Master branch) of our repositories. Once we learn how to fork, I’ll write about it in a future blog post and add the link here! For now, I’ll leave it with you that there is a way to work on new features on the side or debugging code without affecting the main branch!

Cloning A Repository

Cloning a repository refers to copying all the files and folders in a GitHub repository and saving it to your computer. Reasons for cloning a repository include:

  • Being able to restore your own app if for whatever reason it gets deleted or you messed something up.
  • Using someone else’s app as a starting point for your own project.

To clone a repository, go to the repo you want to clone, and click on the “Clone Repository” button. It will then give you the option to copy some text to a clipboard.

Click the “Copy to clipboard” button, then go to your terminal and enter the command: git clone and then hit Command-V to paste the thing you just copied.

Then cd into the directory you just cloned, and enter the command bundle install.

Et voilà! You’ve successfully cloned the repository!

Personal Website

We spent ~an hour of class time making a professional looking site! Visit my site live at: melissacgonzalez.github.io

GitHub has a feature called GitHub Pages where it will automatically create a simple website for you if you have a repository called <your-username>.github.io. As you may guess, the url of your website is also <your-username>.github.io.

In class, we used our GitHub page to put up a simple one-page personal website using Bootstrap. It’s a good idea to have a personal website so that you have a quick way to put all our relevant information in one place. In order to set up our personal websites, we went through the following steps:

Step One: Choose a Bootstrap Theme

We browsed several websites that had pre-made Bootstrap themes and chose ones we wanted to customize. For my website, I chose the Agency Theme from StartBootstrap.com. The instructions for downloading the theme are outlined on the theme page.

Step Two: Make A Directory for your Site

To make your repository, go to your terminal and enter the following commands:

mkdir <your-username>.github.io
#creates a folder with the same name as your GitHub Pages address
cd <your-username>.github.io
#navigates into your new folder
open .
#opens the new folder in Finder

Then go to the folder where you downloaded your Bootstrap theme, and move all the files over to your new folder.

Step Three: Turn Your Directory into a Repository

Once all your files are in the folder, you can turn it into a Git repository using the directions above! The short version of the commands are:

git init
git add --all
git commit -m "Initial Commit"

Then go to GitHub and follow the directions above for creating a new repository.

Then push your code online: git push origin master

Once your code is pushed online, your website should be live! Check it out by visiting <your-username>.github.io.

To keep your site from being too generic, spice it up with YOU!

Step Four: CUSTOMIZE !

Once your website is live, you know you’ve done everything right in terms of setting it up! Now the fun part begins — customizing it for you! In class, we customized our sites by:

  • Replacing the default text with our bios and information about ourselves
  • Replacing the default pictures to be more reflective of ourselves, whether we used our own personal pictures, or found stock photos that were more meaningful to us.
  • Including links to all our accounts, including LinkedIn, Medium, and GitHub.
  • Including contact information or providing a way for people to contact us directly.
In order to Profit, make sure you leave a way for people to contact you!

Step Five: PROFIT!

Now that your info is online, feel free to share with business and personal contacts! Your personal website is also a good place to showoff your portfolio so others can see your work and connect with you, all in once place!

--

--

Melissa Gonzalez
Adventures in Code

Aspiring Web Developer. Fitness Enthusiast. Foodie. Beer Lover. Triathlete. Former Research Scientist.