最初に
シェルスクリプトを1日くらいググったり本やらで学んでみて、何にもわかってない状態ながらhtmlサイトの骨組みとなるデータを作れることに少し感動したので、復習とかねてまとめて見ました。
手順
まず、デスクトップとか適当な箇所にフォルダを作り、その中に下記のファイル（拡張子は.sh）を配置します。
ファイル内のコメントで、それぞれどんな作業をしているか記載しています。
それぞれコメント通りではありますが、
最初の #!/bin/sh は、シェルスクリプト実施時の宣言のようなもので、これがないとシェルスクリプトとしてみなされないっぽいです
# !/bin/sh
# mkdirで「フォルダ」を作成し、移動。
# $1はスクリプト実施時のサイト名が自動で入る変数です
mkdir $1
# cdで作成したサイトフォルダに移動
cd $1
# 同様にcss、jsフォルダ、ファイルを作成。touchは「ファイル」を作成します。
mkdir css js
touch css/style.css js/main.js
# index.htmlを作成し、catというコマンドで中身も少し記述します。
# header内でcss、jsフォルダも読み込むようにしておきます。
# タイトルには自動でアプリ名が入ります。
cat <<EOF > index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<title>$1</title>
</head>
<body>
<header>
<p>ヘッダー</p>
</header>
<div class="description">
<h1>$1</h1>
<p>本サイトはshellスクリプトで自動作成されています。<br>
jsフォルダ、cssフォルダを作成しています。<br>htmlのbody内の記述、cssフォルダ内のstyle.cssファイルは必要に応じて削除してください。<br>
<a href="https://necolas.github.io/normalize.css/">こちら</a>よりCSSのnomalize.cssを読みこんでいます。<br>
</p>
</div>
<footer>
<p>フッター</p>
</footer>
</body>
</html>
EOF
# cssフォルダに移動し、normalize.css（いろんなブラウザの影響を受けにくいcssファイル）をダウンロードします。
# (前述のhtmlのhead内で読み込んでいます)
cd css
curl -o normalize.css https://necolas.github.io/normalize.css/8.0.1/normalize.css
# ついでにデフォルトサイト用のcssも少し記述。
# 基本不要なので「cat」から末尾の「EOF」までは削除しても良いです
cat <<EOF > style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
height: 40px;
line-height: 40px;
background-color: azure;
}
header > p {
margin-left: 10px;
}
.description{
width:80%;
margin: 50px auto;
}
.description > p{
line-height: 18px;
letter-spacing: 1px;
}
footer{
height: 40px;
width:100%;
line-height: 40px;
position: absolute;
bottom: 0;
background-color: azure;
}
footer > p {
margin-left: 10px;
}
EOF
# 最後に、サイトのフォルダに移動し、openコマンドでブラウザで自動で開きます
cd ..
open index.html
以上のファイルを拡張子.shで作り、任意のフォルダ内に配置します。
対象ファイルに実行権限をつける
シェルスクリプトファイルを実行するには、そのファイルに「実行権限」というものをつける必要があります。
参考：Linuxでの権限確認について
https://qiita.com/Ryosci/items/e364e181ced7fbd5e239
※「権限の種類」の箇所参照。xが実行可能な状態ですね。
ターミナルを起動し、対象ファイルのある場所まで移動。
chmod +x ファイル名 という実行権限をつけます。
chmod +x makesite.sh
下記の写真だと、デスクトップにshellというフォルダを作り、その中にmakesite.shを作成しています。
なので、ターミナル起動後、cd コマンドでshellフォルダに移動（cd desktop/shell）をしてから、chmod +x makesite.sh をやるということになります。
実施
あとは実施です。
shellフォルダの中にいる状態で、./makesite.sh サイト名 と入力しエンター。
（サイト名は任意です！入力したものがタイトルタグに入ります。）
./makesite.sh アプリ名
サイトが作成され、自動で規定ブラウザが起動しました。
フォルダshellの中に、作成したアプリ名でフォルダができており、その中にindex.htmlやらできています。終わり！
今回練習用ということで入れていますが、bodyやstyle.cssの記述は必要に応じて削除したshellファイルを用意しておけば、環境構築が手早くできます！
まとめ
正直htmlファイルならVScodeなら!タブで一瞬で骨組みできるし、これくらいの内容ならあえてshellにする必要はあんまなさそうです。
が、ターミナル上で色々同じような作業を繰り返しやっているなら、学べばいろんなことに使えそうだなあと思っているので、少しずつ勉強していきたいと思います。