shellscript로 HTML 골격을 만드는 파일을 만들려고했습니다.

5245 단어 ShellScript

먼저



쉘 스크립트를 하루 정도 구그하거나 책이나 배우고 보고, 아무것도 모르는 상태면서 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에서 권한 확인 정보
htps : // m / rs / ms / e 364 181 d7fbd5 239
※「권한의 종류」의 개소 참조. 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라면!
하지만, 터미널상에서 여러가지 같은 작업을 반복하고 있다면, 배우면 여러가지 일에 사용할 수 있을 것 같다고 생각하고 있으므로, 조금씩 공부해 나가고 싶습니다.
첫 번째 Docker화된 MERN Stack 웹 앱 구축
초콜릿 차트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage