最初に

シェルスクリプトを1日くらいググったり本やらで学んでみて、何にもわかってない状態ながらhtmlサイトの骨組みとなるデータを作れることに少し感動したので、復習とかねてまとめて見ました。

手順

まず、デスクトップとか適当な箇所にフォルダを作り、その中に下記のファイル（拡張子は.sh）を配置します。
ファイル内のコメントで、それぞれどんな作業をしているか記載しています。

それぞれコメント通りではありますが、
最初の　#!/bin/sh は、シェルスクリプト実施時の宣言のようなもので、これがないとシェルスクリプトとしてみなされないっぽいです

makesite.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にする必要はあんまなさそうです。
が、ターミナル上で色々同じような作業を繰り返しやっているなら、学べばいろんなことに使えそうだなあと思っているので、少しずつ勉強していきたいと思います。

shellscriptでhtmlの骨組みを作るファイルを作成してみました

最初に

手順

対象ファイルに実行権限をつける

実施

まとめ