ghost

GhostでAmazonアソシエイト広告の機能を追加する

デフォルトではaタグ(リンク)で貼り付ければ可能ですが、タグ毎に関連する書籍等を表示したい場合、テーマを拡張する必要があります 環境 Ghost v1.25.2 CasperTheme Version 2.3.3 目的 投稿記事に設定されたタグに該当するAmazonの商品を列挙して表示する ただしGhostのプラグインとしては実装せず、単純なjsonpとすることで他プラットフォームへ容易に移植できるように実装する 背景 お勧めの書籍等をタグ毎にまとめたい コンテンツと広告をできるだけ別として管理したい 将来的にGhostから移行しても楽にしておきたいからGhostに依存するコードは書きたくない 解決策 Ghostに依存しないように実装するため、今回は単純なjsonpのモデルとjqueryによるレンダリングで実装する やることは、投稿を表示する際に投稿タグに紐付いたamazon商品を表示するだけ 1. テーマのダウンロード [Design]から対象のテーマをダウンロードする デフォルトのcasperテーマは管理画面上からは上書きできないため、

  • zienchan
    zienchan
6 min read
ghost

Ghostでコードをシンタックスハイライトする - Prism.js

Ghostのデフォルトのスタイルでも十分に洗練されており綺麗ですが、個人的にはシンタックスハイライトくらいは欲しいので、別途拡張していきます 環境 Ghost v 1.24.9 目的 GhostのデフォルトテーマであるCasperから派生した独自テーマにprism.jsを追加する 背景 もっと高機能なシンタックスハイライトが欲しい! 解決策 1. GhostのCasperテーマを複製して独自テーマ(casper-custom)を作成する もし既に独自テーマを作成している人はこの作業をスキップできます デフォルトのCasperテーマを使用している人は画面側からの操作では上書きができないのでこの作業が必要です casperテーマから派生してcasper-customテーマを作成する方法はこちらの記事を参考にしてください 2. 適したPrism.jsを生成してダウンロード prismjs.comからテーマや必要なプラグインを選択して最小限のprism.jsとprism.cssを生成します ここで全部チェックすると1MB近くなるのでマイナーな言語などは除外したほうが良いです 3. 独自テーマ(casper-custom)

  • zienchan
    zienchan
1 min read
ghost

Ghostに問い合わせフォーム(Google Form)を追加する

Ghostはメール送信関連の機能を有していますが、少なくとも現在は標準的な問い合わせフォームの機能を提供していません ここでは、Ghostで構築したサイトにGoogleFormを使って問い合わせフォームを追加する方法についてまとめます 目的 Ghostで構築されたサイトにWordPressのContactFormのような問い合わせページを追加したい 背景 何らかの連絡手段は用意しておきたいが、メールアドレスは公開したくないためメールフォームを設置したい 選択肢 外部のメールフォームサービスは数多く存在し、かつGhostが静的ページを生成できる(HTMLタグに対応している)ことから多くのサービスがそのまま使用可能と思われる 解決策 ここでは最も無難な外部サービスであるGoogleFormを採用することした 理由は割と柔軟で無料で広告もなく日本語に対応しており設置も管理も楽だからだ 入力項目(質問)を作成する GoogleFormで新しいフォームを作成し、まずはタイトルを入力する 仮にメールアドレス、名前、問い合わせの種類、内容を求める場合、項目を下記のように追加していく メールアドレス ※このとき、メールアドレスを収集するか否か問われるので有効にしておく 名前 必須 記述式

  • zienchan
    zienchan
2 min read
ghost

Ghostにコメント機能(Disqus)を追加する

Ghostにはデフォルトでコメント機能がないのでコメント機能を追加する方法についてまとめます この記事にテスト目的でコメントしても構いません 目的 Ghostにコメント機能を追加する 背景 誤った記事を放置するのはよくないので少なくとも指摘などを受け付ける窓口が欲しい 前提条件 Ghost v1.x系 選択肢 コメント機能といっても実際にはいくつかの選択肢がある ぱっと調べた感じでは少なくとも下記は実際にGhostに実装可能のようです サービス名 コメントデータの場所 Disqus 外部 NodeBB 内部(?) Facebook 外部 Livefyre 外部 解決策 ここでは利用者も多く簡単で見た目もよいDisqusで実装します 但し、上位5%くらいのサイトには広告が表示されるようで、これを非表示にするには課金が必要です 不満点はありますが、大規模になってきて広告が邪魔になってきたら乗換えを検討することとします Disqusの登録 Disqusでアカウントを作成します

  • zienchan
    zienchan
3 min read
ghost

GhostでResponse code 405 (Method Not Allowed)のログが表示される問題

前回のGhostのスケジューラが動作しない問題で表示されていた2つ目のエラーについて引き続き調査します 環境 Server - さくらVPS CentOS 7系 Dcoker - Ghost: v1.24.8 Dcoker - Databese: MySQL Dcoker - proxy: nginx SSL: 有(強制リダイレクト) 現象 記事の投稿時に下記のようなエラーメッセージが表示される [2018-07-14 21:51:00] ERROR NAME: InternalServerError

  • zienchan
    zienchan
2 min read
ghost

Dockerコンテナ上のGhostでスケジュール投稿が動作しない問題

Docker上で稼動しているGhostのスケジュール投稿機能がどういうわけか動作しなかったので調べました 環境 Server - さくらVPS CentOS 7系 FW - iptalbes Dcoker - Ghost: v1.24.8 Dcoker - Databese: MySQL Dcoker - proxy: nginx SSL: 有(強制リダイレクト) 目的 スケジュール機能が動作しない原因を調査し、機能するように修正する 背景 スケジュール投稿できないと、書き溜めした時とかに1日1回とかの自動投稿とかが出来なくてつらい

  • zienchan
    zienchan
10 min read
docker

Dockerコンテナのバックアップ方法

目的 Dockerのコンテナごとバックアップする方法について調査する 背景 Dockerコンテナの内容を破棄せずにそのまま現状維持で移行出来る環境を作りたい 結果 バックアップとしてはいくつか方法がある イメージとして保存/読み込みする方法 下記のように、コンテナを一旦イメージ化した上で保存->読み込みする方法 docker commit ${CONTAINER_ID} ${IMAGE_NAME} docker save ${IMAGE_NAME} > ${OUTPUT_PATH} docker load ${OUTPUT_PATH} コンテナをそのままtarにしてエクスポートしてしまう方法 下記のように現状のコンテナをtarにして出力->入力する方法

  • zienchan
    zienchan
1 min read
ghost

Ghostで固定ページを作成する

環境 Ghost Version 1.24.7 目的 静的ページ(WordPressでいう固定ページ)を作成する 背景 サイトについての説明やコンタクトフォームなど、記事として投稿一覧に表示されないページが欲しい 解決策 投稿設定に"Turn this into a page"というチェックボックスがあるのでこれをオンする これで目的は達成できた。 但し、多くの固定ページは恐らくデザインに拘ったりしたいはず しかしMarkdownで独自のスタイルを適用するのは厳しいだろう 実はGhostの投稿にはHTMLがそのまま使用できる ところで"Ghostの記事はMarkdownで記述する"としか紹介されてないので、

  • zienchan
    zienchan
1 min read
ghost

Ghostで構築したサイトをGoogleAnalyticsに対応させる

公式ドキュメントに既にありますが... 要約 GoogleAnalyticsにアクセス [管理]から[アカウント]を追加して[プロパティを追加](既存のアカウントがある場合はプロパティの追加だけでOK) トラッキング対象はウェブサイト、ウェブサイトの名前は任意の値、URLを入力(URLの暗号化も関わってくるので、SSL対応してる場合はHTTPSにしたほうがよさげ?あとプロトコルはウェブマスターツールとあわせた方が無難かも) 業種は対象サイトのサービスに近いものを選択 タイムゾーンはお好きなものを。私はJSTにした。 トラッキングIDを取得して、[トラッキングコード]をコピー Ghostの管理画面の[Code Injectiomn] -> [Blog Header]セクションにペーストして保存 自身のサイトにアクセスしてGoogleAnalticsの[リアルタイム]->

  • zienchan
    zienchan
1 min read
ghost

Ghostで構築されたサイトをGoogle webmastersに登録する

この作業をしなくても故意に拒絶しなければそのうち勝手にクロールしてくれるので致命的ではありませんが、毎日検索して自身のサイトが表示されるかどうかを試すくらいなら、こちらで対策できるものはしておくに越したことはないでしょう。 Google ウェブマスターにGhostで構築したサイトを登録する ここから登録対象のサイトのURLを入力して登録します。 SSL対応している場合は、httpsプロトコルで登録したほうがよさそうです。 根拠は入力例がSSLをプッシュしてるからです。それとセキュアなほうがやっぱり評価高そうじゃないですか。 自分の立場がGoogleだったらそうしちゃいたくなりますね。 勿論、だからって優位になる根拠はやっぱりないんですが。 ドメインの所有者を証明するためにGhostの設定を行う ドメイン所有者であることの証明方法はいくつか用意されていますが、ここではHTMLタグ形式で証明することにします。 もちろん、推奨されているHTMLファイルを設置する方法でもよいのですが、自分の場合はdockerコンテナで運用しているためお手軽なmetaタグを追加する方法にしました。 この方法だと全てのページにわたってヘッダに無断なデータが付与されるので、ファイルベースのがエコですかね。 設定方法は、Ghostの管理画面から[Code injection] -> [Blog Header]に下記のように貼り付けて完了です。 <meta name=

  • zienchan
    zienchan
1 min read
vps

GhostをさくらVPS上にDocker+SSL(Let's Encrypt)で構築した話

偶然、前々から気になっていたGhostのDcokerイメージがDockerHubにあったのを見つけたのでさくらVPS上に構築してみました。 やりたいこと はい。めっちゃシンプルです。 letsencrypt-proxyはLet's Encryptの更新作業を自動的にやってくれるやつで、必要があれば証明書を更新してくれるコンテナ。 この構成だと今後、新しいドメインやアプリケーションが増えても、コンテナを増やすだけでOKというお手軽構成。コレ大事。 やること 自分の場合、既にさくらVPS上でnginx-proxyとletsencrypt-proxyを動かしているので追加するのはghostコンテナ(青い部分)のみです。 なので、この記事ではこのghostコンテナを構築する話です。 ghost用コンテナの作成 既に公式のイメージがあるので、これをdocker-composeで使います。 本当はdocker-composeは開発向けなのでこれを使った本番運用は避けた方がよさそうです。 が、現在は小規模なので実験的にここではdocker-composeを使って運用します。 ghost用のdocker-compose.yml version: "3.1" services:

  • zienchan
    zienchan
2 min read