I decided to do the 100DaysOfCode challenge on Twitter. Basically you have to do at least an hour of code each day for 100 days. For me it’s been a few hours a day, but I’m on a serious mission.
For the most part I’ve been focusing on HTML5 and CSS3. I desperately needed to get up to date with both. Today however, I felt like changing it up a bit. I decided to create an HTML template generator using BASH scripting. I thought about using Python, but BASH seemed more suited to the task, and it’s been a while since the last time I used it.
I’ve only messed around with BASH a few other times. The last time, was probably about 15 years ago when I had to rename a couple thousand image files in a directory. I wrote a script to do the work for me. BASH is perfect for taking repetitive tasks and automating them for you.
BASH stands for the Bourne Again Shell. It’s a scripting language native to Linux and Unix systems. I figured it would be the easiest way to create a program to auto-generate the starting skeleton of an HTML document. You know, all the boring stuff in the head like the title, meta tags, links to your fonts and scripts. Now all I have to do is type the command “template” in a terminal window and it creates all that for me. Then just customize the meta-tags, title and anything else that needs to be changed to fit the project. Here’s how I did it.
First I created a directory on my hard drive ~/scripts/bash
In the new directory I created a basic text file with my html template in it and named it html_template.txt I normally write my own skeletons but for the test I found this really cool site that does it for you. http://htmlshell.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=font1|font2|etc" type="text/css">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
</body>
</html>
Next I wrote my bash script:
#! /bin/bash
# script to auto-generate html templates.
# create alias and link to this script.
#
# example: alias template=~/scripts/bash/./template_maker.sh
#
# point the html template on line 13 to proper directory.
# In my case ~/scripts/bash/html_temp.txt
echo "What is the name of the html file you want to create?"
read Name
cat ~/scripts/bash/html_temp.txt >> $Name
mv $Name ${Name}.html
echo "Would you like to create another file? Type 1 for yes or 2 for no."
read userInput
if [ $userInput -eq '1' ]; then
clear
./template_maker.sh && exit
else
clear
echo "Thank you, come again!"
fi
Here’s a basic explanation….
I created a script called template_maker.sh
Using “echo” we ask the user the name of the file they want to create.
The user types in the name creating the Name variable.
Using the cat command we copy the text (the html template) from html_temp.txt and append it to the $Name variable.
We then copy the Name variable using the “mv” command and add the .html extension.
The program then asks the user if they need to create another file by entering 1 for yes or 2 for no.
If they enter 1 the program starts another instance of the script before exiting and asks the user the name of the file they want to create starting the process all over again.
If the person types anything other than 1 the program ends and prints “Thank you, come again!” to the screen.
I then turned the script into an alias command by permanently adding it to the last line of my .bashrc file in my root directory.
# my custom bash scripts alias template=~/scripts/bash/./template_maker.sh
If you decide to try this or use this make sure the command points to the directory you stored the bash script in, and make sure you link the text file in the script to the proper directory as noted in the comments section at the top of the script.
Now whenever I start a new project I just open my terminal program, cd to the new project directory, figure out the page names I’m going to create and get the starter templates or boiler plates loaded. Saves me a good 15 to 20 minutes of time depending on the size of the project I’m working on.
I run the “template” command. Enter the names, index, links, directions, contacts one at a time and the script creates the skeletons of index.html, links.html, directions.html or whatever I want to name the page.
I’d like to improve on this in the future with a more elegant loop, and maybe add an option to create a basic css stylesheet as well. I’m sure I’ll think of a few other improvements too.
So that’s my second attempt at a simple bash script. Hope this made sense and if you read this far, thanks for reading!