Setup Remote content plugin

Contents

    Bludit supports using remotely-hosted content. In this example, we will walk you through the setup of a GitHub repository and the plugin configuration with a Bludit default setup to get started. For example, the Bludit Blog works with this plugin, and the content of the site is on Github in this repository: https://github.com/bludit/blog. When I want to create a new page, I create the page and upload it to Github (push).

    Prerequisites

    You need a GitHub account. It's free, and allows unlimited public and private repositories, so quickly get one.

    The PHP zip module to read your git repository zip file.

    This tutorial will assume that you are using GitHub Desktop to create and manage your repository, and that your Bludit blog was installed on https://blog.mydomain.com for url references below.

    Prepare your git repository

    Create a directory in your system named bludit-tutorial. Then open GitHub Desktop, click on the upper left part to create a new repository (click on Add and choose Create new repository).

    Name your repository remote-content-example, give it a quick description and find your bludit-tutorial folder for the Local Path and hit the Create Repository button. This will create a new subfolder remote-content-example in your bludit-tutorial folder.

    In order for Bludit to parse your content correctly, you will need to set up some folders in this structure:

    • root
      • pages
        • page A folder
          • index.txt
        • page B folder
          • index.txt
        • ...

    In practice, you can open your created repository in Explorer (Windows) or Finder (MacOS) and create the following folders and files:

    • remote-content-example (already exists by now)
      • pages
        • first-page
          • index.txt
        • second-page
          • index.txt

    Here's some demo content to put in your files: blog-content/pages/first-page/index.txt

    # First Page
    <!-- 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.
    
    This is the first page for Remote Content Example.

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

    # Second Page
    <!-- 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.
    
    This is the second page for Remote Content Example.

    GitHub-Desktop will show you all the changes you made. Enter This is the initial commit as a commit message and hit Commit to master. Now publish your repository (which means it will be uploaded to your GitHub Account) and open the repository in a browser by going to https://github.com/yourusername/remote-content-example.

    Enable and Configure the Bludit remote content plugin

    Prepare the Bludit Plugin

    Log into the admin backend of your Bludit installation, and go to the plugins section. Scroll down until you see the 'remote content' plugin. Click on 'activate' and then on 'configuration'. Copy the full URL that is shown below the webhook input element (Ex. _https://blog.mydomain.com/9as7dfsd98f) into your clipboard (Ctrl + c or cmd + c).

    Configure your GitHub repository

    In a new browser tab (or window) go to your GitHub repository and open the Settings. Go to the Webhooks section and create a new webhook. Insert the copied webhook url into Payload URL field and switch Content Type to application/json. Now click on Add webhook.

    Add your repository zip file location to Bludit

    Switch back to your repository main page, and copy the URL of the zip package from the clone or download section. Add the full URL to the Bludit Plugin configuration field named Source. Save the plugin configuration.

    Make your first push

    Now go back to your local repository, and create a new page:

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

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

    # Third Page
    <!-- 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.
    
    This is the third page for Remote Content Example.

    Commit your changes as before, and push them to the remote repository. After this, GitHub will let Bludit know about the changes thanks to the webhook. Bludit will grab the zip file from the configured path, and parse the pages from your repository.

    Well done!

    Structure of index.txt

    The pages that are imported via remote content need to follow this structure in order to parse correctly:

    • First line: title of the page with a leading #
    • Then all metadata you want to provide such as creation date, publish status etc. wrapped by html content notation (<!-- and -->)
    • Your content
    # This is the page title
    <!-- date: 2018-10-10 22:00:00 -->
    <!-- put some metadata here -->
    Here comes your content

    Example repository and video tutorial

    We also prepared a video tutorial, and an example repository for you too.