シェルスクリプト『HTMLページ作成』

2020年10月7日 15:19

今回使用するシェルは『bash』を使用します。

備忘録ですので、シェルコマンドの説明は省きます。

手順

1.シェルスクリプトをまとめるフォルダを作成

今回は『shellscript』というディレクトリにします

$ mkdir ~/shellscript

$ cd shellscript

2.シェルスクリプト作成

今回は『mkdir-html』に命名しました。

$ vi mkdir-html.sh

3.viエディタに記述

『i』入力しインサートモード起動

mkdir $1
cd $1
touch index.html
touch readme.md
mkdir css js
touch css/style.css css/reset.css js/script.js

cat <<EOF> index.html
<html lang="ja">
 <head>
   <meta charset="UTF-8">
   <meta name="author" content="ShoyaKajita">
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/reset.css">
   <title>$1</title>
 </head>
 <body>

 <script src="js/script.js" ></script>
 </body>
</html>
EOF

cat <<EOF> css/reset.css

<-- 記述 -->

EOF

cat <<EOF> css/style.css

<-- 記述 -->

EOF

cat <<EOF> readme.md

<-- 記述 -->

EOF

code .
git init

記述が終了したら『esc』をクリックして『:wq』で保存します。

4.権限の設定

権限確認
$ ls -l mkdir-html.sh

所有者のみ『w』ができるようにする
$ chmod 755 ./mkdir-html.sh

5.『.bash_profile』にてPATHを通す

$ cd

$ vi  ~/.bash_profile

i

shellscriptディレクトリにある.shのPATH有効
PATH=$PATH:~/shellscript

esc

:wq

変更を保存、適応
$ source ~/.bash_profile

6.VScodeに『code .』を適応させる

四角が四つのところから『shell』を検索し、インストールする。

『command』+『shift』+『P』、

『シェルコマンド:PATH内に'code'をインストールします』を選択し完了

7.実行しアプリの骨組み作成

$ cd もしくは $ cd 好きなディレクトリ

$ mkdir-html.sh

VScodeが立ち上がり設定したコードと『git』にリポジトリを新規に作成できました。

この記事が気に入ったらサポートをしてみませんか？