163 行
3.9 KiB
Plaintext
163 行
3.9 KiB
Plaintext
=> /blog.gmi ブログ一覧へ
|
||
|
||
# 【HTML】静的サイトジェネレーター利用せず簡単に静的サイト管理する方法
|
||
公開日：2023-02-07
|
||
|
||
手動で静的サイトを作るのは簡単ですが、ちょっと面倒くさいですので、みんなはCMS（WordPress、fc2等）を使います。
|
||
でも、CMSは凄く重くて、遅くて、不安ですから、あたしみたいな方は静的サイトジェネレーターを使っています。
|
||
今回はジェネレーター利用せず静的サイトを作って、管理する方法を紹介します。
|
||
|
||
## インストール
|
||
|
||
今回は特に新しいソフトのインストールするのは不要ですが、公開するため「rsync」だけをインストールする事が必要となります。
|
||
でも、本日の記事は公開ステップを紹介しませんので、インストールしなくてはOKです。
|
||
|
||
## フォルダーとファイルの創作
|
||
|
||
まずは新しいフォルダーとファイルを創作しましょう。
|
||
HTMLと言えば、ヘッダー、メニュー、コンテンツ、フッターが思い出しますわね。
|
||
ですから、ヘッダー、メニュー、及びフッターは別々のフォルダーに貼りますね。
|
||
|
||
```sh
|
||
mkdir -p sizutekipage/{src,www}
|
||
mkdir sizutekipage/src/include
|
||
touch sizutekipage/src/{index,toiawase}.html
|
||
touch sizutekipage/src/include/{header,footer,menu}.html
|
||
touch sizutekipage/src/style.css
|
||
cd sizutekipage/src
|
||
```
|
||
|
||
ヘッダー、フッター、とメニューを作りましょう！
|
||
|
||
### include/header.html
|
||
|
||
```html
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
|
||
<head>
|
||
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
|
||
<title>クソガキ株式会社</title>
|
||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||
</head>
|
||
<body>
|
||
```
|
||
|
||
### include/footer.html
|
||
|
||
```html
|
||
<hr />
|
||
<center>
|
||
クソガキ株式会社
|
||
</center>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### include/menu.html
|
||
|
||
```html
|
||
<div class="menu">
|
||
<a href="/">トップ</a> |
|
||
<a href="/toiawase.html">問い合わせ</a>
|
||
</div>
|
||
<div class="container">
|
||
```
|
||
|
||
### style.css
|
||
|
||
```css
|
||
body {
|
||
background: #000;
|
||
color: #fff;
|
||
margin: 0;
|
||
}
|
||
|
||
a {
|
||
color: #666;
|
||
}
|
||
|
||
.menu {
|
||
background: #444;
|
||
font-size: 14px;
|
||
padding: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.menu > a {
|
||
color: #ea44fb;
|
||
}
|
||
|
||
.container {
|
||
background: #00f;
|
||
border: 1px solid #77a;
|
||
margin: auto;
|
||
width: 100%;
|
||
max-width: 1200px;
|
||
padding: 4px;
|
||
}
|
||
```
|
||
|
||
### index.html
|
||
|
||
```html
|
||
<h1>クソガキ株式会社へようこそ</h1>
|
||
私達のサービスはクソ物凄いだぜ！！
|
||
```
|
||
|
||
### toiawase.html
|
||
|
||
```html
|
||
<h1>問い合わせ</h1>
|
||
クソガキ株式会社<br />
|
||
地獄県鬼市死亡街6丁目6-6 サタンパレス666階<br />
|
||
最寄り駅：JL神様線 死後駅 徒歩約5ヶ月<br />
|
||
エレベーターがありません。
|
||
```
|
||
|
||
## コンパイル
|
||
|
||
catコマンドを使って、ウエブサイトを作成しましょう！！
|
||
まずはCSSファイルをコピーして下さい。
|
||
|
||
```sh
|
||
cd ..
|
||
cp src/style.css www
|
||
cat src/include/header.html src/include/menu.html src/index.html src/include/footer.html >> www/index.html
|
||
cat src/include/header.html src/include/menu.html src/toiawase.html src/include/footer.html >> www/toiawase.html
|
||
```
|
||
|
||
作成成功！！
|
||
|
||
## スクリプト化
|
||
|
||
しかし、毎回繰り返すのは面倒くさいですね。
|
||
スクリプトを作りましょう！！
|
||
|
||
```sh
|
||
touch make.sh
|
||
chmod +x make.sh
|
||
nvim make.sh
|
||
```
|
||
|
||
### make.sh
|
||
|
||
```sh
|
||
#!/bin/sh
|
||
rm -rf www/*
|
||
cp -v src/style.css www
|
||
cd src
|
||
|
||
for name in *.html; do
|
||
cat include/header.html include/menu.html $name include/footer.html >> ../www/$name
|
||
echo "'src/$name' -> 'www/$name'"
|
||
done
|
||
|
||
cd ..
|
||
```
|
||
|
||
作成するには、「sizutekipage」フォルダーから ./make.sh を実行して下さい。
|
||
ね、簡単でしょ？
|
||
|
||
以上
|