MENU

長い目で見たときに幸せになれるものを創るクリエイター。東京のマルチメディア ディレクター。人の心と向き合うことのほか、祖父母の影響で旅と記録が好き

気づき方をみる

心地よさは存在をも感じないCMS : Ghost

Ghost100 1
COTA

一昨年 2015年まで遡る話となりますが、今まで利用していたブログ(CMS)管理ソフトを「[Ghost](http://ghost.org/)」というものにしていました。今ご覧いただいているサイトはそんなGhostによる出力です。

今まで将来性の不安からバックアップとしてWordpressに全く同じことを書き込みながら続けていましたが、今回、Ver.1.0.0がリリースされたため、正式に採用することにしてご紹介します。

情報構成

おすすめの点、おすすめしづらい点

個人的に気になったのは以下の点です。技術者ではないので、使用感のみでお話ししたいところですが、技術者ではないからこそ気になる部分もあったので、若干サーバーなどの問題を絡めています。

– 動作が速い
– UIや設計がシンプル
– テーマファイルがわかりやすい
– アップデートも簡単
– SSL(Let’s encrypt)もパッケージされている

これらはGhost自身が歌っているところでもあり、元々Wordpressなど最近のブログシステムが肥大化しすぎていて扱いづらいよね、というところからスタートしたようです。[最初はクラウドファウンディングだった](http://www.kickstarter.com/projects/johnonolan/ghost-just-a-blogging-platform)と思います。

シンプルで高速が売りですが、一方で以下のような点が気になっています。

– Node.jsのため、導入に障壁（ポートを利用）
– Node.jsのため、コア部分の管理でアップデートのたびに何かしらの問題が出る場合がある
– 記事などのデータをキャッシュしてくれるが、画像は現在のところフルサイズとサムネイルを分けられないので画像関係に弱い
– テーマファイルレベルのカスタマイズは簡単だが、WordpressのテーマファイルにPHPを組み込むようにちょっとしたカスタマイズがしづらい（個人的スキルの問題）
– 2017年7月23日現在、管理画面の日本語表示は非対応
– サーバーを再起動するとGhost動作が止まってしまう（0.9系以前のPM2やForever時代はなかった問題）

自分のリテラシーレベルの低さを露呈するような紹介になっていますが、この感覚はデザインが本職の方であれば一部の方に少しは共感抱けるのではないかなと思っています。以前、あるレンタルサーバーでは、ポート番号付きのIPでのURLなら設置できるところはありました。

> http://***.***.***.***:2368/

マニュアルを見る限りはnginxが基本で、

> 127.0.0.1:2372

のアクセスをnginxのconfファイルで変換しています。

サーバー再起動で停止してしまうのは仕様なようですが、定期的にサーバー自身のアップデートやバックアップで再起動をかけることがあり、その時だけ運用サイト分「ghost start」を実行しないといけないのが面倒です。

これらは0.9系列で永続化ツールが別だった時、pm2やforeverではなかった問題なので、これから改善されることを願います。もしかしたら私の設定で何か認識できていない部分があるのかもしれません。

管理画面UIについて

それぞれ管理画面を簡単にご紹介しています。

編集画面トップ


管理画面のトップ、イコール記事一覧画面で、あとはワンクリックするだけで記事が書き始められます。

編集画面（Markdown入力・プレビュー）


記事の入力画面です。Markdown形式で記述できます。プレビュー画面も装備されています。

一般設定


ブログのカバー写真やロゴなどを設定できます。

####タグ管理画面

WordPressでは標準で「カテゴリー」と「タグ」がありますが、Ghostではその類似した意味合いの機能を一本の「タグ」機能にまとめています。

####そのほか

将来的な拡張機能として用意されているページで、現在はSlackの連携とAMP（高速ページ読み込み）がサポートされています。


インポートやエクスポート、そのほか実験的な機能が集約されているページです。


チーム体制での編集もできます。


個別アカウント画面です。ソーシャルネットワークのアカウント入力など。

なお、ポート利用の制限もあってか、2017年現在では手軽なレンタルサーバーでは利用できません。そもそもレンタルサーバー自体がその特性や運用の問題からnginxをサポートしていないことが多いのが実情です。

現段階では専用サーバやVPS・クラウドサーバの契約が必要です。

もし専用サーバやVPSでの導入が面倒であれば、[DigitalOcean](http://www.digitalocean.com/)だとクリックのみで導入できるようです。
– [ブログプラットフォームのGhostをDigitalOceanで使う場合のインストール/初期設定などの手順](http://funnis.net/blog/web-tech/ghost_on_digitalocean/)

こういった選択肢が広がったり、またGhostの方からもサポートの枠を広げて行ってくれたらいいなと思います。

インストールやアップデート

UbuntuやCentOSの入ったnginxサーバー、Node.js（npm導入済み）npmで「ghost-cli」をインストールするだけです。

ただし[Supported Node Versions](https://docs.ghost.org/docs/supported-node-versions)の対応したNode.jsのバージョンが必要です。バージョンはGhostのバージョンによっても異なるので注意が必要です。これらのドキュメントもバージョンによって異なり、右上の Ghost Docs v*.*.*のドロップダウンで正しいものを選択する必要があります。

セットアップやバージョンアップにあたっては以下の公式ドキュニメントがわかりやすく参考になるかと思います。

#####導入にあたって
https://docs.ghost.org/v1.0.0/docs/installing-ghost-via-the-cli
https://docs.ghost.org/v1.0.0/docs/configuring-ghost
#####流れ
https://docs.ghost.org/v1.0.0/docs/getting-started-guide
#####動作環境
https://docs.ghost.org/docs/working-with-ghost
#####移行方法
https://docs.ghost.org/docs/migrating-to-ghost-version-100
###アップデートでつまづくところ

SSHでGhost関連のコマンドを打つと、Ghostを管理する「Ghost-CLI」のアップデートの通知が来ます。

またデスクトップ版のアプリ・ブラウザ管理画面（どちらも表示されているものは同一）ではGhost自体のアップデート通知が来ます。

今回は両方をアップデートしました。

CLIのアップデートは
>npi i -g ghost-cli

で完了します。

本体のアップデートは
>ghost update

というコマンド一発です。

アップデート後にブラウザでトップページにアクセスするとエラーが出ていました。

themes内に最新のcasper（標準テーマ）の最新版がないとテーマ切り替え時に問題が生じる場合がある（1.5.0で切り替えが全くできないということはなくなった）。しかし0.11系からのアップデートでは最新バージョンへのcasperテーマのリンクが自動的に配置されない時があるようです。

アップデートすると自動的に /versions/各バージョン/ へのシンボリックリンクがcurrentとして置かれるのでこちらは問題ないですが、themesの中にある標準テーマcasperへのシンボリックリンクは更新されません。それを下記のコマンドで配置し直しました。

>cd /ROOT/DocumentRoot/content/themes/
>ln -nfs /ROOT/DocumentRoot/current/content/themes/casper casper

ちなみに、デフォルトテーマの [Casperの配布元](https://github.com/TryGhost/Casper/tree/1.4) 。

その後管理画面で新しいCasperを選択すると問題なく動きました。

そこで改めて自分のテーマを選択すると、問題箇所を指摘するエラーが表示されます。

この指摘の通りにテーマファイルを編集すると無事「ACTIVE」（有効）に設定できました。

散りばめられた思考の欠片
優しく配列されますように
なぜ今の外国人は日本に執着するのか（視覚思考）

2025年1月31日

なぜ今の外国人は日本に執着するのか（視覚思考）

23:43

車窓「寝台特急 北斗星」上野〜札幌 2008

2024年11月25日

車窓「寝台特急 北斗星」上野〜札幌 2008

03:20:36

車窓「特急 かもめ」長崎〜博多 2008

2024年11月21日

車窓「特急 かもめ」長崎〜博多 2008

01:43:00

空にしずく

2024年11月14日

空にしずく

08:06

友達に負けない大切な存在、無用と呼ばれ生命線になったトンネル

2024年10月25日

友達に負けない大切な存在、無用と呼ばれ生命線になったトンネル

12:29

恥ずかしさが楽園の都市を産んだ

2024年9月26日

恥ずかしさが楽園の都市を産んだ

02:53:14

previous arrow
next arrow
  • 藤

    いますぐ楽になりたい

    2025年1月27日
  • 2007 09 23 12 21 34ハリストス教会

    何かをしてあげたい・祈りたい

    2024年11月1日
  • 2021 12 24 14;32 田川後藤寺 上本町商店街のベンチに腰かけるcota

    しっかりしたい

    2025年1月27日
  • 祭り

    発散したい

    2025年1月27日
  • 2015 07 05 17 36 伊予灘ものがたりの乗客・みきゃんさん

    認められたい

    2024年11月1日
  • 海

    捉え方を知る

    2024年11月1日
'; window._nslWebViewNoticeElement.insertAdjacentHTML("afterbegin", webviewNoticeHTML); document.body.appendChild(window._nslWebViewNoticeElement); } }); } } window._nslDOMReady(function () { window.nslRedirect = function (url) { if (scriptOptions._redirectOverlay) { const overlay = document.createElement('div'); overlay.id = "nsl-redirect-overlay"; let overlayHTML = ''; const overlayContainer = "
", overlayContainerClose = "
", overlaySpinner = "
", overlayTitle = "

" + scriptOptions._localizedStrings.redirect_overlay_title + "

", overlayText = "

" + scriptOptions._localizedStrings.redirect_overlay_text + "

"; switch (scriptOptions._redirectOverlay) { case "overlay-only": break; case "overlay-with-spinner": overlayHTML = overlayContainer + overlaySpinner + overlayContainerClose; break; default: overlayHTML = overlayContainer + overlaySpinner + overlayTitle + overlayText + overlayContainerClose; break; } overlay.insertAdjacentHTML("afterbegin", overlayHTML); document.body.appendChild(overlay); } window.location = url; }; let targetWindow = scriptOptions._targetWindow || 'prefer-popup', lastPopup = false; document.addEventListener('click', function (e) { if (e.target) { const buttonLinkElement = e.target.closest('a[data-plugin="nsl"][data-action="connect"]') || e.target.closest('a[data-plugin="nsl"][data-action="link"]'); if (buttonLinkElement) { if (lastPopup && !lastPopup.closed) { e.preventDefault(); lastPopup.focus(); } else { let href = buttonLinkElement.href, success = false; if (href.indexOf('?') !== -1) { href += '&'; } else { href += '?'; } const redirectTo = buttonLinkElement.dataset.redirect; if (redirectTo === 'current') { href += 'redirect=' + encodeURIComponent(window.location.href) + '&'; } else if (redirectTo && redirectTo !== '') { href += 'redirect=' + encodeURIComponent(redirectTo) + '&'; } if (targetWindow !== 'prefer-same-window' && checkWebView()) { targetWindow = 'prefer-same-window'; } if (targetWindow === 'prefer-popup') { lastPopup = NSLPopup(href + 'display=popup', 'nsl-social-connect', buttonLinkElement.dataset.popupwidth, buttonLinkElement.dataset.popupheight); if (lastPopup) { success = true; e.preventDefault(); } } else if (targetWindow === 'prefer-new-tab') { const newTab = window.open(href + 'display=popup', '_blank'); if (newTab) { if (window.focus) { newTab.focus(); } success = true; window._nslHasOpenedPopup = true; e.preventDefault(); } } if (!success) { window.location = href; e.preventDefault(); } } } } }); let buttonCountChanged = false; const googleLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="google"]'); if (googleLoginButtons.length && checkWebView()) { googleLoginButtons.forEach(function (googleLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(googleLoginButton); } else { googleLoginButton.remove(); buttonCountChanged = true; } }); } const facebookLoginButtons = document.querySelectorAll(' a[data-plugin="nsl"][data-provider="facebook"]'); if (facebookLoginButtons.length && checkWebView() && /Android/.test(window.navigator.userAgent) && !isAllowedWebViewForUserAgent('facebook')) { facebookLoginButtons.forEach(function (facebookLoginButton) { if (scriptOptions._unsupportedWebviewBehavior === 'disable-button') { disableButtonInWebView(facebookLoginButton); } else { facebookLoginButton.remove(); buttonCountChanged = true; } }); } const separators = document.querySelectorAll('div.nsl-separator'); if (buttonCountChanged && separators.length) { separators.forEach(function (separator) { const separatorParentNode = separator.parentNode; if (separatorParentNode) { const separatorButtonContainer = separatorParentNode.querySelector('div.nsl-container-buttons'); if (separatorButtonContainer && !separatorButtonContainer.hasChildNodes()) { separator.remove(); } } }) } });})();
記事URLをコピーしました