Basic BASH Terminal commands for Web Designers

The moment you choose to get into web design and development, you choose to enter a universe of endless connections in between machines scattered across the globe.

Louise Bourgeois’s Maman spider sculpture and the web it cast in shadows at dawn
Louise Bourgeois’s Maman spider sculpture and the web it cast in shadows at dawn. National Gallery of Canada. Ottawa, Ontario Canada. Photo ©Eric Girouard.

There is you at your computer, and then there is everything else on the internet. By definition, the rest of the internet is “remote” to you dear reader of this post.

So, once again by definition, web design is a career where all the important stuff happens on other machines – on “remote web servers” usually – and being able to connect to such a machine to create and edit files and folders as well as manage transfers of data from machine to machine is a valuable skill.

The most efficient tool for logging into any remote computer is the CLI (“command-line interface“) which you gain access to when you start an application called the Terminal.

Screen recording of live use of the Terminal to create folders and files. Sorry for the low resolution!

Welcome to the Matrix

Welcome to the Matrix.
Screen capture of the command-line animation in Cmatrix.

The Terminal, by default on most Unix-like systems such as macOS and Linux, runs an application called “BASH” which stands for Bourne Again Shell.

Gnome Terminal in Ubuntu Linux software center.
Gnome Terminal in Ubuntu 18.04 LTS Linux software center.
The Terminal is an application that displays a text-only screen – a “command-line interface” – where you can write commands directly to the computer, without the use of a mouse or clickable icons.

The following set of commands are meant to be typed directly by the user into the Terminal as they use the command-line interface on a daily basis.

The main advantage of using the CLI is that it isn’t attached to the computer at which you sit. You can be logged into a machine located in South Africa (which is pretty far away from Montreal) just as easily as being logged into your laptop at home.

sudo

sudo

The “super user do” command is used to ask for administrator privileges (permission to “manage” or “administer” the computer) before doing something that affects the computer, such as installing software or performing tasks outside of your own personal user folder.

Usage

sudo apt install apache2

apt: the advanced package tool

sudo apt install something

The apt application works basically the same way as Apple’s Mac Store. It search for and install software on the computer. It also lets you control (update, upgrade, delete or purge) that software.

Usage

sudo apt update
sudo apt upgrade
sudo apt install apache2
sudo apt install apache2 mysql-server phpmyadmin

pwd: present working directory

pwd

The “present working directory” command tells you what folder you are in. It is the same as as looking in the location bar of a folder in macOS Finder or Windows Explorer window.

cd: change directory

cd

The “change directory” command moves from one folder to another. For example, enter a subfolder or back up one directory level.

Usage

Change to subfolder

cd foldername

change to parent folder

cd ../

list: display the contents of a folder

ls

list (with details)

ls -l

The list command print out the contents of a folder (files and subfolders, etc) to the Terminal.

The “long format” option adds extra information such as permissions, owner and group, and date.

mkdir: create a folder

mkdir

The “make directory” folder creates a new empty folder.

Usage

mkdir newfoldername

rmdir: remove a folder

rmdir

The “remove directory” command removes folders. However, the folders must be empty.

Usage

rmdir foldertodelete

cp: copy a file

cp

The “copy” command copies a file or folder.

Usage

cp filetocopy filetopaste

mv: move a file

mv

The “move” command moves a file or folder from location A to location B.

Usage

mv filetomove filetopaste
mv filetomove ../filetomove

nano: the tiniest text editor

nano index.html

nano is a very basic, and very simple, text editor. It is included in most computer operating systems (except Microsoft Windows, which has Notepad). It is often used when debugging or when only very simple text edits are required.

Author: Eric Girouard

Eric Girouard is a photography and design teacher in the Graphic & Web Design department, which he joined in 2001. He holds a BFA in Fine Art specializing in Drawing & Painting from Concordia University. His stock images were distributed worldwide by Corbis. Eric also worked at Trey Ratcliff’s “The Arcanum – Magical Academy of Artistic Mastery” and served as a photo contest judge for Viewbug.com.

Leave a Reply