Intro to the Command Line
April 2014Important Note: I’m working on a Mac, so this will all be Mac-specific.
The command line is fastest way to get around your computer and the secret portal to tools that will level-up your web-design coding skills: git, sass, grunt, yeoman, jekyll, just to name a few. I’m no Unix-expert but the terminal is now the first thing I open when my computer opens because once you’ve learned the commands you need you’ll get around so much faster when coding. Trust me.
Hit CMD+Space and type
Terminal. Let’s get started:
When you open your terminal, you see a few things: the name of your computer, the folder you’re in, and possibly the date. You always start out in the Home directory, which is equivalent to the "home" directory in Finder.
To see the contents of a directory, type
I have a ton of stuff in mine, and you probably do too. Often times there are a lot of hidden files and folders in this directory, which you can see in the terminal (but cannot in Finder).
You can make folders (directories) and files from the terminal pretty easily. Let’s make one now called
This is just a short way of saying ’make directory’. If you do another
ls -l, you’ll see that we now have a directory called
To change folders, you type
cd - short for change directories. Let’s move into the
The terminal is intelligent. If you type `cd c` and then hit
TAB, it will move you into the directory that starts with
c or give you a few options for you to pick from. When I open my terminal, I always type
cd code +
and get to the folder I want to be really quickly.
Now that we’re in
code let’s make a file. Let's set up some files for a web project:
This will make a new, empty file called
index.html. Nice! Let's make folders and such like we just learned:
mkdir css mkdir js touch page.html touch post.html
You can see all of these things with the
ls -l command from before.
Awesome, but having all of our files in our
code folder isn't very helpful. They need a project folder. Let's put them in a folder called
mkdir blog && mv * blog
There were three things in that line of code you haven't seen before, so let’s break it down:
mkdir blog: this you’ve done before. We’re making a directory called
&&: this is command-line-speak for ’and’. So, ’do this and then do this’.
mv: this is short for move. Move the files.
*: this is a selector that means ’everything’. We could have moved every item one-by-one, but that would have been annoying.
blog: this is the target directory where we're moving everything, i.e. the folder we just made.
Now, when you do
ls -l you should just see one folder.
Let's change into the blog directory:
We just learned the
mv command. You can use the
mv command to rename files too. Let’s do it now:
mv page.html about.html
If yo do another
ls -l, you’ll see we now have an
about.html file instead of
We’ve decided that we don't want
about.html at all. Let’s delete it. However, before we do, we should probably really analyze whether or not we want to: deleting something from the command line is like sending it to the Trash Can and emptying it in one fell swoop.
r remove. Let’s go up a directory and delete the entire folder:
rm is short fo
cd .. rm -rf blog/
.. is how you go up one directory. The
-rf is necessary for doing anything to a folder (copying, deleting, moving) from the command line. If you’re familiar with programming basics, it means that we’re doing the action recursively.
Now that we’re in
code, let’s make a new directory called
webapp. We’re going to copy to our Desktop next:
You can get to the Desktop (and anywhere else) from the
code directory like this:
Remember our home directory from the very beginning? You can access that directory from any folder anywhere by
cp -rf /code/webapp /Desktop/webapp
cp stands for copy. Since we're copying a folder, we need to put the
That's it for Intro to the Command Line. None of it is particularly complicated, it's just a matter of learning the commands and using them regularly. Learning the command line for me was how I started learning sass, git, grunt, and lots of other tools that took my web design to the next level.
Joni Trythall did a write-up on this too that I like and is worth looking over if you high-level reasoning for why the command line's great.
If you've been working with the command line and are annoying that you can click and type, there are commands for that! I have these bash stickers that are pretty rad.