W h it h er W or d pr e ss? J A MS t ac k C M S a re r ea d y t o s hi n e! B y B r ia n R i na l di @r e mo t es y nt h
I d on't h a te W o rd p re s s
2015 I was a believer in static site tools - or what we now call JAMStack - since the early days. I've been writing and speaking on this topic since at least 2014.
2015 I wrote a report for O'Reilly back in 2015. Back then the process was very labor intensive.
J u st i n c as e t h is i sn’t a lr e ad y c l ea r , I w an t t o e m ph a si z e t ha t s t at i c s it e g e ne r at o rs a re b ui l t f or d ev e lo p er s . T h is s ta r ts w it h t h e d ev e lo p me n t o f t he s it e a l l t he w ay t hr o ug h t o a d di n g c on t en t . I t ’s u nl i ke l y t ha t n o nd e ve l op e rs w il l f e el c om f or t ab l e w ri t in g i n M a rk d ow n w i th Y AM L o r J S ON f ro n t m at t er, w h ic h i s t h e m et a da t a c on t ai n ed a t t he b eg i nn i ng o f m os t s t at i c s it e e n gi n e c on t en t o r fj l e s. N o r w ou l d n on- t e ch n ic a l u se r s l ik e ly f ee l c o mf o rt a bl e e d it i ng Y AM L o r J S ON d at a fj l e s. 1 M e (S tatic Si t e G enerat o rs r eport f o r O'R eilly 2 015 )
Flash forward a couple years later things had minimally improved
2017
...F r om a d e ve l op m en t a n d c on t en t c o nt r ib u ti o n s ta n dp o in t , s t at i c s it e g e ne r at o rs (i.e., t h e t oo l s f re q ue n tl y u s ed t o b ui l d s ta t ic s it e s— a n d w ha t t h is b oo k i s a b ou t ) c a n h av e a s te e p l ea r ni n g c ur v e. L a st l y, d e pl o ym e nt c an b e c om p le x , m a ki n g s ta t ic s it e s l es s t h an i de a l f or c on t en t t h at c ha n ge s f r eq u en t ly. 1 M e (W orking wi t h S tatic S ites , 2 017 ) The tooling was very primitive. It required a comfort with the command line and knowledge of things like Markdown, YAML and "front matter."
T h e D ev e lo p er E xp e ri e nc e I m pr o ve d The developer experience started to improve - eliminating the need for manual builds and FTP deployment, for example.
GitHub Pages added Jekyll support as far back as 2014 meaning you could just check in your code in GitHub and the page would build automatically.
Netlify launched in 2015, these improved the dev experience but didn't impact the content writer/editor experience at all.
The actual process of creating and managing content, however, was still a very manual process of creating and editing text files in the file system.
Content creators were used to a WYSIWYG experience and more advanced content management tooling similar to Wordpress site admin
S t at i c S it e C M S Some solutions tried to resolve this by creating a CMS-like experience but in a static context
J e ky l l A dm i n Jekyll is one of the oldest and most widely used static site generators and it was the first that I was aware of to release an officially endorsed admin
J e ky l l A dm i n A vailab l e a t : h ttps ://g ithub .c om /j ekyll /j ekyll -a dmin I nstall a tion : 1. M odify yo u r s ite 's G emfj l e to a dd : gem 'jekyll-admin', group: :jekyll_plugins 2. R un bundle install 3. S tart J ekyll a n d go to http://localhost:4000/admin Jekyll admin works fine but it is intended to be run locally, so there are no user authentications and there are very limited configuration options
N e tl i fy C MS Netlify CMS is an open source project from Netlify that is a highly configurable administration panel that can be added to pretty much any JAMStack site. Unlike Jekyll admin, it is designed to be run publicly - it defaults to Netlify's Indentity service but it can be configured to use external OAuth providers for authentication.
N e tl i fy C MS A vailab l e a t : h ttps ://w ww .n etlify c ms .o rg I nstall a tion : 1. O ption A: O n e C lick I nstall 2. O ption B: C ustom I nstall Installation of NetlifyCMS can be extremely simple assuming this is a new project. Configuration for existing or highly customized projects can get fairly complex.
N e tl i fy C MS - I n st a ll a ti o n Just click the button and you are redy to go. However, you are limited to just Hugo, Gatsby or Middleman and deployed to Netlify. Stackbit also supports a very similar installation of NetlifyCMS that works with Hugo, Gatsby and Jekyll.
N e tl i fy C MS - I n st a ll a ti o n 1. A dd an a dmin f older wi t h an i ndex .h tml th a t i nclude s t h e N etlify C M S s cripts . 2. A dd a c onfj g.y aml to t h e a dmin f older wi t h c onfj g uratio n o ptions a n d a da t a s pecifj c ation
N e tl i fy C MS - R e so u rc e s 1. O vervie w a n d o ne -c lick i nstall w alkthr o ugh : A F resh Lo o k at N etlify C M S P t . 1 2. C ustom i nstall w alkthr o ugh : A F resh Lo o k at N etlify C M S P t . 2
T h e H ea d le s s C MS Around the same time that JAMStack was taking off the idea of headless CMS began to rise. Contentful, Forestry, Sanity, Dato are a few well known examples.
W h at i s a H e ad l es s C M S? For those of you unfamiliar with the term, a headless CMS is essentially the back end of a CMS decoupled from the presentation of the content on the front-end. A headless-CMS is essentially a content API for the front end but gives the back end content editors the tools they need to create a manage content. Let's look at two examples of different types of headless CMS.
1 1 S ource : h ttps ://h eadles s cms .o rg / Chris Coyier released a post just yesterday that tries to organize different CMS into a chart based on some of the features to make it easier to understand how headless fits in.
1 1 S ource : h ttps ://h eadles s cms .o rg / There's also headlesscms.org, which is maintained by Netlify, that lists all of the headless CMS with filters for supported static site generator, license and more.
E x am p le s - C o nt e nt f ul Contentful is probably one of the most well-known headless CMS solutions and perhaps also one of the most widely used. It is a more traditional headless-CMS in that all the content is stored in within Contentful and then accessed via an API. Let's look at the Contentful backend so you get a sense of what it feels like.
E x am p le s - F o re s tr y Forestry is an example of a git-based headless CMS. This means that Forestry stores content in a Git repository you create, but Forestry provides the tools to manage that content with an editing UI that understanding things like Markdown, YAML and JSON.
C o nn e ct i ng Y ou r J A MS t ac k s i te t o a H e ad l es s C M S So now you have a CMS backend, but how do you integrate it with your front end site?
P r eb u il t I n te g ra t io n s C ontenf u l m aintai n s p re -b uilt i ntegra t ions f or : * J ekyll * G atsby * M iddlem a n * M etalsm i th Note that I tried to test the Jekyll gem. Installation and use is pretty simple, but it appears to not yet be compatible with Jekyll 4.0.0 which released relatively recently.
P r eb u il t I n te g ra t io n s F orestr y i nclude s p rebuil t s tarter s f or : 4 G atsby 4 H ugo 4 G ridsom e 4 E levent y 4 V uePres s As Forestry is a git-based CMS that doesn't actually store the content itself, rather than provide plugins, they provide starter projects.
U s e t he A PI Content can be brought in manually if you don't use one of the static site generators your CMS supports or you use a custom solution, provided it has an API. Some static site generators support bringing content from an API out of the box. You can also write something that locally calls the API and pulls content converting it to files or you can use something like a Netlify function that is triggered on deploy-building
S t ac k bi t
W e C a n S ti l l D o B et t er While I hope you agree that the editing experience has definitely improved, we're still not quite to the user experience many content editors have been used to.
I n t h e Y ea r 2000 While we're at a point where JAMStack + headless is a real alternative to a traditional CMS, but it could be better. The administration of the site is still fully decoupled from the front end making some edits tough. Let's take a quick look at some ideas for how this can be improved.
TinaCMS is an open source inline editing experience built by Forestry. As you can see, it allows
s t ac k bi t .c o m/l i ve
T h an k s! T witter : @r emotes y nth E mail : b rian @s tackbi t.c om
Recommend
More recommend