Skip to content
This is an open-source Demo Magazine built with Livingdocs. Check out the code and make it yours!
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
plugins/gatsby-source-livingdocs
src
.drone.yml
.editorconfig initial commit Dec 19, 2018
.eslintrc.json
.gitignore
README.md
config.js fix(bug): sitemap.xml uses double "//" Jan 8, 2019
gatsby-config.js fix(config): use correct urls, add TODO's for end users Feb 14, 2019
gatsby-node.js initial commit Dec 19, 2018
package-lock.json feat(styling): use scss instead of css Jan 17, 2019
package.json feat(styling): use scss instead of css Jan 17, 2019

README.md

About the Livingdocs-gatsby-magazine

This magazine-starter is supposed to help you start out with Livingdocs as a headless CMS.
We assume you haven't set up any custom configuration and use our magazine-component library.

See it in action:

Gatsby-magazine example

Quick start

  1. Clone this repo

    Start by cloning this repository and installing the dependencies.
    This has been tested with Node 8.12.0, later

    git clone
    cd gatsby-magazine-example
    npm install
    
  2. Use your own API Key

    in the root of your folder in Gatsby-config.js, you'll have to swap out process.env.accessToken for your Livingdocs API-Token. You can find your token here.

    plugins: [
      {
        resolve: 'gatsby-source-Livingdocs',
        options: {
          // The accessToken is accessed at buildtime.
          // In this example we used "netlify" and set our Token there.
          accessToken: process.env.accessToken
        }
      }
    ]

    In a nutshell, the Livingdocs plugin will get the data and from the JSON that is returned, the graphQL schema will be created at build time. You can read more about the plugin here

  3. Start editing the project locally!

    Navigate into your new site’s directory and start the project.

    gatsby develop
    

    Gatsby will run two things now:

    Your site at http://localhost:8000

    And a GraphQL server at: http://localhost:8000/___graphql

    Note: GraphiQL, is a tool you can use to experiment querying your data with. Learn more about using this tool in the Gatsby tutorial.

    Perfect. You got your starter project running! It still has the Livingdocs branding and SEO-setup.

Where to go from here

  1. Interesting starting points

     ├── src
       ├── components
         ├── footer | contains Livingdocs links
         ├── header | contains Livingdocs branding
         ├── layout | contains all SEO data (some specific to Livingdocs)
         ├── resources
           ├── living-times014.css
       ├── pages
         ├── 404.js   |  404 starter-page
         ├── index.js | Homepage / initial route
       ├── templates
         ├── article.js     | Creates the article pages in gatsby-node.js
         ├── authorPage.js  | Creates the author pages in gatsby-node.js
         ├── pages.js       | Creates the pages in gatsby-node.js
     ├── gatsby-config.js
     ├── gatsby-node.js     | Pages are created programmatically here
    
  2. Plugin overview

    We've added plugins that should be included in our opinion. We will shortly go over which plugins were used.

    All plugins can be found in gatsby-config.js

    gatsby-source-Livingdocs Used to request the data from Livingdocs, afterwards used in gatsby-node.js to programmatically create the pages


    gatsby-plugin-react-helmet Creates the with metadata, css, social media headers, etc.

    gatsby-plugin-sitemap Creates the sitemap, which can be accessed here: http://localhost:8000/sitemap.xml

    gatsby-plugin-robots-txt Creates the robot.txt file, which can be seen here: http://localhost:8000/robots.txt

    gatsby-plugin-manifest Creates the PWA-Manifest


  3. This magazine in combination with Livingdocs

    Whether you're an author, or a developer trying to understand what's going on so here are some key features:

    A meaningful title in Livingdocs This will be crucial for SEO reasons. Under the hood

    ├── src
      ├── components
        ├── layout.js
      ├── templates
        ├── article.js
    

    The layout & article components will set up all the necessary data for google, facebook, twitter within the component.

    So having meaningful titles, descriptions, keywords are very important, for the user to find the content.

    The good part? We've done lots of research regarding SEO for you. Thus, you can focus on using Livingdocs and a good part of the technical implementation has been already done for you, if you use our starter kits.

Deployment

  1. Deploy locally

    Deploying locally is really easy.

    gatsby build
    gatsby serve
    

    You should be able to find your locally-deployed website here: http://localhost:9000/


  1. Deploy to online services. Example: Netlify

    Deployment isn't limited to Netlify. This works as well with services such as zeit.co/now or your favorite service. We currently are working on Webhooks, so you can redeploy after writing a new article.
    Also incremental builds are possible for Enterprise customers. Please get in touch, if that's a crucial feature.

    Quick deployment:

    Drop your public folder onto Netlify. Tada, your website is live.

    Standard deployment

    Connect your Github/Gitlab repository and automatically re-deploy on new commits.
    We are working on Webhooks and incremental build-processes for the public, stay tuned.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

You can’t perform that action at this time.