サイトの作り方

学習の悩みは忘却することです。せっかく学習しても１年もたてばすっかり忘れてしまっているのに気がついて愕然とすることがあります。知識は繰り返し触れないと蒸発してしまいます。

このようなときにHTML文書のリンク機能は大活躍します。必要な情報をリンクのクリックで簡単に呼び出すことができるからです。しかし、HTML文書は作成とリンクの管理が面倒です。できるだけ手間をかけずに HTML サイトを構築する方法を考えてみました。

手作りのサイト

サイトを手仕事で作る作り方を考えました。ただし、このホームページで紹介したテンプレートを利用した情報管理のための定型的なサイトです。文書の構造を定形的にすることで操作性を保ちながら作成を容易にすることができます。このホームページの「Haskell 入門」のページはこれから紹介するシェルスクリプトを利用して作成しました。

それでは、サイトの作り方の説明に入りましょう。まずはサイトのディレクトリ book を作ります。さらにその中にページを入れるサブディレクトリ chapter1, chapter2, ... を作ります。 

~$ ls -R book
book:
chapter1  chapter2

book/chapter1:

book/chapter2:

次に chapter1 と chapter 2 それぞれに HTML のテンプレート header, article, footer をコピーします。これは上で紹介したテンプレートを３分割したものです。article はテンプレートの article タグの部分。header は atricle の前の部分、footer は article の後ろの部分です。

header の nav タグ内には chapter1 chapter 2の間のリンクを相対パスで記入します。footer の nav タグには chapter 内の文書のリンクを相対パスでリンクします。header の nav リンクはテンプレートの上の方に水平に現れ、タブの働きをします。footer の nav リンクはサイドバーに現れます。

article のテンプレートを利用して、文書ウインドウの文書を作成します。文書は基本的に article タグと section タグによる論理的文書構造にします。

HTML文書はこの header と article テンプレートから作成した foo.txt 文書と footer 文書を cat コマンドで連結することによって作成します。foo.txt 文書の拡張子は .txt として .html をつけないのは、これを元にして foo.html を作るためです。 

~/book/chapter1$ cat header foo.txt footer > foo.html

上の手続きは new というスクリプトで自動実行できます。new の引数はファイル名 foo にします。 

~/book/chapter1$ ./new foo

chapter 内の文書が多くなったら、一括して mkh スクリプトで HTML 文書を作成することもできます。 

~/book/chapter1$ ./mkh

アップロード用のディレクトリは別にしておいたほうが、無駄なファイルをアップロードする心配がありません。これには send スクリプトを用います。ディレクトリ内の *.html ファイルのみをアップロード用のディレクトリに移ます。 

~/book/chapter1$ ./send

Haskell 入門はこうやって作ったページです。

使用したシェルスクリプト

これらのスクリプトはそれぞれ次のようになります。非常に単純なスクリプトです。

new スクリプト

#!/bin/sh
if test -z $1; then
echo "no argument"
exit 1
fi
cat header $1.txt footer > $1.html
exit 0

mkh スクリプト

#!/bin/bash
files=`ls *.txt`
for file in ${files[@]}
do
dest=`echo $file | sed s/txt/html/`
cat header $file footer > $dest
done

send スクリプト

#!/bin/sh
cp *.html ~/public_html/book/chapter1/

HTML文書テンプレート

header

<!doctype html>
<html lang="ja">
<head>
  <title>foo.html</title>
  <meta charset="utf-8">
  <style>
    body {width: 800px; margin: auto;}
    #contentsbox {
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-template-rows; auto;}
    #contents {grid-column: 1/2; grid-row: 1/2;}
    #sidebar {grid-column: 2/3; grid-row: 1/2;}
  </style>
</head>
<body>
<header>
<h1>Header<h1>
</header>
<nav>
<a href="">Tab 1</a>
<a href="">Tab 2</a>
</nav>
<hr>
<div id="contentsbox">

article

<article id="contents">
  <h1>Article Title</h1>
  <p>Article Paragraph</p>
  <section>
    <h1>Section Headline</h1>
    <p>Section Pargraph</p>
  </section>
</article>

footer

<aside id="sidebar">
  <section>
    <h1>Side Bar</h1>
    <ul>
      <li><a href="">Link 1</a>
      <li><a href="">Link 2</a>
    </ul>
  </section>
</aside>
</div>
<hr>
<footer>
  <p>Footer</p>
</footer>
</body>
</html>