Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Guide to Headless CMS for those that usually work with HTML, CSS and Vanilla JS

6 replies
Last updated: Mar 18, 2021
Hey guys, I just want to get something off my chest. I think it's pretty hard to get a guide on how to use the headless CMS for people who only know HTML CSS and vanilla JS. Maybe it's me who is just not skilled enough for this but I think many topics are not explained well. For instance I didn't get a clear guide on how to setup a very basic headless CMS for my portfolio and how I would connect it. I either found overkilling guides which would be too much setup for my case or It's that I need to setup with react, gatsby, nextjs or the like.
Again, maybe it's only because I'm too unskilled to get it, I don't know.
Mar 16, 2021, 3:08 PM
user L
Are you a developer, or do you just know some basic web programming things?
Putting up a static site and making minor edits to a single set of html, css, and javascript is not going to be the same experience as developing a server backend and database relationship for use in the frontend. While Sanity is great at reducing the amount of development you would have to do with setting up and maintaining a database, and comes with a pretty great javascript client, it can't do
everything.
If you do have several years or more of development experience and you are finding it hard to get going with a headless CMS like Sanity, then I'm curious what you do have experience with and how that experience differs from Sanity? Have you worked with WordPress before? WordPress is not a headless CMS, as in the frontend and the backend are locked in with each other. You can use WordPress in a headless way, and I love doing that, but most people's primary experiences with WordPress is in minor updates to the theme or a plugin amongst a sea of already developed code.

I think the simple answer here is that webserver programming and full stack development is much more involved than just html + css + javascript. While there are no quick and easy solutions in this space to bridge a gap between the frontend and backend; please know that there is hope on the horizon. People like myself, and the people at
Sanity.IO , and all of the JAMstack crowd seem to have your use case in mind: how easily can we get frontend developers up and running with what they need so they can get back to focusing on the frontend part?
Mar 16, 2021, 4:21 PM
user J
Thank you for this feedback, it is very helpful. We are currently discussing and working on more explicit documentation to help frontend developers get started with sanity.io as quickly and as painless as possible. One of our goals is to make sure that anyone who wants to learn and use Sanity is able to do so regardless of development experience.
Mar 16, 2021, 4:59 PM
Although I'm very deep in the weeds, I can relate to this feeling, Adam. When I got into Sanity all I knew was some very basic JS and a bit of HTML & CSS, and it was super painful to get the whole picture.
While the team works on providing better documentation as lauren put above, I'm glad to help you get started, just DM me
🙂(it's something I've been wanting to do for a while:
https://sanity-io-land.slack.com/archives/C9Y9GF1QD/p1615924827023400 )
Mar 16, 2021, 7:57 PM
I would recommend Eleventy for you then as it’s closer to the vanilla JS and HTML you’re familiar with BUT... I think it’s the most difficult Site Generator to understand the relationship between queried data and your templates.
I’d also say to get started, looking at Sanity Starters is helpful – but you’ll learn heaps putting it all together from the most basic, bare bones setup.
Mar 16, 2021, 8:10 PM
Thank you for this
user J
- its much appreciated and highlights conversations we’ve had over the past weeks about offering some tutorials that can help people get on at the ground floor, making as few assumptions as possible.
Mar 16, 2021, 11:55 PM
user A
and
user P
, thank you for listening. I know you guys are doing the best to make it as easy as possible and I think you are not far away from the future you are seeking for
Mar 18, 2021, 5:57 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing

Jamstack Explorers
- Made with Sanity

Jamstack Explorers is a free learning platform created by the team at Netlify to chart a course through the amazing offerings in the Jamstack ecosystem

Go to Jamstack Explorers