September 30, 2020
5 Reasons Why I Think Webflow Is Godlike for SEO
5
min read
There’s a lot of jargon to contend with when learning a new craft in the tech industry (SEO is literally the worst). Combining this with the challenge of finding relevant content at the right pace that doesn't assume a huge black hole of knowledge before you start can make learning new tech skills really tricky.
I discovered GitHub recently (I know, super later to the party) and I feel like it is uncomfortably powerful and vastly underrated in the web marketing community. You can make your own decision on this but I feel that GitHub has a real place in the modern toolbox of a web marketer for the reasons i'll highlight further in this guide.
The best way to show you what I mean is to run through how to use the tools. So, here’s how to install, use, and smash it with Git and GitHub, made super easy, no complex commands, completely from a noobs perspective (A professional dev did check this!).
Now a subsidiary (daughter company) of Microsoft after a spicy $7.5 billion, GitHub is the internet's largest source code repository. So to you and I, it's a web developers Dropbox (but way cooler and more powerful, sorry Dropbox).
GitHub allows documents to be accessed and managed super efficiently with precise version history on any computer connected to the internet, making it extremely powerful and a 'must have' for any savvy developer.
To put that into context; here's a very simplified example of 3 steps that git and GitHub could help keep history of:
Ultimately, through each iteration of the HTML document, each previous file is recorded with meta data which can be accessed at any time, from anywhere a computer is connected to the web (this is super simplified and it's a million times better than my example).
Often abbreviated to 'repo', a git repository is just a complicated way of saying 'remote file storage'. It's really as simple as that. It's a place to plonk your code in the cloud, which can be accessed, duplicated and contributed to.
Before you install Git, I would strongly recommend you to install an IDE (aka a text editor to work with your code). Most, if not all modern text editors plug right into GitHub now which will make life a lot easier later on in the guide.
If you're unsure on this part, install Atom - it's a go to for me and pretty much everyone I know who writes code on the daily.
Ok, now download git and install it onto your machine (it's not a huge programme). If you installed Atom as mentioned above, set it as the default text editor at the start of the installation shown here:
Then go through the installation with all the presets, and click 'next' until your finger bleeds.
At the end you'll be left with this ominous window which is called 'Git Bash' (if you see 'MINGw64' in purple before your user name, you can get rid of it here if it bugs you):
Yes, I named my PC 'TheBeast', don't laugh, it a long time ago 😆
Git Bash is an application primarily for Windows (MacOS & Linux has git utilities already built in to perform commands but windows doesn't) which provides a command line experience for the Git software. Command line is just a means of interacting with a programme using sequential lines of code that dictate a command.
Windows has it's own command line interface called 'command prompt' which allows users to interact with the operating system. Git Bash is the same premise but allows interaction with the Git software that we just installed. There's a little more to Git Bash but for now, that's all you really need to know.
Ok, when you've got that far 💪, go make an online account at GitHub and you're ready to start doing stuff! 🙌
Go to github.com, create an account and create a repository using the plus in the top right of the page shown below:
Name the repository whatever you like and give it a description:
Click 'create repository' and you'll get a URL. Make a note of it and copy it to your clipboard:
Ok, so now you've got a repository on the internet (a place to store your shizzle). But at the moment remember it's totally empty, kind of like a new folder you've created on your desktop but there's nothing inside.
This is where we can start doing fun stuff with the Git Bash window. You'll notice green text on the first line which is your windows username followed by the name of your computer and a squiggle (aka a tilde).
In my case, it reads: Adam@TheBeast ~
This is the first command you'll need to learn to get the ball rolling, it extracts the repository that we've just created on GitHub and clones it to your local machine.
To do that, in the terminal window type 'git clone' followed by your repository URL that you copied to your clipboard from earlier (pasting for windows in the bash terminal is SHIFT+INSERT rather than CTRL+V 😉):
You'll notice the message 'warning: You appear to have cloned an empty repository.' This is a good thing, it means your repo has been found and cloned, it's just empty at the moment 👌.
The cd is an acronym for 'change directory'. We need to use 'cd' to select and set the terminal to 'go inside' the repo that we have just cloned locally to our computer:
You'll notice that the repo directory name now prepends our top command line meaning that you're inside the directory (similar to the file structure in windows file explorer when you click through folders).
Now we're inside the right directory (our locally cloned repo), the 'touch' command creates a file in the directory you have selected. Let's create a simple HTML file with the command and call it hello.html (you can call yours whatever you like):
There's no message after this command but you can check this part was successful (it's useful to check to understand what you just did as well) by finding hello.html in your windows file explorer under the same directory path in your bash window.
for example, using the 'touch' command, my hello.html file was created here in my local computer:
C:\Users\Adam\myrepo\hello.html
Now we've created the file, lets open it with our text editor. You can do that in your git bash with 'atom .' where 'atom' is the program we want to open and '.' means 'the current directory':
You may have to wait a brief moment for it to load but the command will open the hello.html file in the Atom text editor (as long as you installed it). It will be a completely empty file to start with because we have only just created it.
After it's open in front of you, populate your file with some stuff. I filled my hello.html file with the basics of simple web page (you can write anything you like just to try this out though):
Once you're done go to file > Save or CTRL + S to overwrite the blank file with the code/stuff you've written inside.
The 'ls' (Lima Sierra) command lists the contents within the selected repository:
As you can see, following that command, only hello.html exists at the moment in our repository which is correct as this is the only file we have made.
So, we've got a saved file that we created locally in our cloned repository and we've written a bit of code inside the file. Next, 'git add' tells Git that we want to save this file to our cloud repository next time we make a 'commit'. Treat 'git add' like a staging area which tells Git that you want to track the file next time you make a commit.
Although it may not appear to have done anything, this command will track this file ready for next time we want to 'commit'.
Commit is just Git's fancy way of saying, take a snapshot of the repository in the current moment and commit to a 'save in time' (remember we are still doing this locally at the moment).
So far we have added our html file ready to be saved, commit then saves it into GitHub. To do that write the command 'git commit' followed by '-m' to add a descriptive message to your committal in quotation marks so you can refer to it later (helps understand what was included in the commit to help keep track if you're doing lots of 'commits'):
You'll notice after submitting this command that Git gives you some helpful information. In my case, I've added one file with 9 insertions (because the file contains 9 lines).
Ok, we're still operating locally at this point. If you check your GitHub repository, you'll notice it is still empty. With 'git commit' we have made a save to our repository locally, with 'git push' we will shoot that commit into our online repository in GitHub:
Boom 🤜🤛, done! If you revisit your repository in GitHub and hit refresh, you'll see your file uploaded:
Clicking into the file you can also see the contents that you wrote:
Ok we're doing good, but let's say someone else has contributed to your hello.html file which they have pushed (recorded) in GitHub and you want to grab the latest version of your code to make your next contribution/change locally. The 'git pull' command allows you to pull the latest iteration of your document/s straight from GitHub.
To simulate a change being registered in GitHub, lets use the online editor to 'commit' a change:
I added the words 'Hello again!' to my file so, now the file in GitHub (that we just edited) is the latest version of our project but, we still have the old file in our local repository.
So, go back to the bash window and use 'git pull' to grab it:
After executing the command you can see Git provides some useful data on the pull which highlights the differences between your local repo and the GitHub repo.
💡 Just a note here, Git isn't clever enough to know that we added text to an existing line of code, Git thinks we deleted a whole line and added a new one (just to bear that in mind).
Now if we open up our hello.html file again locally (if you've closed it you can use the command 'atom .' from earlier) you will see that the file has been updated with the content we placed within GitHub:
At this point (because I stayed in my lane career wise and only knew the basics of front-end dev), my mind was blown 🤯.
This command gives us a history of commits/changes to our code. As there's only been two changes your log should look something like this:
You'll notice the first commit from our local repo as well as the change made online in GitHub. You'll also see that each commit has a unique hash identifier (the long sequence of random letters and numbers), authors & dates.
Let's say the change we made in GitHub was horrible and after you pulled the change and reviewed it in your text editor, you noticed (hypothetically) that including 'Hello again!' in your code breaks something 💔.
In this instance you can revert back to a previous save by copying the unique hash from the 'git log' command. The command is 'git reset --hard hash code':
Now going back to your local file again, you'll see it reset to the original where 'Hello again!' doesn't exist, phew!:
I'm still a super noob with Git but it is extremely empowering to use it to share, amend and contribute to code. Like any respectable web marketer or SEO, you know how important a strong relationship with your developer is.
These tools are a great way for you to collaborate, learn and build a great relationship. I've often been expectant that devs use similar tools to me day-to-day, this is a great way to reciprocate.
I honestly think there's a place for these tools in an advanced web marketers repertoire. Here's a list of things I would have used GitHub for in the last 12 months (if I'd have known about it earlier):
This is just a introductory taster to wet your appetite so here's some resources to help you learn even more if you think it's useful:
You might think it's a bit unnecessary or that it won't apply to your particular situation but, whether you're able to collab with your devs or not, Git and GitHub are valuable tools that are wildly useful, widely used and above all, they're free for anyone to learn and use!
For me, it's a no-brainer, and i've found plenty of use-cases.
⚡ How will you use Github? ⚡
