Simple Bash Scripting for Web Designers:
Simple Automation Ideas

Written by:
chuckmathias

Here’s the code we will be working on. It is a simple script that opens a folder in Sublime Text, starts gulp running in the project and opens a website–all with one command in the terminal.
Filename: startup (no extension necessary)
Project Folder: /home/{computername}/public_html/examplesite.com

There are a lot more things we can do with scripts, but I want you to see how easy it is to do some pretty fun stuff, especially if this is something you haven’t done before. Let’s walk through the above code and explain what is happening.

Starting the File

#!/bin/bash
# Comments go here...
This code starts the bash script. #!/bin/bash should be at the top and any comments (throughout the script should have a “#”.

Creating a variable

SITE="$1"
SITE=”$1″ creates a variable called SITE that we can use later on in the script. The $1 passes the first value we give after the command in the terminal. For example, in our script we will write in the terminal: sh startup examplesite.com. This will make SITE=”examplesite.com”. You can add other variables after this. $2 will be the second, $3 the third…

Making it do something

sublime-text $HOME/public_html/$SITE
cd $HOME/public_html/$SITE && gulp
chromium-browser http://asoftmurmur.com/?v=1e2f091b002300000021
In this script we are doing three things. Notice they are simple individual commands that we could run on the command line individually. In a script one command in the terminal will run them all. Let me explain quickly what each of these does.
sublime-text $HOME/public_html/$SITE targets your project folder and opens it in sublime text (this might be different on your computer depending on how you have structured your folders).
cd $HOME/public_html/$SITE && gulp Changes the directory to your project folder. The “&&” makes it so it runs the next command (gulp) immediately. Now gulp, or grunt, or whatever you use can be started automatically.
chromium-browser http://asoftmurmur.com/?v=1e2f091b002300000021 Opens (in Ubuntu) the chromium browser and opens the page asoftmurmer.com, (which, by the way, is a great site if you need to focus). You can even save it to open your personal settings if, on A Soft Murmur, you click on “Share”.

Save and Make Executable

You need to save the file. In this case we just named it “startup”. No need for a file extension. Then make it executable. If your unsure how to do this check out this link.
I would recommend saving it in a new folder in your home directory called “bin”. You can use this to store all your scripts and in a later lesson we will “add it to your path” so that you can call the command without the “sh” and from anywhere in the terminal. For now you will have to, in the terminal, go to the folder where the script is saved. In our case it would be “cd bin”. Then you can start the script by writing the command: sh startup EXAMPLESITE.com (where you replace EXAMPLESITE.com with your project folder.
The three things that were designed to happen should happen. If not I hope you have fun figuring out why. That is also a part of learning bash!
In these next few posts we will look at other simple scripts for beginners with a focus on making life easier for web designers. (We use Linux for most of our daily work, but these will work for Mac users as well, which is probably a large percentage of professional designers).