Using Crafter CMS, GitHub, and Two-Factor Authentication

Crafter’s Git-based CMS supports developers working against remote repositories like GitHub, GitLab, Bitbucket, and others. Many organizations that use GitHub enforce a two-factor authentication for developers. This article shows you how to create a site in Crafter when you have two-factor authentication in GitHub configured. Step 1: Configure an Access Token in GitHub If you are reading this article, it’s very likely you already have two-factor authentication configured and are using it with GitHub. If you’re interested in setting it up you can learn more about that here.


How to Build a Serverless, CMS-powered Angular Application

Angular has taken off in popularity and is in widespread use. Developed and maintained by Google engineers, Angular has found a place all across dynamic web applications and is an increasingly in-demand platform.
Angular offers the advantages of a large and enthusiastic community and outstanding MVC that doesn’t require developers to spend valuable time writing code to put multiple MVC components back together again. In short, Angular is a robust and comprehensive web application framework for front-end development that is unit-testing ready, making it the tool of choice for many developers.
If you’re using Angular, you may run into the need for content management capability — a blog being one example. Adding a CMS to an Angular app may seem daunting, especially if you’re trying to integrate it into a traditional CMS like WordPress, but there’s a new breed of API-based CMS that greatly simplifies things. ButterCMS is one example of a SaaS-based headless CMS that provides a hosted CMS dashboard and content API that you query from your Angular application. This means you don’t need to spin up any new infrastructure to add a CMS to your Angular app.
This tutorial will demonstrate how to build a CMS-powered Angular application that has marketing pages (customer case studies), a blog, and FAQ, all powered via an API. No servers needed!
First, you’ll get started by installing the Angular CLI.
npm install -g @angular/cli

Set up a new Angular project using Angular CLI. By default, Angular CLI uses CSS styling, so adding the –style=scss flag tells Angular CLI to use SCSS instead:
ng new hello-buttercms-project –style=scss
cd hello-buttercms-project

Install Angular Material and Angular Material related package:
npm install –save @angular/material @angular/cdk
npm install –save @angular/animations

Install ButterCMS. Run this in your command line:
npm install buttercms –save

Butter can also be loaded using a CDN:
<script src=”"></script>

Quickly Get Started
Open the project in your code editor of choice. Under src/app create a directory called _services.
We create a file called butterCMS.service.js. This allows us to have your API Token in one place and not accidentally alter it.
import * as Butter from ‘buttercms’;

export const butterService = Butter(‘b60a008584313ed21803780bc9208557b3b49fbb’);

You’ll import this file into any component we want to use ButterCMS.
For a Quickstart, go to src/app/hello-you/hello-you.component.ts and import butterService:
import {butterService} from ‘../_services’;

Inside the HelloYouComponent create methods:
fetchPosts() {{
page: 1,
page_size: 10
.then((res) => {
console.log(‘Content from ButterCMS’)

Now call this method when the component is loaded by adding it to the OnInit lifecycle hook:
ngOnInit() {

This API request fetches your blog posts. Your account comes with one example post, which you’ll see in the response.
Next, create another method to retrieve the Homepage Headline Content Field:
fetchHeadline() {
.then((res) => {
console.log(‘Headline from ButterCMS’)

Add this method to the OnInit lifecycle hook.
ngOnInit() {

This API request fetches homepage headline content. You can set up your own custom content fields to manage any kind of content you need.
Add Marketing Pages
Setting up CMS-powered pages is a simple, three-step process:

Define the Page Type
Create a page
Integrate into your application

Define Page
First, create a Page Type to represent your Customer Case Study pages. Next, define the fields you want for your customer case studies. With your Page Type defined, you can now create the first case study page. Specify the name and URL of the page, and then populate the content of the page.
With your page defined, the ButterCMS API will return it in JSON format like this:
Continue reading %How to Build a Serverless, CMS-powered Angular Application%


Content Management Meets DevOps (Part 2 of 2): How a Git-Based CMS Supports Continuous Integration and Delivery

As we learned in Part 1 of this series, ‘Content Authoring and Publishing,’ development and content authoring are both a major part of producing today’s digital experiences. Unfortunately, development support is not something traditional CMS platforms handle very well at scale. Crafter CMS, a 100% open source project not only supports authors but DevOps as well.
In this article, we’re going to expand on the authoring workflow and publishing mechanics we looked at in the last article and explain how git-based CMS seamlessly supports DevOps tools and process.


Content Management Meets DevOps (Part 1 of 2) How a Git-Based CMS Improves Content Authoring and Publishing

Traditional CMS platforms based on SQL and JCR repositories have begun to show major signs of weakness in keeping up with today’s demands for a high rate of innovation and rapid scalable deployment on modern elastic architectures. This is nowhere more evident than the move towards headless CMS. Many CMS platforms today push headless, or what some call Content as a Service (CaaS), as the one-stop-shop solution to the struggles most CMS platforms have in providing support for scalability, multi-channel, and development integration. It’s not. Headless capability is important but it has its own limitations.
Open source Git-based dynamic CMS tackles these all of these challenges head-on with a set of technologies that incorporate lightweight development, integration with developer tools and processes, and elastic scalability for content delivery that provides the ability to serve any front-end technology via an API or markup with fully dynamic content.


Working With Crafter Studio’s API

Crafter CMS is a decoupled CMS composed of multiple microservices where content authoring and content delivery capabilities and services are separated into their own distinct, subsystems.

Organizations often want to interact with the content authoring and management system via APIs. In this article, we’ll show the basics of interacting with this API:


Adding a CMS to Your Static Site With Netlify CMS

For nearly seven years I was a CMS implementer and contributor, mostly with Drupal, but occasionally with Joomla! and WordPress. Then about 3 years ago I encountered Jekyll and I had a revelation, a system that let me manage and render content, but in a manner that suited me as a writer, using markup formats such as markdown, reStructuredText, and Asciidoc. Whilst the plain text and version control approach is great for some, and despite best efforts from vendors such as GitHub and GitLab, it’s still not that accessible to less technically minded people. Many projects have attempted to bridge this gap and merge the best of the two worlds, from commercial SaaS providers such as Contentful, Prismic, or CloudCannon to open source options like Cockpit and getmesh.
Just over a year ago, Netlify, the fantastic host for static sites announced ‘Netlify CMS’ and it looked promising, adding a CMS-like interface to the git workflow. I made some initial investigations, but now finally have time for a proper dive into how to set it up and use it.


The Rise of the Butt-less Website

It seems like all the cool kids have divided themselves into two cliques: the Headless CMS crowd on one side and the Static Site Generator crowd on the other. While I admit those are pretty cool team names, I found myself unable to pick a side. To paraphrase Groucho Marx, “I don’t care to belong to any club that will have me as a member.”

For my own simple blog (which is embarrassingly empty at the moment), a static site …

The Rise of the Butt-less Website is a post from CSS-Tricks


Five Reasons Why You Should Use a Git-based CMS (Part 5 of 5)

In our previous posts we looked at Git-based CMS and its versioning (part 1), distributed repository (part 2), dug in to Git’s underlying mechanics to see how it benefits deployment (part 3), and we looked at how the support for branching (part 4) can help your organization dramatically speed up development and deployment activities. In this post, we’re going to wrap the series up with one final reason you should use a Git-based CMS.
There are so many advantages to the way that we’ve leveraged Git, it’s hard to pick just 5 things to talk about. Because I’ve arrived at our last reason, #5, I want to use this item to speak to something non-technical: familiarity.


Five Reasons Why You Should Use a Git-Based CMS (Part 3 of 5)

Most CMS technologies are what we would call a “coupled CMS." The content authoring and content delivery environments are usually part of the same stack. The act of "going live" with new content or a feature is essentially based on the act of marking a true/false in a database field. There are a lot of problems with coupled CMS platforms around security, performance, scalability, and flexibility (you can learn more here.)
For these reasons and many others, Crafter CMS is built as a decoupled CMS. With a decoupled CMS you author content in one system and publish to another separate system. For platforms like Crafter CMS that are decoupled, when correctly implemented, the architecture provides great solutions for the issues mentioned above. That said, nothing is without its challenges. Decoupled systems, by their nature, are typically very scalable and can have many instances all over the world. Security, scalability, and distribution are no longer issues that only concern the Internet’s biggest players like Google and Amazon. Security and distribution impact customer experience, safety and help reduce operating costs. Every brand-conscious and customer-forward organization in the world is focused on these tactical issues.