1 of 25

2 of 25

Huge Thanks to OST for Hosting!!

3 of 25

Welcome

Hello and Welcome everyone to the first ever JAMStackGR!�If you are joining remotely we are located in Grand Rapids, MI - USA

Agenda:

5:30pm EST Meeting/Stream begins
Pizza / Hangout 10ish minutes
5 Minutes on JAMStackGR
25 Minutes on Sanity.io as a backend for Static Site Generators
10 Minutes Q&A
10 Minutes Wrap - Up

4 of 25

Why JAMStackGR?

The title of this group has been something very difficult to come up with! For the longest time I wanted to just call it Front End GR. Then decided that was too limiting. It is more than just Front End Web Development. ��There is a fantastic group called GRWebDev, which admittedly will cover very similar material, so anything with Web Dev in the name is out. On that subject why another group if they have it covered, because `MORE`==`BETTER`. My goal is to hit the front of the month while they tend to present at the end of the month. ��We are housed at OST and have 250 Talented Professionals here that can help push this group forward. Yes we will mainly focus on JavaScript, API, and Markup, but with any stack we need great designers so we will cover Figma, Sketch, Adobe XD and more. But wait...isn’t the world going to the cloud?!? YES! so we will also cover �AWS, Azure and GCloud too!

5 of 25

Code of Conduct

Examples of behavior that contributes to creating a positive environment include:

Using welcoming and inclusive language
Being respectful of differing viewpoints and experiences
Referring to people by their preferred pronouns and using gender-neutral pronouns when uncertain
Gracefully accepting constructive criticism
Focusing on what is best for the community
Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

The use of sexualized language or imagery and unwelcome sexual attention or advances
Trolling, insulting/derogatory comments, and personal or political attacks
Public or private harassment
Publishing others' private information, such as a physical or electronic address, without explicit permission
Other conduct which could reasonably be considered inappropriate in a professional setting
Dismissing or attacking inclusion-oriented requests

We will be using Dev.to as a reference:

https://dev.to/code-of-conduct

6 of 25

Using Sanity.io as a Backend

7 of 25

Why Sanity?

8 of 25

What Makes Up Sanity.io?

9 of 25

10 of 25

Sanity Studio React.js

11 of 25

Content Editor

https://www.sanity.io/blog/introducing-the-new-editor-for-portable-text

You can think of this as your Admin portal, it doesn’t necessarily represent the look of your final product.

12 of 25

AJonP’s Sanity.io

https://www.sanity.io/blog/introducing-the-new-editor-for-portable-text

You will notice that it is all about the content, because the Studio on left is not even close to how my site ends up looking.

13 of 25

Portable Text

14 of 25

Portable Text

Portable Text is probably the hardest part about Sanity.io, but once you understand it (not even in great detail) you can see the power it holds.��Portable Text is a JSON based rich text specification for modern content editing platforms. In order words, it's not "an alternative to Markdown", which was designed to be easy for humans to read and write something that would specifically end up as HTML. Portable Text is designed to be a format for text editing interfaces and for serializing into any human-readable format.

https://www.sanity.io/blog/why-structured-text-is-awesome-and-you-totally-want-it-in-your-cms

https://www.sanity.io/docs/guides/introduction-to-portable-text

15 of 25

Portable Example

Portable Text

[

{

"_key": "<aRandomString>",

"_type": "block",

"style": "normal",

"children": [

{

"_key": "<aRandomString>",

"_type": "span",

"marks": ["strong"],

"text": "Say hi to "

},

{

"_key": "<aRandomString>",

"_type": "span",

"marks": ["strong", "<markDefReference>"],

"text": "Portable Text",

"markDefs": [

"_key": "<markDefReference>"

"_type": "URL",

"link": "https://www.portabletext.org"

]

}

],

"markDefs": []

}

]

HTML

<p>

Say hi to <a href="https://portabletext.org"><strong>Portable Text</strong></a>

</p>

Markdown

[Say hi to **Portable Text**](https://portabletext.org)

16 of 25

17 of 25

18 of 25

Bring your own frontend!

19 of 25

Sanity Starters

20 of 25

Gatsby Starter

Let's start by creating a new Blog with Sanity.io’s Gatsby Starter template!��Gatsby is a Static Site Generator (SSG) built with the React.js framework.

Demo Time!

https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-blog

21 of 25

Gridsome Starter

Let's continue by creating a new Blog with Sanity.io’s Gridsome Starter template!��Gridsome is a Static Site Generator (SSG) built with the Vue.js framework.

Demo Time!

https://www.sanity.io/create?template=sanity-io/sanity-template-gatsby-blog