In this post I am going to do a quick run down of how you can store your well crafted code in source control.
Setup
I'm going to assume that you have an account on Github and are somewhat familiar with the command line. For those who prefer a GUI, like me, I will be showing you how to upload or push your code up with the Github Desktop program.
Pre-requsite
- Git installed
- Code editor of choice installed
- Account on Github
The beginning
Let's say we have a simple website that we want to share and maybe collaborate on. By using a service like Github we can upload or push our code to a remote repository. This repository will be the single source of truth for the website. To keep this short and to the point I'll be using a simple one-page website, built only with HTML and CSS.
The middle
We start with our site with some boilerplate code. I've made a folder ./github-website which I have in a project folder on my computer. In there I have two files index.html and styles.css.
Here is index.html file content:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My simple website</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1 class="title">My website - a Github collaboration project</h1>
</header>
<main>
<p class="paragraph">Hello world! This is my simple website.</p>
</main>
</body>
</html>
Here is the styles.css content:
/* Stylesheet */
body {
text-align: center;
}
.title {
font-weight: 700;
font-size: 2rem;
}
.paragraph {
color: #34ad65;
}
These files are in the directory ./github-website and here is where we will initiate a git repository. If you are somewhat familiar with the command line then you can navigate to your folder and run the following command:
git init
Git will now create a hidden folder with configuration files and start watching your files for any changes. We can now open Github Desktop and add the project folder.
The files should appear as new changes in the pane on the left. You can click on them to see the changes in the window on the right. To commit the changes we can write a commit message and summary at the bottom of the pane.
If you where using the command line or git bash then the following code would be the equivalent
git commit -m "First commit" -m "Adding index.html and styles.css to the project"
Then we can upload or push the code to a new remote repository on Github.
The program is now telling us that there are no more local changes so we are up to date. But our code only exist on our local machine. To publish our code and create a remote repository on Github just hit the blue "Publish repository" button. It will then ask you to give the remote repository a name, an optional description and decide if you want the repository to be public or private.
If all goes well you should be able to inspect the repository online!
The end
I hope this post has been helpful. I find it easier to work with a good tool in which I can see what changes has been made, which files I'm working with and has useful information about what I can do. The terminal is handy sometimes and I believe it is good to know what goes on under the hood, sometimes, but it is unforgiving and unintuitive. It gives you nothing and expect you as a user to know everything. What are your thoughts on tools like the terminal and Github Desktop? Do you prefer a GUI over a command line interface?
Top comments (0)