リモートコンテンツプラグインの設定

    Bluditは、リモートでホスティングされているコンテンツの利用をサポートしています。この例では、GitHubリポジトリのセットアップとBluditのデフォルト設定を使用したプラグイン設定について説明します。 利用例としては、Bludit Blogは、このプラグインで動いています。サイトのコンテンツは、Githubのこちらhttps://github.com/bludit/blogのリポジトリにあります。新しいページを作成したい場合は、そのページを作成してGithubにアップロード(push)します。

    前提条件

    GitHubアカウントが必要です。無償ですぐに入手でき、無制限の公開リポジトリとプライベートリポジトリが利用できます。

    gitリポジトリのzip ファイルを読むための PHP zipモジュール。

    このチュートリアルでは、GitHub Desktopを使用してリポジトリを作成、管理します。また、BluditブログがこちらのようなURL、 https://blog.mydomain.com にインストールされていることを前提とします。

    gitリポジトリの準備

    自分のPCに、bludit-tutorial という名前のディレクトリを作成します。次にGitHub Desktopを開き、左上の部分をクリックして新しいリポジトリを作成します( Add をクリックし、 Create new repository を選択します)。

    リポジトリに remote-content-example と名前をつけ、簡単な説明を入力しています。 Local Path から bludit-tutorial フォルダを指定し、 Create Repository ボタンをクリックします。これで、 bludit-tutorial フォルダーに新しいサブフォルダー remote-content-example が作成されます。

    Bluditにコンテンツを正しく解析させるには、いくつかのフォルダを作成し次のような構造にする必要があります。

    • ルート
      • pages
        • ページAフォルダー
          • index.txt
        • ページBフォルダー
          • index.txt
        • ...

    実際には、作成したリポジトリをエクスプローラー(Windows)やFinder(MacOS)で開き下のようなフォルダーやファイルを作成します。

    • remote-content-example (すでに存在しています)
      • pages
        • first-page
          • index.txt
        • second-page
          • index.txt

    次にファイルに追加するデモコンテンツです。 blog-content/pages/first-page/index.txt

    # 最初のページ
<!-- date: 2018-10-10 20:00:00 -->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.

このページは、リモートコンテンツサンプルの最初のページです。

    blog-content/pages/second-page/index.txt

    # 2つめのページ
<!-- date: 2018-10-10 21:00:00 -->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.

このページは、リモートコンテンツサンプルの2つめのページです。

    GitHub Desktopは、あなたが行ったすべての変更を表示します。コミットメッセージとして「 最初のコミットです 」と入力して、 Commit to master をクリックします。リポジトリを公開し(つまり、GitHubアカウントにアップロードされます)、ブラウザで https://github.com/yourusername/remote-content-example リポジトリを開きます。

    Bluditリモートコンテンツプラグインの有効化と設定

    Bluditプラグインの準備

    Bluditの管理パネルにログインし、プラグインセクションに移動します。リモートコンテンツプラグインが表示されるまで下にスクロールします。'有効化'をクリックして、'設定'をクリックします。_webhook_入力フィールドの下に表示されているURLをコピーします。(例: https://blog.mydomain.com/9as7dfsd98f )をクリップボードにコピー( Ctrl + C または cmd + C )します。

    GitHubリポジトリの設定

    ウェブブラウザのタブ(またはウィンドウ)を開き、GitHubリポジトリにアクセスして Settings を開きます。Webhooks に移動し、新しいWebhookを作成します。コピーしたWebhookのURLを Payload URL フィールドに貼り付け、 Content Type を application/json に切り替えます。Add webhook をクリックします。

    Bluditにリポジトリzipファイルの場所を追加

    リポジトリのメインページに戻って、 clone or download セクションからzipパッケージのURLをコピーします。コピーした完全なURLを Source という名前のBluditプラグイン設定フィールドに追加します。プラグイン設定を保存します。

    最初のpushをする

    それではローカルリポジトリに戻って、新しいページを作成します。

    • remote-content-example
      • pages
        • third-page
          • index.txt

    blog-content/pages/third-page/index.txt

    # 3つめのページ
<!-- date: 2018-10-10 22:00:00 -->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.

このページは、リモートコンテンツサンプルの3つめのページです。

    先ほどと同じように変更をコミットし、リモートリポジトリにプッシュします。このあと、GitHubはwebhookを使ってBluditに変更内容を知らせます。Bluditは、設定されたパスからzipファイルを取得し、リポジトリからページを解析します。

    よくできました！

    index.txtの構造

    リモートコンテンツを経由してインポートされるページは、正しく解析するために次の構造に従う必要があります。

    • 1行目: ページタイトル、先頭に#をつける
    • そして、作成日や公開状態など提供したいすべてのメタデータをhtmlのコメント表記(<!--と-->)で囲みます。
    • あなたのコンテンツ
    # これはページタイトルです
<!-- date: 2018-10-10 22:00:00 -->
<!-- put some metadata here -->
ここにあなたのコンテンツがあります

    例のリポジトリとビデオチュートリアル

    ビデオチュートリアルとサンプルリポジトリを用意しています。

    Collaborate with us and edit this page

    Bludit Documentation Powered by Bludit