前回記事では、イミュータブルLinuxである「openSUSE MicroOS」とコンテナツール「Podman」を解説し、記事の後半でWebサイト作成ツール「Pico CMS」を設置しました。
今回はPico CMSでの簡単なWebページ作成や、テーマ変更で見た目を変更する方法などを紹介します。
Pico CMSの特徴
「Pico CMS」はCMS(コンテンツ・マネジメント・システム)の一種で、これによりHTMLやCSSを深く知らなくても、Webサイトを作ることができます。
WordPressなどと違いデータベースを使わないため、バックアップはファイルをコピーするだけで済みます。また、どのページがどのファイルに対応しているか分かりやすいのも特徴です。
なお、コンテナを利用したWordPress構築については以下の記事を参照してください。
ページの書き方は、記号(- * # など)を使って装飾したりヘッダーなどの構造を記述できる、「マークダウン」方式でWebページを作成できます。
また、HTMLを混ぜて記述したり、CSSを用いることもできます。
各ページを作成
各ページはテキストエディターで編集します。マウスやウィンドウを使うGUI環境がなくても利用可能な「nano」というテキストエディターを以下のコマンドでインストールします。
sudo transactional-update pkg install nanoMicroOSではコマンド実行後、再起動するとインストールが有効になります。以下のコマンドで再起動します。
sudo rebootでは、まずサイトのタイトルを変更しましょう。サイトタイトルは設定ファイルに書いたものが反映されます。
設定ファイル「config.yml」はテンプレートが用意されているので、コピーして用います。以下のコマンドでコピーできます。
cp ~/pico/site/config/config.yml.template ~/pico/site/config/config.yml本記事ではファイル編集をテキストエディター「nano」で解説します。
nano は、CLI(コマンドライン)環境でも操作しやすいエディターです。
「nano ファイル名」でファイルを開きます。もしファイルが存在しない場合は同時に作成されます。
保存は、Ctrl + O で行いますが、本当に良いか確認されるので、エンターや場合によってはY キーで続行します。
nano を終了したい場合は Ctrl + X で行います。
次のコマンドでnanoを使ってconfig.ymlを開き、サイトのタイトルを書き換えます。
nano ~/pico/site/config/config.yml開いたファイルの始めの方に、「site_title:」という行がありますが、「Pico」と書かれている部分が現在のサイトタイトルです。
この部分を、「Pico + Podman でサイト作成」と書き換えてみましょう。ただし、site_title: のあとには必ず半角スペースを入れてください。
Ctrl + Oで保存したら、ブラウザに戻り[F5]キーなどでリロードしてみましょう。書き換えたタイトルに変更されました。
まだトップ(index)ページを作成していない場合、上のようなページが表示されます。indexページを作ると表示されなくなります。
それぞれのページは、contentディレクトリに「ファイル名.md」というファイルを作って作成します。indexページは「index.md」というファイル名にしましょう。
ファイルは以下のコマンドで、テキストエディターのnanoを用いて作成・編集します。
nano ~/pico/site/content/index.mdファイル内には、上下を--- で挟まれた「メタヘッダー」と呼ばれる部分が必要で、タイトルや説明、メニューへの表示方法などを記述します。
以下をコピペしてください。
---
Title: Pico CMSで作るシンプルサイト
---
# Pico CMSへようこそ
このサイトは Pico CMS を使って作成しています。
Pico CMS はデータベースを必要とせず、Markdown ファイルだけで Web サイトを構築できる軽量CMSです。
## 主な特徴
- データベース不要
- Markdownで編集可能
- 軽量で高速
- テーマ変更に対応
## サンプルページ
- [サイトの歴史](?history)
- [運営者について](?about)
CLI環境の Linux とも相性が良く、コンテナ環境でも手軽に利用できます。保存しブラウザを再読込すると、indexページが表示されます。
index.mdに書いた「#」や「-」のような記号が、箇条書きやヘッダーに対応していることが分かります。
「サイトの歴史」ページと「About」ページを作り、画像も表示させましょう。
#テキストエディターnanoでファイル作成・下のボックス内容をコピペ / 最後にCtrl + Oで保存
nano ~/pico/site/content/history.md---
Title: サイトの歴史
---
# サイトの歴史
このページは Pico CMS のサンプルとして作成されています。
## 2026年
- openSUSE MicroOS 上で Pico CMS を導入
- Podman コンテナで運用開始
- テーマやデザインの検証を開始
## 今後の予定
- コンテンツの追加
- デザインの調整
- Tailscale Funnel を利用した公開
Pico CMS は Markdown ファイルを追加するだけでページを増やせるため、管理が非常に簡単です。#テキストエディターnanoでファイル作成・下のボックス内容をコピペ / 最後にCtrl + Oで保存
nano ~/pico/site/content/about.md---
Title: About
---
# 運営者について
こんにちは。
このサイトでは Linux、コンテナ技術、オープンソースソフトウェアに関する情報を発信しています。
## 興味のある分野
- Linux
- Podman
- Docker
- WordPress
- Pico CMS
- openSUSE
## お問い合わせ
ご質問やご意見がありましたら、お気軽にご連絡ください。
## 作者
<img style="width: 180px; height: 180px; object-fit: cover; border-radius: 50%; margin: 0 0 1rem 0;" src="/assets/img/Profile.jpg" alt="作者画像">
<br>
***
<div style="font-size: 0.7em">このページは Pico CMSで作成されています。</div>
サイトに掲載する画像の転送
Webサイトを作成する際、画像などのファイルが必要になってきます。Pico CMSではassetsディレクトリに画像などのファイルを置くことが一般的です。以下のコマンドで、画像用ディレクトリを作ります。
mkdir ~/pico/site/assets/imgただ、Pico CMSを動かしているMicroOSはGUI環境ではないので、ブラウザを動かしたり画像を確認しながらダウンロードができません。
そこで、ホストPCに画像を用意し、scpコマンドを使って、ゲストPCであるMicroOSへ転送します。このコマンドを使うと、IPアドレスなどを指定し、仮想マシンを含む別のPCとファイルのやり取りができます。
ホストPCのファイラーで、サイトで使いたい画像があるディレクトリ(フォルダ)を開き、何もない部分で右クリック。[端末で開く] (Windows11の場合は[ターミナルで開く])を選びます。
端末が開くので scp コマンドを使いファイル転送しましょう。例えばファイル名がホストPC上の「Profile.jpg」で、ゲストPCのアドレスが「192.168.2.17」の場合は次のとおりです。
scp Profile.jpg test@192.168.2.17:~/pico/site/assets/img/転送が完了したら、ブラウザでaboutページを再読込します。
先ほどまで表示されていなかったプロフィール画像が表示されるようになりました。
なお、プロフィールに用いたのは四角い画像なのですが、丸く表示されています。
これはabout.md内で、htmlで呼び出したプロフィール画像にCSSでスタイル(見せ方)を適用しているからです。次の部分です。
<img style="width: 180px; height: 180px; object-fit: cover; border-radius: 50%; margin: 0 0 1rem 0;" src="/assets/img/Profile.jpg" alt="作者画像"> このように、Pico CMSの各ページは、マークダウン記法で記述することを基本としながらも、HTMLやCSSを組み合わせることもできます。また、本記事では触れませんが外部CSSファイルに記述することも可能です。
ナビゲーションメニューの表示順を変更
ページ右上にある各ページへのリンク(ナビゲーションメニュー)の並び順を変える方法が、Pico CMSに用意されています。例として、Aboutページが最後に表示されるようにしましょう。
まず、config.yml をnanoで開きます。
nano ~/pico/site/config/config.yml以下の2つの項目を下記マーカー部分の値に変更します。
pages_order_by_meta: Junban
pages_order_by: meta
各ページのメタヘッダー部分に、「Junban: 数字」と記述すると、数字順にメニューに表示されます。画像を参照に、nanoで開き追記してください。
nano ~/pico/site/content/index.mdJunban: 0
nano ~/pico/site/content/history.mdJunban: 10
nano ~/pico/site/content/about.mdJunban: 99
メニューの最初に表示させたい「トップページを 0 」とし、最後に表示したい「Aboutページを 99」としました。
「About」が最後になり、メニューの順番に反映されました。
ここまでで、Podmanのサーバーコンテナを用いて「Pico CMS」が動作するようになりました。
「Pico CMS」はすべてがテキストファイルで保存されていて、さらにコンテナ外に設置しているということもあり、バックアップはファイルをコピーするだけです。
その特性を活かし、様々な改造を行ってみるのも楽しそうですね。
以下の補足情報では、テーマを変更し見た目を大きく変える方法と、PC(仮想PCも含む)再起動時にPico CMSに必要なコンテナを自動起動させる方法を解説します。
補足情報 1: テーマを変更
デフォルトのテーマはシンプルなので自分で改造しやすいですが、公開されているテーマを用いてサイトの雰囲気を変えることもできます。テーマは以下のページで紹介されているものを使用します。
それぞれのテーマは、入手先であるGitHubへのリンクに繋がっています。テーマを入手するため以下のコマンドでGitをインストールしましょう。
sudo transactional-update pkg install git本記事ではMicroOSを使用しているのでインストールを有効にするため再起動が必要です。
sudo reboot再起動すると、Podmanコンテナは止まってしまうので以下のように起動させます。
podman start pico-webテーマを置くディレクトリに移動し、gitコマンドでテーマを取得します。
cd ~/pico/site/themes
git clone https://github.com/BesrourMS/dimension.git今回のテーマはディレクトリの構造が二重になっているので、以下のコマンドで整えます。（テーマにより異なります。)
mv ~/pico/site/themes/dimension/dimension/* ~/pico/site/themes/dimension/
rmdir ~/pico/site/themes/dimension/dimension/テーマの変更はconfigディレクトリにあるconfig.ymlファイルで行います。テキストエディター nano で開きましょう。
nano ~/pico/site/config/config.yml下図の矢印で示した、テーマ名「default」の部分を、取得したテーマ名である「dimension」に書き換えます。
編集後、Ctrl + O で保存します。
ブラウザを再読込してみましょう。テーマ適用前後でずいぶん印象が変わりました。
補足情報 2: コンテナを自動起動させる
Podmanコンテナは設定しない限り、PCを再起動した場合コンテナを手動で起動させる必要があります。
起動後 「podman start pico-web」を実行するだけであり、特に問題はないのですが毎回行う必要があります。
少し面倒なので常に起動(常駐)できるようにします。Linuxでは、いつでも使用できるよう背後で常時動作する仕組みを「デーモン」と呼びます。本格的にpodmanコンテナを構築する場合は重要なステップです。
まず、デーモンを作るための定義ファイルを作成する前に、現在動作中のコンテナを停止します。
podman stop pico-web次に、一般ユーザーで実行するデーモンが、ログアウトや再起動後も動き続けるよう以下のコマンドで設定します。
loginctl enable-linger $USER以下のコマンドで、Pico CMSで使っているサーバーコンテナをデーモン化するための定義ファイルを作ります。
podman generate systemd --new --files --name pico-web定義ファイルを置くためのディレクトリを作り、上で作った定義ファイルを移動します。
mkdir -p ~/.config/systemd/user/
mv container-*.service ~/.config/systemd/user/以下のコマンドを実行すると、定義ファイルが読み込みこまれます。
systemctl --user daemon-reload定義ファイルを元にデーモンを有効化します。
systemctl --user enable --now container-pico-web.serviceこれで、PCを再起動してもPico CMSコンテナは自動で起動されるようになりました。
- デフォルトテーマのページ全体に関するスタイルは「~/pico/site/themes/default/css/style.css」で定義されています。例えば#header { background: #333333; }と変更するとページヘッダー部分が濃いグレーに変更されます ↩︎
コメント