静的サイトジェネレータ Publii についてまとめています。


目次


公式サイト


特徴

Publii は次の特徴があります。

  • パソコン OS のアプリから Web サイトの編集ができます。
    静的サイトジェネータは CLI を用いるケースが多い中、
    GUI の画面で Web サイトの生成を行う事ができます。
  • 静的サイトジェネータとして HTML などを出力し、
    GitHub・GitLab・Netlify・FTP・SFTP・S3 へのデプロイに対応しています。
    フォルダ内生成や圧縮ファイルの状態にもできます。
  • 言語対応追加により、英語以外でも表示できました。
  • プラグインにより、多彩な機能を追加できるようになりました。

ダウンロード

公式サイトのダウンロードページからダウンロードできます。

 Download | Publii

GitHub ではソースレベルのみです。

ダウンロードした .exe・.dmg などのファイルをクリックし、
Publii をインストールして下さい。

更新の場合も新規同様ダウンロード・インストールが必要です。
同じ手順でインストールし、Publii を更新できます。

Scoop のインストール・更新

Windows では 🎈 Scoop の Extras バケットに Publii が含まれています。

scoop bucket add extras
scoop install publii

日本語化

Publii はしばらく英語表示になっていましたが、
2022年3月公開の Publii 0.39 から英語以外の表示に対応しました。

 GetPublii/Publii-ui-locales | GitHub

ページ運営者が日本語翻訳ファイルを制作しました。
Publii 0.40.0 より対応しています。

downloads/バージョン/ja.zip をダウンロードして下さい。
バージョン は Publii のバージョンに合わせて下さい。
例えば Publii 0.40.3 であれば 0.40.0 を適用できます。

Publii ウインドウの右上 - Languages を選択し、
 Install Language からダウンロードした ja.zip を選択します。
Japanese - default が表示されるので、選択して下さい。これで日本語表示になります。

または、一度 Publii を起動すると、
Documents または ドキュメント フォルダ内に
Publii フォルダができます。
Download ZIP または git clone でダウンロードし、
ja フォルダを Publii/languages 内に入れて下さい。
すでに ja フォルダがある場合は削除してから入れて下さい。
Publii ウインドウの右上 - Languages を選択すると
Japanese - default があるので、選択して下さい。これで日本語表示になります。

バージョンの更新に合わせて言語ファイルも更新されます。
Publii のバージョンが更新されたら、言語ファイルが更新されているか確認し、
更新されていたら、インストールと同じ方法を用いて更新して下さい。
なお、Publii が更新されたての場合、 🎈 GitHub fu-sen 内で
公式リポジトリ反映前の日本語ファイルが存在している場合があります。
またそれが Pull Request されている可能性があります。


テーマ

Publii のデフォルトでは Simple のみがインストールされています。
他のテーマは公式サイトで Marketplace からダウンロードできます。

 Marketplace - Themes | Publii

テーマは無料と有料があります。 「SORT BY:」の Free を選択すると無料のみになります。

Publii ウインドウの右上 - Themes/テーマ を選択し、
 Install theme/テーマのインストール からダウンロードした .zip ファイルを選択します。

GitHub でもテーマが公開されています。
Download ZIP または git clone でダウンロードし、
Publii 内の themes にフォルダを生成して入れますが、
この時の フォルダ名は config.json の name と一致する必要があります。
(name が "Starter" であれば starter というフォルダ名で生成)

サイドバー Site Setting/サイトの設定 内
Current theme/現在のテーマ の「Install and use」内で選択して下さい。
Save & Preview/保存・プレビュー で表示を確認して下さい。
この時エラーが表示された場合は通常themes 内のフォルダ名が誤っています。
エラーメッセージに表示されているので、フォルダ名を変更するか、
config.json の name を変更してみて下さい。

テーマを修正したい時

 Theme overrides | Publii

テーマファイルは直接編集しないで下さい。
同じテーマを使う全サイトに影響がおよび、テーマ自体も更新される場合があります。

代わりに publii/sites/サイト名/input/themes/ 内に
テーマ名-override フォルダを作り、
(一度プレビューなどで テーマ名 フォルダが生成されるので、並べるように)
このフォルダに変更したテーマファイルを置く事で置き換える事ができます。
これにより、固有のサイトのみに変更を適用する事ができます。


とりあえず作ってみる

「Create New website/新規ウェブサイトの作成」画面が表示されているので、
まずは一つサイトを作ってみます。

  • Website name/ウェブサイト名
  • Author name/投稿者名

左サイドバー  Posts/投稿 で、次のエディターが選択できます。
この選択で本文の作成・編集方法が変化します。編集途中でエディターを変更する事もできます。

  • WYSIWYG editor/WYSIWYG エディタ - 装飾をアイコンで選択できます。
  • Block editor/ブロックエディタ - 見出し・画像・区切りなどをブロック単位で扱います
  • Markdown editor/Markdown エディタ - 🎈 Markdown を用います

ブロックエディタでも Markdown を使用する事ができます。

Markdown エディターを使用する場合、「続きを読む」は
---READMORE--- のみの行を作成します。

Save/保存 を押した後、Preview your changes/変更をプレビュー で
ブラウザで実際の表示を参照できます。

左サイドバー Server/サーバ からデプロイしてサイトを公開できます。

  • FTP - FTPS も含まれます。
  • SFTP
  • S3 - Amazon S3 など
  • 🎈 GitHub - 🎈 Vercel・🎈 Cloudflare Pages などにも使用できます。
    (0.40.3 までは GitHub Pages 表記でした)
  • GitLab - 🎈 Vercel・🎈 Cloudflare Pages などにも使用できます。
  • 🎈 Netlify - API を使用して直接デプロイします。
  • Google Cloud - Google Cloud Platform の Storage を用いて公開します。
  • Manual upload/手動アップロード - フォルダ保存(カタログ)、ZIP・TAR 圧縮

Q&A

テーマが少ないのですか?

Publii のカスタマイズが多いので、カスタマイズして良い状態にできるかもしれません。
例えばテーマ Square では、サイドバーの表示部分を
Theme/テーマ の「Custom settings/カスタム設定」内
「Homepage hero」で自由に編集できます。

GitHub にもいくつかテーマがありますので、探してみて下さい。

ブログではなく Web サイトとして構築できますか?

テーマの初期状態を見ると、ブログしか作れないように見えますが、
公式テーマでは 左サイドバー Theme/テーマ の
「Custom settings/カスタム設定」にある
左項目 Layout 内の「Front Pages」で
「Front page displays」を Selected post を選択すると、
トップページで投稿ページ一覧を表示する代わりに、
特定の投稿ページを表示する事ができます。
この投稿ページは をクリックした設定画面より次の対応をして下さい。

  • 「状態」内「Hide post/投稿の非公開」を 有効 にする ◆
  • 「SEO」内「Post slug/投稿 slug」を index 以外 にする ※
  • 「SEO」内「Meta robots index」を noindex, follow にする ◆

※ index だとトップページ index.html を投稿ページとして上書きしてしまいます。
◆ 投稿ページを非表示にするための設定です。index.html では無視されます。

また、テーマによっては「SEO」内「Post slug/投稿 slug」を index にする事で、
index.html を投稿ページで上書きしてしまう方法も有効です。

あとは 投稿 一つが 1 ページとなりますので、
投稿 内でページを作成・編集していきます。

必要に応じて Theme/テーマ の「Custom settings/カスタム設定」内の
設定を変えてみると、目的の表示を実現する事ができるでしょう。

slug とはなんですか?

URL に含まれる文字列で、Publii では file を指定で file.html を生成します。
Publii では英語に変換される仕様になっていますが、
漢字は中国語の読みに変換され、カナもそのままローマ字変換されるため、
おかしな URL になります。手動で適切な slug を設定すると良いでしょう。

ホームページを特定の表示にして、内部でブログを表示できますか?

トップページを特定の記事ページとして表示できます。
 ブログではなく Web サイトとして構築できますか? を参照して下さい。

ブログに関しては blog などの特定タグを付け、
そのタグで一覧を表示するようメニューを生成します。

HTML・CSS の minify はできますか?

左サイドバー Site settings/サイト設定 内「Advanced options/拡張設定」の
左側 Website Speed/ウェブサイト表示速度 を選択すると
Enable HTML compresson/HTML 圧縮の有効 および
Enable CSS compresson/CSS 圧縮の有効 があります。
それぞれ 有効 にすると、空白・改行を削除する minify の動作です。

特定のファイルが必要ですが、公開すると削除されてしまいます。

例えば favicon.ico (一部のテーマは設定項目あり)や
🎈 GitHub Pages で独自ドメイン設定に使われる CNAME など
特定のファイルを含めたい場合、
Tools & Plugins/ツール・プラグイン - FIle manager/ファイル管理 より
必要なファイルをアップロードして下さい。
ここでアップロードしたファイルはサーバに同期されます。

サイトマップや robots.txt、
🎈 Open Graph protocol (OGP)・Twitter カード はテーマで考慮されています。

プレビューを行ったところ、エラーが発生しました。

Posts/投稿、Tags/タグ、Authors/投稿者 は URL に slug を含めますが、
絵文字や記号のみにしているために空白の slug にした場合、
他の生成されたファイルを上書きしようとしてエラーになります。
心当たりのある項目で  SEO 内「Slug」へ URL に使用したい英数を入れて下さい。

テーマを手動でインストールした場合にエラーとなる場合、
themes 内のディレクトリ名と config.json の name が一致していません。
この時エラーで Not Found とその場所が表示されているので、
themes/ に突く参照ディレクトリ名を確認してみて下さい。
公式でなければ config.json の name を変更しても良いでしょう。

複数の環境で編集環境を共有できますか?

 Tutorials - Accessing your Publii site on multiple computers via Dropbox | Publii Publii Documentation

ファイルを共有できるようクラウドサービスを使用する事で対応可能です。
公式ドキュメントでは Dropbox を使用する方法が紹介されています。

Publii ウインドウの右上 - App settings/アプリの設定 を選択し、
「Files location/ファイルの場所」の「Sites location/サイトの場所」を
クラウドサービスの共有フォルダ内に指定して下さい。