Skip to content

Instantly share code, notes, and snippets.

@jasoncomes
Last active February 13, 2019 03:45
Show Gist options
  • Save jasoncomes/cc4c75b7006d6f3496e53dbb71ac02ae to your computer and use it in GitHub Desktop.
Save jasoncomes/cc4c75b7006d6f3496e53dbb71ac02ae to your computer and use it in GitHub Desktop.
Contentful CMS -> CircleCI -> Github Repo -> Netlify -> Static Site Generator Jekyll

SSH Key

  1. Create SSH Key with Read/Write Access for site: ssh-keygen -t rsa -b 4096 -C "deploy@{domain}"
  2. Choose Location: Add SSH Key to Projects lib folder.

Github

  1. Create Repository
  2. Copy generated SSH Key from the lib/id_rsa.pub key to site/settings/deploy, name it CircleCI Deploy Key. Allow write access.
  3. Clone repository locally.

Static Site Generator(Jekyll)- Development

  1. Install Jekyll & Bundler Gems ~ gem install jekyll bundler
  2. Project Root ~ run jekyll new .
  3. Read here on usage of Jekyll - https://jekyllrb.com/docs/quickstart/.
  4. Add the jekyll-contentful-data-import Gem to Project Gemfile Plugins. https://github.com/contentful/jekyll-contentful-data-import
# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.6"
  gem "jekyll-contentful-data-import" # <~ This Gem, remove comment.
end
  1. bundle install
  2. Adds the jekyll contentful to fetch entries for the configured spaces and content types(Which we'll setup later, we'll need to configure the _config.yml file after a few steps).

Circle CI

  1. Add Project
  2. Select Project Repository
  3. Settings: OS - Linux, Language - Ruby
  4. Create circle.yml file in site root. Populate circle.yml with:
machine:
  ruby:
    version: 2.3.1
dependencies:
  pre:
    - gem install bundler
checkout:
  post:
    - bundle install
    - bash lib/automated_build.sh
  1. Build ~ This generates a generic Read Only Deployment Key to the Projects Github Repo, you may remove because we'll need to use the key that has Read/Write Access to the Projects Repository. Projects -> Settings -> Permissions -> Checkout SSH Key.
  2. Copy generated SSH Key from the lib/id_rsa key to the Projects -> Settings -> Permissions -> SSH Permission, add Hostname github.com
  3. Create API Token for the Contentful API Webhook, this will be fired when a User Publishes/Unpubishes Entries. User Settings -> Personal API Token, name Contentful CMS.
  4. Create automated_build.sh to your lib folder, populate with:
# Copy static site
CWD=`pwd`

# Clone Pages repository
cd /tmp
git clone git@github.com:jasoncomes/contentful-cms.git build
# cd build && git checkout -b YOUR_BRANCH origin/YOUR_BRANCH # If not using master

# Trigger Jekyll rebuild
cd $CWD
bundle exec jekyll contentful

# Jekyll Build ~ Handled through Netlify
# bundle exec jekyll build

# Push newly built repository
cp -r $CWD/_build/* /tmp/build # or $CWD/_build

cd /tmp/build

git config --global user.email "jasonwcomes@gmail.com"
git config --global user.name "Jason Comes"

git add .
git commit -m "Publish/Unpublish of Entry - Automated Rebuild"
git push -f origin master

ContentFul ~ Cloudbase CMS

  1. Create a new Space(code word for Site).
  2. Create Space Settings -> API Keys -> Content Delivery Token. Trigger this Webook for only Entry: Publish, Unpublish. Everything else, blank on page. Plase below snippet in your Projects _config.yml file.
# Contentful CMS
contentful:
  spaces:
    - site:
        space: xpv3b4sqgroo # Site Space ID
        access_token: e0e7c0049bc4662c6bbd72bc09bb896e050201079b04a15c1ca3c64a9f51b451 # Site Space Access Token

This is the bare bones of it, if you need more customization please refer to this - https://github.com/contentful/jekyll-contentful-data-import#configuration

  1. Create Space Settings -> Webhook. Settings: Name - CircleCI, URL - `https://circleci.com/api/v1/project/HigherEducation/PROJECT_NAME/tree/master?circle-token=CIRCLECI_API_TOKEN
  2. Start with Content Model, this is equal to Custom Post Type Setup. Will give you the ability to add Fields to Content Model Types.

Netlify

  1. Sites Github Repository(Master branch) ~ Connect/Authorize with Github, this adds a read only deploy key to site/settings/deploy keys.
  2. Netlify triggers on commit to Master
  3. Runs Jekyll Build
  4. Deploy site
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment