静的サイト運営に関して

Question

静的サイトを、以下のような要件で運営したいと考えています。

1. サイトコンテンツは、タグ付けされた記事を掲載
2. レスポンシブレイアウト対応
3. 投稿用の記事は、markdown 記法 ＋ α で記述できること（必須ではない）
4. ベースレイアウトは、3種類程度

記事ページ
タグ別一覧
TOPページ
0. 記事投稿によって、タグ別一覧も更新されること

静的サイトの構築は経験がないため、要件がざっくりしたものしか思い浮かびません。静的サイト運営をした経験のある方のご指摘でツールを選定できればと考えております。

とりあえず、metalsmith で、作成を始めてみましたが、コンテンツ管理が面倒くさそうなので CMS でコンテンツ作成後、吐き出すのが良いかと変更を検討中です。

上記のようなざっくり要件で恐縮ですが、静的サイト運営にあたって、検討すべき課題と解決案を持ったツールをご紹介いただけないでしょうか。

基本的にツール自体に手をいれるつもりはないのですが、理解できる言語は PHP と JavaScript のみなので、カスタマイズやプラグイン作成が必須の場合は、この２つのいずれかであると助かります。

よろしくお願いいたします。

Answer 1

うちのブログはほぼHexoデフォルトのまま運用してます。
http://www.romancing.jp/

質問文の要件は全部満たしているように思えます。
タグ等はhexo new file_nameで新しい記事を作成した後、ファイルのヘッダー部分がyaml形式っぽく扱える仕組みになっているのでそこで定義します。

---
title: JavaScriptでOggを作成する
date: 2017-06-09 12:51:32
tags:
  - Ogg
  - JavaScript
---

JavaScriptでOggのエンコードがしたいので調査した結果の備忘録。
結論から言えば下記のようなプロジェクトが既にあるらしいので、順番に試していく予定

- [higuma/ogg-vorbis-encoder-js - GitHub](https://github.com/higuma/ogg-vorbis-encoder-js)
- [Garciat/libvorbis.js - GitHub](https://github.com/Garciat/libvorbis.js)
- [brion/ogv.js - GitHub](https://github.com/brion/ogv.js)

<!-- more -->

## 基礎調査

`ogg javascript`でぐぐったら解決。
そのものズバリな記事がヒットした。

デプロイはGitHubにMarkdownの記事を反映して、
静的サイト設定＋独自ドメインを割り当てて運用しています。
Markdownファイルを公開されたくなければBitbucketにファイルを置いて、デプロイは自前のサーバーでやれば良さそうですね。

ドキュメントや例が中華中華してて読めないので、
コード部分だけ眺めたり、読める記事を片っ端から漁るしかないのが悲しい所ですが、手軽で早く出来るので気に入ってます。

コンテンツはコツコツ手作業で積み上げていくことを想定しているので、大第で1000程度かなぁと思っています。

まだ30記事くらいしかないので一瞬で完了していますが、
記事を新しく作る度に全て生成し直しなので200や300になると重くなってくるかもしれません。
ゆくゆくはHugoも良さそうですね。

Comments

[退会済みユーザー]

blog 特化型とあったので試さなかったのですが、興味は持ってました。
ドキュメントに関しては、最近 google 君の翻訳が優秀なので、量があればなんとかなるかなぁと思っています。
機能面で、不足を感じた箇所とかありましたか？
現在、要件が明確にできないので、ツールが選定できないっていう、恥ずかしい状態にあります＾＾；もし開示いただける課題情報があると助かります！

[miyabi-sun]

WordpressにはAd系の広告入れるくらいにしかメリットないと思います。
非エンジニアならばこっちにしか選択肢はないでしょうね。
一応Markdownが使えるプラグインがあったと思いますし…

Hexoは初期配布のテーマがあるので、自分でテーマをグリグリ手作業で変える事になります。
エンジニア色の強い人にはぷちオススメできそうです。
（私は面倒なのでほぼデフォルト運用で、特に広告等も入れようと思い立ってないので不満や不足を感じた事はありません）

[退会済みユーザー]

コメントありがとうございます。

WordPress とどのような差異が出るか？というのは、非常に興味深い点です。
Ad系の広告というのがよくわからなかったのですが、どういったものでしょうか？

[miyabi-sun]

Googleのアナリティクスやアドセンスですね。
ブログというと広告収入と＝で考える人も多いですから、プラグインはちょっと検索すればゴロゴロ、解説サイトもゴロゴロありますからね。
Wordpressは非エンジニアでもなんかしたくなったらとりあえずググればプラグインで解決出来ますね。

静的サイトジェネレータはベースがタダのHTMLテンプレートエンジンをコンパイルするだけなので、基本的に自前実装になるという意味です。

Answer 2

本件に関しては、いろいろ試してみたのですが、Hugo をベースにカスタマイズしていくことにしました。
皆さんの回答はそれぞれ役に立ったのですが、

・ビルド速度（正直、これが圧倒的すぎる！）
・本体に手を入れなくても、思った以上に思い通りになるテーマ/テンプレートのカスタマイズの柔軟性
・まだ手を出してないですが、CMS っぽいフロントが作りやすそう

といった点を決め手にしました。

BA を付けるのは非常に難しいのですが、Hugo をご紹介いただいた dojikko さんの回答とさせていただきます。

ご協力、ありがとうございました！

Answer 3

バージョンごとに値段が高くなっていく気がしますが Movable Type とかどうでしょう。

【テキストフォーマットについて : Movable Type 6 ドキュメント】
https://www.movabletype.jp/documentation/mt6/compose/text-format.html

【ライセンスのご案内（通常／学校・教育機関向けアカデミック／開発者／個人無償）| CMS プラットフォーム Movable Type】
https://www.sixapart.jp/movabletype/license/

2015年10月に開発が終了しましたが、オープンソース版もあります。（ローカル開発環境で使う分には結構使えます）

【GitHub - movabletype/movabletype at mt5.2.11】
https://github.com/movabletype/movabletype/tree/mt5.2.11

---

レスポンシブレイアウト対応

たまにCMSの宣伝文句にこれが有ったりしますが、これはHTMLテンプレート（テーマ）側の話なので「それで対応って書くのは･･･」と思ったりします。テンプレートに制約があってCSSが一切書けないなら「レスポンシブレイアウト対応 」と書けば良いと思うのですが、そんな使いにくいCMS/ジェネレータは要らないですよね？（ Dreamweaver 的な提示を期待しての文言だった場合はすみません）

【Adobe Dreamweaver CCの購入 | Webデザインソフト無償体験版】
http://www.adobe.com/jp/products/dreamweaver.html

Comments

[退会済みユーザー]

回答ありがとうございました。
Movable Type って、OSSがあったんですね。知りませんでした。
有償のイメージが強かったので、全然調べてませんでしたが、個人なら無償のライセンスもあるようですね。
どちらも興味があります。
製品概要だけだと、静的サイトに対してのナレッジがよく理解できなかったので、試してみます＾＾

> レスポンシブレイアウト対応
モバイル用のページ（URL）を別途生成したりしませんよ。って意味で書きました。一昔前だと、モバイル用のページが別にあるものも多かった気がしたので。

[kei344]

> レスポンシブレイアウト対応
出力サイトが1種類ということですね、失礼しました。

Answer 4

Weｂというのは、はじまりは静的サイトからなので別に難しく考えることはないかと

要はコンテンツの量しだいではないでしょうか
くそ遅っそいジェネレータだと萎えたりします
個人的にはHugoは実用できる速さだと思います
Goで実装されていますが、一見の価値はあると思います

あとたいしたことではありませんが、動的サイトでは当たり前と思っていることに引っかかる（サイト全文検索とか）ことも

PHPということなので、取っ掛かりにWordPressの静的サイトジェネレータ(StaticPressなど)の実装をみてみてはどうでしょう
もしStaticPressで要件を満たせばコード書く必要もありませんしね

Comments

[退会済みユーザー]

回答ありがとうございます。

コンテンツはコツコツ手作業で積み上げていくことを想定しているので、大第で1000程度かなぁと思っています。
最大時にはパフォーマンスが気になりそうですね。。。

ところで、静的コンテンツサイトの管理って、それほどしないものなのでしょうか？

なんとなくですが、静的サイト運営において
・版管理
・タグのリネーム
等々、問題がはっせいしそうだけど、想定しにくく、アドバイスいただければと思って質問をしています。
困ったこととかありませんでしたか？
ご教示いただけると幸いです。

[dojikko]

まったく参考にならないと思いますが、うちでは
・版管理はmdをgitに食わせるだけ(エディタ終了時にgit add commitするだけ)
・エディタはDBと連動したものを自作(タグとかカテゴリとか画像を管理できる単なるテキストエディタ)
・プレビューはHugo+Chrome任せ
・某ジェネレータを使っていたのですが、コンテンツが100超えたあたりでHugoに乗り換えて感動
な感じです

そもそもタグとかカテゴリのリネームってそんなに発生します？
流動的なコンテンツなら、それこそ動的なサイト構築をした方がよくないですか？

[退会済みユーザー]

版管理とかタグのリネームは、運用のイメージができてない中で、無理やりひねり出した苦肉の問題点です。運用したことがないので、どんなことが問題になるのか、あまり良く分かっていません＾＾；

ジェネレータのパフォーマンスとエディタ部分が運用上の鍵になりそうですね。
非常にためになりました。ありがとうございます。