About the livingdocs-blog-starter

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

// TODO(rm plugin data from public-blog example): You hav to configure the graphQL schema to fit your usecase. // We provided a bare-minimum, which can be enhanced with livingdocs metadata-plugins.

Quick start

1. Clone this repo

   Start by cloning this repository and installing the dependencies.

   git clone
   npm install
   

2. Use your own API Key

   in the root of your folder in gatsby-config.js, you'll have to swap out yourToken You can find your token here: URL

   plugins: [
     {
       resolve: 'gatsby-source-livingdocs',
       options: {
         // optional, limit: default 10, max 100
         limit: 100,
         accessToken: "your_livingdocs_token"
       }
     }
   ]

   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. Open the source code and start editing the project locally!

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

   cd livingblogs/
   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. Remove our branding, and use your own

   The following folders and files are going to be interesting starting points

    ├── src
      ├── components
        ├── footer | contains livingdocs links
        ├── header | contains livingdocs branding
        ├── layout | contains all SEO data (some specific to livingdocs)
        ├── resources
          ├── favicon.png | the livingdocs favicon
          ├── living-times014.css
      ├── pages
        ├── 404.js | Our 404 starter-page
        ├── index.js | Homepage / initial route
    ├── gatsby-config.js
    ├── gatsby-node.js | all blogPosts and authorPages are created 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

gatsby-plugin-offline This is helps making your blog / website accessible, even without internet connection

3. This Blog in combination with Livingdocs

Weather 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
    ├── blog-post.js

The layout & blog-post components will set up all the neccessary 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 starterkits.

🎓 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.

💫 Deploy