Imaginesの部屋

有害物質排出量削減、プライバシーへの配慮、情報セキュリティの向上、通信回線の有効利用、公正競争の促進、障がい者用ツールへの配慮等の為、広告の表示を自粛し、Javascriptの利用を削減しております。安全・安心・公平で地球と人にやさしい情報化社会の形成のため、みなさまのご協力をお願いいたします。

静的ウェブサイトを楽に管理したい！ヘッダのインポートを自動化するスクリプト

まえおき

自分のウェブサイトを持つ。やり方はわかってるんだけど…

めんどくさい！

HTMLを直に打つのは手間がかかるし、

「自分のサイトは小さいから、PHPやWordpressのようなのを導入するまでもないし、サーバの確保は大変だし…」「かといってGooogleのようなのに依存するのはサイトを重くするし、広告が勝手についたりするし…」

「ヘッダのインクルードだけでも自動化したい！」

で、どうするの？

結局、bashでどうにかなりました。

最終的にはこんな感じのシェルスクリプトです。

※スクリプトのライセンスはMITにしておきます。要するに著作権とか細かいことはどうでもいいってことです。

# スクリプトが実行されるカレントディレクトリを一時保存
current_dir=$(pwd)

# 出力ディレクトリ作成
mkdir -p out

# src ディレクトリ内のすべてのファイルに対して処理を実行
for file in src/*; do
    # 入力ファイルの名前を取得
    input_file=$(basename $file)

    # "<!--HEADER-->"の位置を探し、存在する場合その位置を取得
    header_position=$(grep -aob "<\!--HEADER-->" "$file" | cut -d ":" -f 1)

    if [ -n "$header_position" ]; then

        # ヘッダ位置の前までを一時ファイルにコピー
        head -c $header_position "$file" > temp.html

        # ファイルから<!--TITLE-->を探し、存在する場合その位置を取得
        title_position=$(grep -aob "<\!--TITLE-->" "$file" | cut -d ":" -f 1)

        if [ -n "$title_position" ]; then

            #<!--/TITLE--> を探す
            title_end_position=$(grep -aob "<\!--/TITLE-->" $file | cut -d ":" -f 1)

            if [ -n "$title_end_position" ]; then

                # ヘッダファイルから<!--TITLE-->を探し、存在する場合その位置を取得
                header_title_position=$(grep -aob "<\!--TITLE-->" header.html | cut -d ":" -f 1)
                if [ -n "$header_title_position" ]; then

                    #headerファイル内の<!--TITLE-->より前を一時ファイルに追記
                    head -c $header_title_position header.html >> temp.html

                    #タイトルタグを追記
                    echo -n "<title>" >> temp.html

                    #タイトル部分だけを抽出
                    head -c $((title_end_position)) "$file" | tail -c +$((title_position + 13)) >> temp.html

                    #タイトルタグの終わりを追記
                    echo -n "</title>" >> temp.html

                    #ヘッダファイル内の<!--TITLE-->よりあとの部分を一時ファイルに追記
                    tail -c +$((header_title_position + 13)) header.html >> temp.html

                    #ソースファイル内の<!--TITLE-->の終わりから、ファイル末尾までを追記
                    tail -c +$((title_end_position + 14)) "$file" >> temp.html
                else
                    echo "ヘッダファイルに<!--TITLE-->がありません。"
                fi
            else
                echo "$input_file""に<!--/TITLE-->が記述されていないか、誤字脱字があります。"
                echo "ファイルが正しく出力されない可能性があります。"
            fi

        else
            #タイトルがない場合は
            # ヘッダ位置の後からファイル末尾までを一時ファイルに追記
            tail -c +$((header_position + 14)) "$file" >> temp.html
        fi



        # 一時ファイルを出力ディレクトリに移動し、入力ファイルと同じにリネーム
        mv temp.html "out/$input_file"
    else
        cat header.html >> temp.html
    fi

    # 完了メッセージを表示
    echo "処理完了：'out/$input_file'"
done

# 処理が終了したらカレントディレクトリを戻す
cd "$current_dir"

このスクリプトを任意の名前で保存し、同じディレクトリに「src」というディレクトリを作り、記事のHTMLファイルを入れておきます。そして、全ページに共通するhtmlをheader.htmlに書く。(スクリプトと同じディレクトリに保存)

このスクリプトを実行すると、 html ファイルの中のという文字列がheader.htmlの内容に置き換えられます。また、htmlファイルの  の直後の行に

<!--HEADER-->
<!--TITLE-->これがタイトルです<!--/TITLE-->
<main>
<p>Lorem ipsum</p>
</main>

のような形でタイトルを追加し、 header.htmlの中の<head>要素の中に を

<!DOCTYPE html>
<html>
<head>
<!--TITLE-->
</head>
<body>
.....

このような形で入れておくと、titleも自動で設定できる。

楽に記事を書く

それから、記事を書くときにhtmlタグを直打ちするのはやっぱり面倒。だから、ここも手抜きをして、Markdownで書きます。 Markdownの書き方はMozillaのヘルプページ(外部サイト,Googleアナリティクス注意)あたりにヘルプが書いてあります。

ReTextを使うと、MarkdownをHTMLに変換できます。

ReTextのスクリーンショット(20.2KiB)

インストール方法は $flatpak install retext

ReTextのメニューのEdit→View HTML codeをクリックするとあら不思議、あっという間にきれいなHTMLコードができます。

ここからbody部分だけ切ってコピペしてHTMLファイルを作り、シェルスクリプトでヘッダを付け足してディレクトリごとアップロード。

これだけで静的ウェブサイトはある程度作れてしまいます。 CodeBerg Pagesなどであればgitの仕組みを使っているので管理は楽です。

おしまい

ライセンス

あなたはライセンスの条件に従う限り、自由に、どのようなメディアやフォーマットでも複製したり、再配布したり、リミックスしたり、改変したり、別の作品のベースにしたりできます。（営利目的も含め、どのような目的でも）