The beauty of using a static site generator is that your back end can be completely separated from your front end. You can easily swap it out at any time no questions asked, and that&#39;s exactly what I did with <a href="https://learnbuildteach.com">Learn Build Teach</a>.
I went from markdown files to a true headless CMS in Cosmic for my courses information. The WhyWhy would I want to make this shift you might ask? Well, by completely decoupling my front end and backend, it gives me some flexibility. I have the ability to swap out my backend at any time as I mentioned. But also, it gives me the ability to leverage
that data on multiple different front end applications.&nbsp; Additionally (and this is the big sell for Cosmic), if I am going to have non developers contributing to my content, they get an easy to use GUI to update information. Writing markdown files isn&#39;t extremely difficult, but it certainly can be tricky
for people that are new to it. With Cosmic, anyone with access can easily create/update content in a comfortable environment! <iframe width="640" height="360" src="//www.youtube.com/embed/Qls5frYlJeI?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>

VIDEO: From Markdown to Cosmic with Gatsby

Creating / updating our portfolios is a necessary evil these days. &nbsp;Places change, people change, and thus the cycle of content creation and management churns continuously. &nbsp;When you find yourself in need of &nbsp;a portfolio redesign, there are tons of tools and services to consider. &nbsp;One that should currently peak your interest is the Gatsby JS static site generator along with a headless CMS, like Cosmic. &nbsp;Today, with these two tools, we will create a working portfolio ready for continuous deployment, with the power to be rebuilt when content changes are made.<h3>TLDR:</h3><a href="https://cosmicjs.com/apps/gatsby-agency-portfolio" rel="noopener noreferrer" target="_blank">Gatsby Portfolio Site Demo</a><a href="https://github.com/cosmicjs/gatsby-agency-portfolio" rel="noopener noreferrer" target="_blank">Download the Codebase</a>&nbsp; <h2>0.0 Before We Start</h2>We are creating a portfolio site mostly with static data, but it would nice to be able to easily modify the content of our site without needing to modify a bunch of source code. &nbsp;So we are building a client that consumes content stored on a Content Management Service and programmatically displays it at whatever URL we choose.&nbsp;<h3>0.1 Tools We Are Using</h3><ul><li><a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby JS</a> - This is a static site generator that will automatically fetch new data and rebuild our site files when changes are made to our content. &nbsp;Comes bundled with data fetching wizardry GraphQL and the ever present React JS front end framework.</li></ul> <ul><li><a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> - Our Content Management Service that will store all the information we need about our site. &nbsp;Cosmic offers very flexible data model definition that will allow us to store all types of information, from iterables to simple text fields and HTML content. &nbsp; NOTE! - In order to follow along with this tutorial you will need to create a bucket on Cosmic and fill it with the appropriate data objects.</li></ul> <ul><li><a href="https://rsuitejs.com/en">RSuite</a> - A library of pre-styled components that works with react to give us pre-styled components. &nbsp;This will allow us to use components that look great out of the box, while also giving us flexibility to make adjustments as needed.</li></ul> <ul><li><a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> (Optional) - A deployment service that will let us hook directly into a git repository. &nbsp;Using this we can configure webooks for rebuilding static files as well as make automatic deploys when source code changes occur.</li></ul>Let&#39;s go ahead and begin configuring our setup.<h2>1.0 Installation and Setup</h2>We only have a few software requirements needed to start building. Mainly we need <a href="https://nodejs.org/en/">Node JS</a>, either npm or yarn, and we will be using <a href="https://git-scm.com/" rel="noopener noreferrer" target="_blank">git</a> to do some deployment things on Netlify if you so choose.<h3>1.1 Initializing our Project</h3>Once you get those installed, we can begin setting up our development environment. &nbsp;Gatsby uses a very handy dandy CLI to allow us to bootstrap our project with a project directory ready to build and serve from a Node environment.If you don&#39;t have the CLI you can install it with a simple npm terminal command:<pre>$npm install -g gatsby-cli</pre>This will take a moment to install but after a few seconds you will have access to gatsby terminal command which we can use to initialize our project:<pre>$gatsby new gatsby-portfolio</pre>Now we have a directory called gatsby-portfolio in the location you ran the gatsby command, change to that directory and list its contents:<pre>$cd gatsby-portfolio/ &amp;&amp; ls -la</pre>You should see a list of folders and files similar to this:<pre><code>.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md</code></pre>open up package.json and we will see we have some terminal scripts that we can now use to build / serve our project. Try running the start script in your terminal:<pre>$npm start</pre>or&nbsp;<pre>$yarn start</pre>After a few seconds we should see a success message in our terminal and we should be able to view our initial project view on our <a href="http://localhost:8000" rel="noopener noreferrer" target="_blank">localhost</a>, your should see something like this:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1017d800-70f4-11e9-b4ca-010bf33e4f63-gatsby-start-screen.png" style="width: 410px;" class="fr-fic fr-dib">Great, now press ctrl + C within your terminal to stop the development server and we are now ready install our node libraries.<h3>1.2 Installing our Libraries</h3>We require a few plugins from Gatsby to allow our Graphql queries to run, as well as a few extras for environment configuration and our component library RSuite. &nbsp;From within your project directory, we need to run some terminal commands to get our js libraries:<pre>$yarn add rsuite dotenv gatsby-source-cosmicjs gatsby-plugin-sass gatsby-plugin-less node-sass less</pre>Let&#39;s go through these and talk about what we are adding to our project here:<ul><li>rsuite - our component library that I mentioned above. &nbsp;Installing this let&#39;s us import js classes and insert pre-styled React components.</li><li>dotenv - Allows us to configure our source code with sensitive api keys, token, whatever that may change between developers but should be present when the source code is built.</li><li>gatsby-source-cosmicjs - a gatsby plugin that will let us easily make graphql requests to the Cosmic graphql API.</li><li>gatsby-plugin-sass / gatsby-plugin-less / node-sass / less - Gatsby plugins and styling libraries that will let us use .scss and .less files. &nbsp;These will allow us to import rsuite styling specs and bundle them properly on build.</li></ul><h3>1.3 Configuring Gatsby</h3>In order for Gatsby to be able to build our html files, we need to fetch data from Cosmic and build each page using the data graphql retrieves. &nbsp;Let&#39;s go ahead and open gatsby-config.js and add our installed packages:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/04020f1404792702294814e65a1141e3' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/04020f1404792702294814e65a1141e3" class="embedly-card"></a></div>We have added our plugins for sass and less, and also added our gatsby-source-cosmicjs plugin. &nbsp;You&#39;ll notice that we are using some environment variables to configure this plugin so we need to add a hidden file that will store these variables.<pre>$touch .env</pre>Now add your variables to this file and dotenv will take care of defining these using line 1 of our gatsby-config.js file. &nbsp;You can find the value to assign to these variables from within your Cosmic bucket: Bucket Name &gt; Dashboard &gt; Settings &gt; Basic Settings:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/3e971eeda0b866d05cee9f78a6e82491' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/3e971eeda0b866d05cee9f78a6e82491" class="embedly-card"></a></div>Now we are ready to build!<h2>2.0 Building Our Components</h2>So what are we building exactly. &nbsp;Well, basically we will create one large Page component and create a series of display components to handle each section of our portfolio. &nbsp;Let&#39;s break this down:<pre>src/pages/index.js</pre><ul><li>This is our home page and where all of our components will be loaded and used to display portfolio info.</li></ul><pre>src/components/projects.js</pre><ul><li>This will be our projects section that will take project data and display information about each project. &nbsp;This will take a prop composed of our portfolio projects and iterate over them to display data when appropriate.</li></ul><pre>src/components/work.js</pre><ul><li>This will a section highlighting our skills and the types of services / work we offer to people that might peruse our portfolios.</li></ul><pre>src/components/about.js</pre><ul><li>This will be a section that talks about us, displaying any personal data we want to share.</li></ul><pre>src/components/contact.js</pre><ul><li>Finally we have a component that we will use for displaying a contact form that will let users email us if they have any inquires.</li></ul><h3>2.1 The Home Page</h3>This is our main component that act as our entry point for our portfolio. &nbsp;Its job is to make several Graphql API requests for our portfolio data from Cosmic and pass that data onto the different sections of our portfolio. &nbsp;Let&#39;s look at the component and talk about what&#39;s happening:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/ad7675d930faa86ca170ee16001dc0a9' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/ad7675d930faa86ca170ee16001dc0a9" class="embedly-card"></a></div>The important parts of this The only display element that really lives here is the splash screen which gives us a little bit&nbsp; <h3>2.2 Modify the Header Component</h3>By default Gatsby gives us a Layout component that lets us wrap each page with a Header and Footer. &nbsp;We are going to add some navigation for our portfolio into the header so users can navigate to different sections of our Portfolio by clicking on a nav bar that we will import from rsuite:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/54a7f2a4ef7c3800f099b2dd1b25728f' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/54a7f2a4ef7c3800f099b2dd1b25728f" class="embedly-card"></a></div>These links will scroll the home page down to each section via the name properties placed on each section on our home page.<h3>2.3 The Work Component</h3>This component takes in our data about any services we provide, specifically a names, a short summary,&nbsp;and a more in depth description, and let&#39;s us display that to our users:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/1b20f1c0fb1549364033d643c14efd19' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/1b20f1c0fb1549364033d643c14efd19" class="embedly-card"></a></div>This iterates through our services objects. &nbsp;For every service that exists we add a new div to the work component section. Now we can modify and add data to our services on Cosmic and it will update accordingly.<h3>2.4 The Projects and About Components</h3>These sections will behave in essentially the &nbsp;same way, &nbsp;we display some information from our &quot;Home Page&quot;. &nbsp;Just a bit of text to give the user some context for each section, but after that we just iterating through our list objects we have saved to our Cosmic bucket:<div class="fr-embedly" data-original-embed="<a href='https://gist.github.com/JacobKnaack/48a21123f39244c52f53a992c4426b11' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/48a21123f39244c52f53a992c4426b11" class="embedly-card"></a></div>And just like Project displays a heading and display images and data about projects, we can do the same with the individuals and data in the about section: <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0544a30590e0c20d4d29ee8416f0b6b8' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0544a30590e0c20d4d29ee8416f0b6b8" class="embedly-card"></a></div><h3>2.5 The Contact Component</h3>Lastly we have a component that will users to contact us at an email we specify. &nbsp;This will handle our contact form, and will be initialized with some state variables so we can control our user inputs, all the input and form components are handled by rsuite so we don&#39;t have to add too many styling properties to our form fields and feedback components:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0c42b547d2b487b48c9c52e686d7fbad' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0c42b547d2b487b48c9c52e686d7fbad" class="embedly-card"></a></div>Essentially we Validate our form fields and check if all the form fields are present, then we a the mailto url to open an email client and populate it with our message.<h2>3.0 Deployment (optional)</h2>Now we are ready to deploy our app. &nbsp;The most important part of this process is making sure that our app rebuilds itself when we change any data on Cosmic. &nbsp;If we integrate continuous deployment using git Netlify will allow us to activate a buildhook in order to generate new static files using updated data fetched from the Cosmic API.<h3>3.1 Deploying from Git</h3>Go to <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> and create an account if you don&#39;t aready have one. &nbsp;From the apps dashboard click New Site from Git at the app dahsboard. &nbsp;From there you will be walked through the process of authorizing Netflify to access a repository from a git service (github, gitlab, bitbucket).You will have to add you COSMIC_READ_KEY and your COSMIC_BUCKET_SLUG as environment variables. This can be found under the deploy settings once the app has been created on Netlify. &nbsp;In the same area you can create your buildhook to allow Cosmic to request a rebuild of your files once an update is made:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a01c7490-7353-11e9-9e31-110b00e15f97-Screen-Shot-2019-05-10-at-11.34.32-AM.png" style="width: 522px;" class="fr-fic fr-dib">Once the build hooks is created go over to Cosmic and add it to the webhooks tab under the settings for your bucket:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/dbfe0b90-7353-11e9-808f-9fee33ce619d-Screen-Shot-2019-05-10-at-11.45.49-AM.png" style="width: 141px;" class="fr-fic fr-dib">Follow the instructions for webhooks to fire a post request to that url every time an object is updated and you should have a continuously deployed, super fast portfolio site ready to be updated.Thanks for following along with me and I&#39;ll see you next time I decide to build something cool :)&nbsp;

Building and Designing a Portfolio Site Using Gatsby JS and Cosmic

<section name="4b56">It&rsquo;s been quite a while since I last created a demo application for <a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>, and it&rsquo;s been refreshing to see how much the platform has grown over the last year as it&rsquo;s taken on new endeavours and has solved new business challenges in the process. One of the improvements that&rsquo;s been added overtime are the substantial amount of new plugins and integrations, along with some nice hidden improvements to how Cosmic handles and manages localized content.</section><section name="3b6d"><hr><h3 name="b6e0">TL;DR:&nbsp;</h3><a href="https://cosmicjs.com/apps/gatsby-localization-app-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter App</a><a href="https://github.com/cosmicjs/gatsby-localization-app-starter" rel="noopener noreferrer" target="_blank">Download the codebase</a><h3 name="b6e0"> </h3><h3 name="b6e0">Before We Start</h3> <a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener" target="_blank">Cosmic&nbsp;</a>is a CMS platform that lets you leverage your content in a way that&rsquo;s agnostic to any specific platform. Essentially, it decouples you from having to lock your content down to a single framework, enabling you to implement and extend your own content as you wish. One of the most recent additions to the Cosmic toolbelt is the <code><a data-href="https://github.com/cosmicjs/gatsby-source-cosmicjs" href="https://github.com/cosmicjs/gatsby-source-cosmicjs" rel="noopener" target="_blank">gatsby-source-cosmicjs</a></code> plugin for <a data-href="https://www.gatsbyjs.org/" href="https://www.gatsbyjs.org/" rel="noopener" target="_blank">GatsbyJS</a>, allowing you to embed your Cosmic content into a statically generated React application. GatsbyJS is basically the effective way to leverage static hosting (for that sweet SEO gain), but still allowing you to leverage the abilities of a dynamic React environment.As a means of helping people like me who are into the essentials, and then building up from that, I&rsquo;ve created a minimalist Cosmic + Gatsby localisation starter application.<blockquote name="2b3d">What is localization anyways?</blockquote><blockquote name="2372">Localization is the act of making your content accessible to individuals outside of the language boundary you are typically used to, or simply put, the act of making websites comprehensive for people who don&rsquo;t speak the same language. Website localization is also a form of web accessibility, in the sense that by implementing it you are enabling a larger section of your preferred demographic to digest your content, which is great for everyone, including your add revenue, or just overall site traffic.</blockquote></section><section name="3fb4"><hr><h3 name="e5b0">Installing the demo (from Cosmic App&nbsp;Section)</h3> <a data-href="https://cosmicjs.com/apps" href="https://cosmicjs.com/apps" rel="noopener" target="_blank">Cosmic provides an easy-to-use means of creating your own clone of this starter application from their own web interface</a>. If you don&rsquo;t like getting your hands too dirty, or just would like to give the starter app a test drive, you can access it from here. The prompts will guide you in creating an account and creating the necessary items.</section><section name="96ad"><hr><h3 name="8749">Installing the demo (from&nbsp;source)</h3> The project source can be found here on GitHub. After cloning the repository, you should have something that loosely resembles the following structure.<pre><code>.gitignore
config.js
gatsby-config.js
gatsby-node.js
package.json
package-lock.json
LICENSE
src
├── components
│   ├── atoms
│   │   ├── HeaderNav.js
│   │   ├── HTMLContentArea.js
│   │   ├── LocaleSelector.js
│   │   └── PostTile.js
│   ├── layouts
│   │   ├── Blog.js
│   │   ├── common
│   │   │   ├── Container.js
│   │   │   ├── GlobalStyles.js
│   │   │   └── Head.js
│   │   └── Default.js
│   ├── modules
│   │   ├── BlogPost.js
│   │   ├── SitePage.js
│   │   ├── SitePostListing.js
│   │   └── withLocale.js
│   └── molecules
│   ├── Footer.js
│   ├── Header.js
│   └── PostList.js
└── pages
 └── index.js</code></pre>Also make sure you <code>npm install</code> so you have the needed repositories for running the Gatsby starter application. <h4 name="60b8">Configuring the base&nbsp;project</h4> The project itself has two main files that are intended to be configure. <code>gatsby-config.js</code> is responsible for specifying which Cosmic Bucket to source your content from, while the <code>config.js</code> file is used for configuring various front-end portions of your application.To ensure that Gatsby is able to read your Cosmic Bucket, you need to fill out the areas within <code>gatsby-config.js</code> that resemble the following:<pre>module.exports = {
 plugins: [
 &#39;gatsby-plugin-emotion&#39;,
 &#39;gatsby-plugin-react-helmet&#39;,
 {
 resolve: `gatsby-source-cosmicjs`,
 options: {
 bucketSlug: &#39;minimal-gatsby-localisation-site&#39;,
 objectTypes: [&#39;blog-posts&#39;, &#39;pages&#39;],
 apiAccess: {
 read_key: ``,
 }
 }
 }
 ],
}</pre>For the above, ensure that the <code>bucketSlug</code> values correlates with your own Cosmic Bucket, and that the <code>apiAccess.read_key</code> is present if you&#39;ve configured your bucket to require it. Also make sure you have <code>blog post</code> and <code>pages</code> Nodes within your Bucket, otherwise the <code>gatsby-source-cosmicjs</code> will not have the correct Gatsby GraphQL queries (preventing you from running the demo)<h3 name="5e8b">Running the&nbsp;demo</h3> To start the demo (in development mode) after all dependencies have been started, simply run <code>npm start</code>, or alternatively <code>npm run develop</code>. The project will then (by default) be accessible on port <code>8000</code> on <code>localhost</code>. The console output of the command will also let you know in case its been configured otherwise.The first thing you see should resemble this:<figure name="cbe0"><img data-image-id="1*pqAh4Lt_YRrU00fUr3eXbw.png" data-width="1107" data-height="970" src="https://cdn-images-1.medium.com/max/800/1*pqAh4Lt_YRrU00fUr3eXbw.png" class="fr-fic fr-dii"></figure></section><section name="ff94"><hr><h3 name="7463">How it&nbsp;works</h3> This localization starter app in particular relies heavily on the <code>locale</code> value that&#39;s bound to each Cosmic Object. While each Object would normally require each item to have a unique <code>slug</code> constraint (meaning that slug would need to be unique among all other nodes of a given type): because we&#39;d have localization enabled for this particular projection, we no longer need to worry about that. With localization, an Cosmic Object can have have the same <code>slug</code> value given that each variant also has a unique <code>locale</code> specified.The <code>withLocale</code> component from <code>src/components/modules/withLocale.js</code> contains login that&#39;s responsible that a connected Gatsby page, can resolve which locale a given Page or Blog Post should be shown with, and any alternative links based on a resources available locale variations. So for example, if a blog post with a slug of <code>example-post</code> has locale variants in <code>en-US</code> and <code>es-AR</code>, the correct page to show will be determined by:<ul><li name="4f83">The <code>locale</code> specified in the Gatsby <code>pageContext</code> value (if present)</li><li name="eb1a">The <code>locale</code> detected from the url</li><li name="651c">The first available <code>locale</code> value of the resource being presented</li></ul>Each of these values are compared against the value of <code>window.navigator.languages</code> and the value of <code>fallbackLocale</code> within <code>config.js</code>. This is helpful in situations where the content type being requested isn&#39;t actually available for a specific Page or Blog Post, or when the page has no contextually available <code>locale</code>, such in the case of <code>src/pages.index</code>, which will redirect to the most preferable locale based on browser config.<code>withLocale</code> is also responsible for resolving a value called <code>alternateResourceUrls</code>, which is a key-value mapping of alternate locales of the currently shown page. This is used by components such as the <code>src/components/atoms/LocaleSelector</code>.</section><section name="595c"><hr><h3 name="c31a">Project structure</h3> The overall design structure of this application is minimal, loosely following the Atomic Design principles, in the sense that:<ul><li name="ee25"><code>src/components/atoms</code> contains components that don&#39;t solely depend on other complex child components</li><li name="3eed"><code>src/components/layouts</code> contains components responsible for grouping various components together</li><li name="f4e3"><code>src/components/modules</code> contains components responsible for representing connected (dynamic values)</li><li name="d9cb"><code>src/components/molecules</code> contains components that are abstract configurations of <code>atoms</code></li></ul><code>src/pages</code> is responsible for storing static Gatsby pages that are usually mapped 1-1 like normal html pages. As such, files named <code>index</code> are treated as directory files, and files named anything represent a static path relative to the root.<h4 name="b6e2">Why does this starter project not have any static query&nbsp;pages?</h4> As a localized starter application, the content being rendered is inherently dynamic, since it&rsquo;s not capable of being mapped easily within a static application without requiring path subsets. Adding a static React page (i.e. <code>localhost:8000/pictures-of-cats</code>) would be the equivalent of making a <code>default export</code> React component in <code>src/pages/pictures-of-cats.js</code>.</section><section name="95df"><hr><h3 name="8fac">Where are the CSS&nbsp;files?</h3><figure name="cc57"> </figure><figure name="cc57"><figcaption>This starter application leverages a CSS-in-JS technology called <a data-href="https://emotion.sh/docs/introduction" href="https://emotion.sh/docs/introduction" rel="noopener" target="_blank">Emotion</a>, which removes the requirement of serving static CSS. &nbsp;In SSR this is beneficial since it&#39;s deterministic nature allows more predictable style hydration and preloading.</figcaption></figure> <h4 name="b2a9">Creating an styled component or usable CSS&nbsp;class</h4> Emotion provides two* main ways of generating reusable styles for components.One is via <code>@motion/styled</code>, which enables you to generate elements with bound <code>className</code> attributes.<pre>import React from &#39;react&#39;;
import styled from &#39;@emotion/styled&#39;;

// direct format
const yourCoolStyledComponent = styled.div`
 color: red;
`;

// component wrapping format
const SomeActualComponent = ({ className }) =&gt;
 <div>
</div>;

const yourCoolAlternateStyledComponent = styled(SomeActualComponent)`
 color: blue;
`;</pre>The second form is via the <code>{ css }</code> helper from <code>@emotion/core</code>. It allows you to generate deterministic (and reusable) class names;<pre>import React from &#39;react&#39;;
import { css } from &#39;@emotion/core&#39;;

const customCssClassName = css`
 color: green;
`;

const CoolDiv = () =&gt; (
 <div>
</div>
);</pre><blockquote name="2c5d">There are more advanced examples of what you can do from the emotion documentation <a data-href="https://emotion.sh/docs/introduction" href="https://emotion.sh/docs/introduction" rel="noopener" target="_blank">here</a>.</blockquote><h3 name="a121">Managing content</h3>In order for this starter application to work, a few assertions must be made.<ol><li name="d953">You should already have <code>Pages</code> and <code>Blog Posts</code> Objects configured for your bucket</li><li name="9177">Each Object needs to have localisation enabled</li><li name="dc37">Each <code>Page</code> and <code>Blog Post</code> should have the same <code>locales</code> available and should have each locale variant present.</li></ol>So your environment should look something like this:<figure name="eadf"><img data-image-id="1*aqmXXAEcZl82cJYgXuTNGw.png" data-width="1164" data-height="590" src="https://cdn-images-1.medium.com/max/800/1*aqmXXAEcZl82cJYgXuTNGw.png" class="fr-fic fr-dii"></figure><figure name="67f9"><img data-image-id="1*ZqYjt5DvddGf13JFteZMwA.png" data-width="1215" data-height="874" src="https://cdn-images-1.medium.com/max/800/1*ZqYjt5DvddGf13JFteZMwA.png" class="fr-fic fr-dii"></figure><h4 name="92be">Enabling localization for Cosmic Object Types</h4>On left left hand sidebar under <code>Dashboard</code> after creating each respective Object Type you should have <code>Blog Posts</code> and <code>Pages</code> as small folder icons visible under the dashboard. From that same interface, you should also see a small <code>cog</code> near the top of the listing. Clicking that will bring up an interface to enable localization.Toggle <code>Localisation</code> to <code>On</code> and then, add the locales you&#39;d like to support for your application. The Select Locales button can be used to select the correct locales for the application. These should be same same for both content types.<figure name="b27b"><img data-image-id="1*15gfMJyonYi76jTLLhdP3Q.png" data-width="1168" data-height="869" src="https://cdn-images-1.medium.com/max/800/1*15gfMJyonYi76jTLLhdP3Q.png" class="fr-fic fr-dii"></figure><h3 name="440b">Conclusion</h3><figure name="aaec"><figcaption>Cosmic is an incredibly powerful means of allowing your content to be made available to various locations across the web, and it&rsquo;s localization toolset lets to leverage this in a way where many people can benefit and appreciate your business or personal content, regardless of international barriers. Looking forward to see where the community will be able to take Cosmic to in the future.</figcaption> If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</figure></section>

Create a Localized Website using Gatsby and Cosmic

This tutorial will show you how to build an e-commerce app using Gatsby and Cosmic. This app will give you a basic idea of how we can integrate an e-commerce app with Cosmic to store our data. In this app example, all order data
will be stored in the Cosmic database and its speed will charm you. Let&#39;s get started. TL;DR<a href="https://cosmicjs.com/apps/gatsby-ecommerce-website" rel="noopener noreferrer" target="_blank">Check out the demo</a><a href="https://github.com/a9kitkumar/Gatsby-Ecommerce" rel="noopener noreferrer" target="_blank">Download the codebase</a> Introduction to the AppHere we are building an e-commerce app in Gatsby with the backend power of Cosmic. We will make some navigation based on an e-commerce website and at the end placed order will be saved on the Cosmic database. Cosmic provides npm module for JavaScript
technologies. Also, it provides API endpoints with the help of which you can directly apply CRUD operations on it. Here we are using API endpoints to store our data.&nbsp; Requirements<ul><li dir="ltr"><a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node.js</a> must be installed on your system, it is required to run npm commands. Choose its latest version and install it on your system.</li><li dir="ltr">After node.js, install Gatsby CLI on your system globally. You can find it here: <a href="https://www.gatsbyjs.org/docs/gatsby-cli/" rel="noopener noreferrer" target="_blank">Gatsby CLI</a></li></ul> Let&rsquo;s Get StartedWe assumed that you have installed the above software and CLI. Now run the following command to create a new Gatsby app:<code>gatsby new Gatsby-Ecommerce</code>After executing this command successfully, it is ensured that you have created a new Gatsby app with the name &quot;Gatsby-Ecommerce&quot;. Now to start this, execute the following command from the terminal:<code>npm start</code>It will run your app and opens the port: <a href="http://localhost:8000/"></a><a href="http://localhost:8000/" rel="noopener noreferrer" target="_blank">http://localhost:8000/</a> Configuration with Cosmic Cosmic is two in one service provider that means it gives the facility of database and server as well. So you need to signup for <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">Cosmic</a> first and create a new bucket with any name you want, here we created the bucket with the name Gatsby Ecommerce. Now it is time to create an object type, which means to the data management. Create object type named orders, All orders
will be stored in this object. Now we have to do some basic setting, for this goto basic setting in your dashboard. Have a look at the below screenshot:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67fc1480-6ab1-11e9-8e11-73687f4b8132-basic-setting.png" class="fr-fic fr-dib">Here you can see the read/write keys fields and other IDs. Click on generate read and write keys and save on any text file along with bucket ID and slug.&nbsp;Now open your Gatsby project in any IDE, here I&#39;m using Visual Basic Code. Now create a folder named config in root od the project and create a new file with name config.js inside the config folder and save the above IDs and keys in the following
format:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/99728fa346ac253c669035b39634ecc0.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/99728fa346ac253c669035b39634ecc0.js" class="embedly-card"></a></div>It is important for you to manage your project properly, so have a look at the screenshot of the folder structure of the project:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4919a090-6ab2-11e9-82e0-8508380770be-folder-structure.png" class="fr-fic fr-dib"> Inbuilt BucketYou can also use an inbuilt bucket. For this, you have to import that inbuilt bucket in your Cosmic account. Here we are providing our bucket for you. You just need to follow these steps:<ol><li>Go to our <a href="https://github.com/a9kitkumar/Gatsby-Ecommerce">Git repo</a> and download the bucket.json file</li><li>Now go to your Cosmic dashboard and click on basic settings</li><li>Click on Import/Export and click on Add import file, and import the bucket.json file</li></ol><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f8070290-6ab3-11e9-8e11-73687f4b8132-import-export-file.png" class="fr-fic fr-dib"> Now everything is ready, we can move to implement our app now Home PageNow we are going to build our app, and the main page is the home page. On this page, we will show the items for shopping. We will add a few items as this app will only show you the compatibility of Gatsby e-commerce app with Cosmic. Location of the home component is <code>src/components/home.js</code>Check the code of the home component, then we will explain it.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/1f302a12c9904d6b7175f79c87996aba.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/1f302a12c9904d6b7175f79c87996aba.js" class="embedly-card"></a></div>This component is stateful, not a stateless component as most of the Gatsby components usually are.&nbsp;In this component, we have shown three products which all are iPhones. Main this is that images of these iPhones are kept in a folder and called through a different component. At line number 91, 94, and 97 you can check how these are imported to home.&nbsp;Here we used the bootstrap modal to show the specifications of the products. Let us explain the working of the main methods.addToCart(): This is an event-driven method and pushes the product to an array when the user clicks on the add to cart.&nbsp;handleiPhone8Close() and handleiPhone8Show(): These are the handlers for bootstrap modals which are used to show the specifications of products.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8d0f69d0-6b64-11e9-8c29-39fe44eff7e3-home-page.png" class="fr-fic fr-dib"> iPhones ComponentThe iPhone folder has three components named iphone8.js, iphonex.js, and iphonexs.js. These components only used to add images to other components. We used these components in home page. Actually, these components use <code>&nbsp;&nbsp;</code>for this purpose which makes the images loading very fast on websites. Check the code of one image component: <code>components/iPhones/iphone8.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/1881ce52c260367bac09db5ed34e294e.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/1881ce52c260367bac09db5ed34e294e.js" class="embedly-card"></a></div> Cart ComponentWhen the user added products to the cart and click the Show Cart button, then flow of the app goes to another page cart.js. Let&#39;s check the code of this page: <code>src/pages/cart.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/5f58f117f8d56b0ba7110e652ef0ff2c.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/5f58f117f8d56b0ba7110e652ef0ff2c.js" class="embedly-card"></a></div>Let us explain each method of cart.js:getProducts(): In this method, we are getting the products which are stored in the cart. For cart, we temporary stores the products in local storage. That means this method is getting the products from local storage.&nbsp;checkingCart(): This method is checking that which product is added to the cart that means this method is filtering the products and calculating the price.&nbsp;onSubmit(): This is an event-driven method, which collecting the details of the order along with user billing details and passing to the method placeOrder() in the cosmicService.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f8654cf0-6b68-11e9-8c29-39fe44eff7e3-place-order.png" class="fr-fic fr-dib"> Cosmic ServiceThis is the only service in this app which hits the Cosmic API and stores the data to Cosmic database. Check the code: <code>src/services/cosmicService.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/7f799b0ebaddb5bbf39f9c0ab9c7f1c6.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/7f799b0ebaddb5bbf39f9c0ab9c7f1c6.js" class="embedly-card"></a></div>There is only one method in this service named placeOrder() which accepts the seven arguments. It hits the post request to the Cosmic server to save the data. Here we are providing write access key for taking the permission of writing on the Cosmic database. This is an example of storing information in Cosmic; however, it&#39;s never advised to store credit card data in Cosmic.&nbsp; What Functionality We Have Implemented?Till now we have implemented the complete functionality on the development server. That means we can use the complete functionality of the app in development mode. Because it is a Gatsby app created with npm CLI, so it is deployable on any server which allows deployment from node.js app. Here we deployed our app on Heroku server.We created this app with Gatsby CLI and used React.js also to make some components stateful. After using this app, you will understand the power of Cosmic because of its blazing speed.&nbsp; Conclusion With the help of Cosmic we can create powerful apps and can use the Cosmic database for fast data processing. Here we created and configured a Gatsby.js app with Cosmic without any difficulty. You don&#39;t need to install any extra efforts to configure and use Cosmic APIs. For any query or comment related to building apps in Cosmic, reach out to us on <a href="https://twitter.com/cosmic_js">Twitter</a> and join the conversation on <a href="https://cosmicjs.com/community">Slack</a>.

How to build an Ecommerce Website using Gatsby and Cosmic

Documentation?... Documentation. &nbsp;Let&rsquo;s say for a second that you want to create a way to easily publish and read docs, err&hellip; documentation. &nbsp;By the end of this read you will be able to do just that, all with the power of Gatsby
(a static site generator) and Cosmic (an easy to setup and use Content Management System). &nbsp;Grab some coffee, find a comfy chair and let&rsquo;s build something cool.TL:DR<a href="https://cosmicjs.com/apps/gatsby-docs" rel="noopener noreferrer" target="_blank">Gatsby Documentation App Demo</a>&nbsp; <a href="https://github.com/cosmicjs/gatsby-docs-app" rel="noopener noreferrer" target="_blank">Check out the codebase</a>&nbsp; 1.0 - IntroductionWhat is <a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a>?Gatsby is an easy to use framework for generating static web site files. &nbsp;It comes bundled with all sorts of hotness, like React JS for building web components, and GraphQL for handling our component state without the need to configure something Redux
to handle external data. What about <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>?Cosmic will handle our publishing and data storage. &nbsp;It&rsquo;s easy to set up and easy to implement for apps like this, yet scalable enough to handle more complex projects across larger teams. &nbsp;We will use this to create and store our documentation
content. &nbsp;This will us allowing us to focus on how our users interact with our app, and let Cosmic do all the heavy lifting. Is that all?Well no&hellip; we are going to convert our docs from markdown to html, &nbsp;since that&rsquo;s what web Browsers like. &nbsp;To do this we are going to use a package called <a href="https://play.pokemonshowdown.com/" rel="noopener noreferrer" target="_blank">Showdown</a>, that can handle parsing
and converting markdown to and from HTML. Any Requirements?Oh yeah, you will need to have access to a terminal, a Cosmic account with a<a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">bucket and a documentation object</a>, and a recent(ish) version of <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node JS</a> installed on your machine in order to install the necessary software to make this app work. &nbsp;I&rsquo;m going to be using yarn to run my build scripts but you can npm if you like. &nbsp;Just remember to choose one(npm or yarn) and stick with it as things can get little hairy when it&rsquo;s time to deploy.Let&rsquo;s Build!! 1.1 - Setting up our Development EnvironmentTo get started we will want to install Gatsby and install our dependencies. &nbsp;Easy peasy. Gatsby uses a handy command line interface (CLI) to build our initial project files. &nbsp;First we will want to install the CLI by installing it globally with npm:<code>$ npm install -g gatsby-cli</code> This gives us access to the `gatsby` command and allows us to initialize our project. &nbsp;Run the following script to create a new directory filled with a project template:<code>$ gatsby new gatsby-docs</code> Wait a second to allow the script to complete and you will notice a new directory created called `gatsby-docs`. &nbsp; Let&rsquo;s see what&rsquo;s inside by changing directories:<code>$ cd gatsby-docs</code> you should see a directory structure similar to this:<pre><code>.
├── node_modules
├── src
├── .gitignore
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md</code></pre> Much of this will look familiar if are used to creating Node applications but some of this will be a little new. You should be able to get a development server up and running by executing the start script:<code>$ yarn start</code> After a second you should see a success prompt letting you know that everything has compiled properly and your app is live. Now you can open up your browser pointing to `localhost:8000` and see the compiled output. &nbsp;It should look something very similar to this: <img src="https://cdn-images-1.medium.com/max/1600/1*1B3nvdm2tPsiwQbtyGKseg.png" style="width: 777px;" class="fr-fic fr-dib">Congrats! You have set up a working Gatsby site. But before we dig into what is going on under the covers let&rsquo;s install the rest of our dependencies that will power our app:<code>$ yarn add cosmicjs showdown highlight.js dotenv node-sass gatsby-plugin-sass gatsby-source-graphql</code>Whoa... That&rsquo;s a lot of newly installed packages, but each of these are super useful I swear.<ul><li dir="ltr"><code>cosmicjs</code> will be used to add new content to our app.</li><li dir="ltr"><code>showdown</code> is the text parser I mentioned that will handle markdown and html conversion.</li><li dir="ltr"><code>highlight.js</code> is going to handle our syntax highlighting inside of our converted markdown text.</li><li dir="ltr"><code>dotenv</code> is an environment variable package that will make sure our sensitive tokens and/or runtime environment is configured from a `.env` file</li><li dir="ltr"><code>node-sass</code> and the <code>gatsby-plugin-sass</code> packages will allow to use <code>.scss</code> files to style our components.</li><li dir="ltr"><code>gatsby-source-graphql</code> will allow us to leverage GraphQL queries on external data (ie - use the Cosmic GraphQL api)</li></ul> With all of that business out of the way we can look at our directory and configure our Gatsby source code to run properly. 2.0 - Configuring GatsbyNow we can dig into our directory and make sure Gatsby is configured properly for using the technologies that will scalably and sensibly power our app. The first file we will want to look into is <code>gatsby-config.js</code>. &nbsp;This file is used to configure high level plugins that allow any source code we write to be bundled properly when our static files are built. &nbsp;It also contains a little
bit of metadata that describes our site site to users and can be queried in our React Components. Here we will add our newly installed plugins to the default configuration you see before you. &nbsp;First we just need to add <code>gatsby-plugin-sass</code> to the plugins list, allowing us to import sass files and leverage sass to write sensible styling specs for each component. Next up we will add an object to end of our plugins list for <code>gatsby-source-graphql</code>&nbsp; that will configure our external GraphQL API endpoint to allow us to fetch data from Cosmic. &nbsp;Here&rsquo;s how things should look:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/398ea713ec6fc0d23939220d98c0677d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/398ea713ec6fc0d23939220d98c0677d.js" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div> Now we are set to make GraphQL queries to the Cosmic GraphQL API! &nbsp;Next, Let&rsquo;s talk for a second about Gatsby and how things are going to break down. 2.1 Building our app with GatsbyI&rsquo;ve mentioned that Gatsby is a static site generator, but what does that mean? &nbsp;Gatsby takes all the fancy code we create and produces static files that are pre-configured using the config files we specify. &nbsp;By doing so we get increased
performance for sites that may have lots of images, data to be fetched, and other assets that can slow down web applications. Let&rsquo;s now get some source code created. &nbsp;Our site is going to use just two &lsquo;Pages&rsquo;, one that will serve a home page to list the documentation we&#39;ve created, and one for viewing a piece of documentation. &nbsp;But to fetch the content that we are going to display, we are going to use GraphQL, which we have recently configured. &nbsp;We will need to add some variables to our <code>gatsby-node.js</code> file in order to allow our static files to have the necessary parameters to make API calls. Create a .env file and add your Cosmic environment variablesIn your Cosmic Bucket &gt; Basic Settings menu you will see fields for a bucket-slug and read and write keys down at the bottom. &nbsp;Copy all three of these things and add them to a .env file.At your project root, type into your terminal:<code>$ touch .env</code> Now Create three lines:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0ff388ede9da09a338f0e46ff742cb20.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0ff388ede9da09a338f0e46ff742cb20.js" class="embedly-card"></a></div> We will use these with our dotenv package to allow our src files to access these variables when necessary. Open up <code>gatsby-node.js</code> and add config variables to pagesWe are now going to use Gatsby&rsquo;s built in node API to give each page in our site access to the environment variable we just created. &nbsp;First we will import the variables from our <code>.env</code> file using dotenv, then we will explicitly set each variable in our page&rsquo;s context. Your file should look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/e28314ce02035eb4f359c97a0d121d6a.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/e28314ce02035eb4f359c97a0d121d6a.js" class="embedly-card"></a></div> Creating our first pageNow we are going to create our first page that will grab all of the documentation objects and display them at the root of our site, &nbsp;on <code>index.js</code>. &nbsp;First let&rsquo;s create our list by creating a folder in the components directory titled docs - <code>/src/components/docs/</code> and in that folder we will create a file titled <code>index.js</code>.This will be our module that is first displayed when we render our page after fetching our docs. &nbsp;Here is the source code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/ad5e6c1d92a70d42cfe3817d1edc916a.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/ad5e6c1d92a70d42cfe3817d1edc916a.js" class="embedly-card"></a></div> What&#39;s going on here:This page basically runs a big loop over our <code>docs</code>&nbsp; and returns some fancy jsx. &nbsp;We map through the docs array and produce a Link from Gatsby that contains the title, a date, and some content that uses a a description for the piece of
documentation that was published.Feel free to add any <code>.scss</code> files to this directory as well to get a styling that works for you for the given class names. Update the &#39;home&#39; page with our new componentsNow we can open up our home page file at <code>/pages/index.js</code> and import the components we just created and add them to our returned jsx.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/258f38acc6d089ad6ee639dfae3fa87d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/258f38acc6d089ad6ee639dfae3fa87d.js" class="embedly-card"></a></div>Now any <code>docs</code> created on Cosmic, will appear here on the home page!Notice the exported query at the bottom of the file. &nbsp;It contains two string type variable that will be present because we set the context object in our gatsby-node configuration.With our newly created home page working, let&rsquo;s create our doc view that will display content from the documentation that we post. Creating our doc display pageInstead of adding a new file to the pages directory in Gatsby, we are going to create a `templates` directory and make a template page that we can configure on build, so that each time a doc is created, a new page can be created when we fetch our Docs
from Cosmic.Start by creating a `templates` directory at your project root, and then creating a <code>docPage.js</code> file within.&nbsp;<pre><code>.
├── _templates
|   ├── docPage.js</code></pre>&nbsp;Now add the page template complete with exported query that will fetch a singular doc from Cosmic.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/c1b8fb47ec96989eb370ed1a92af180d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/c1b8fb47ec96989eb370ed1a92af180d.js" class="embedly-card"></a></div> Nothing will happen with this template until we tell Gatsby that it needs to create a page using this template. We do this so that Gatsby has a chance to fetch our Documentation from Cosmic before it builds the page using the necessary parameters for each GraphQL query at the bottom of <code>docPage.js</code>. &nbsp;We are using static site files after all. Update Gatsby Node to build template pagesLet&rsquo;s go ahead and add an export function to <code>gatsby-node.js</code> so that we are building docPage template from our GraphQL data:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/692d2e93d3892ca2f1cd827d2a966a94.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/692d2e93d3892ca2f1cd827d2a966a94.js" class="embedly-card"></a></div> Now when Gatsby creates its pages, ie - the index page will fetch our docs and create a page for each doc that is retrieved and attach all the necessary params to the page Content of each page. &nbsp;This way our template component is rendered and our
GraphQL query should succeed! 3.0 DeploymentLastly we can talk about deployment and about how static sites work. &nbsp;Deploying this bad boy can be a little tricky since this site uses a static build that won&rsquo;t have the necessary pages of newly created docs until the deployment service has
a chance to rebuild. My recommendation is to use <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">netlify</a> and link your source from GitHub or wherever you store your code. &nbsp;From there you can trigger buildhooks in order to rebuild your site whenever certain events happen. &nbsp;Cosmic will allow a post request to be fired off at an endpoint when objects are created, deleted, edited, etc. &nbsp;So you can easily link the two together to make some magic happen. &nbsp;You can also modify the addDoc method on the createDoc component class to make a POST request to the buildhook whenever you successfully add a doc. Anyway, that&rsquo;s all for me folks! Happy hacking.

How to Build a Documentation App With Gatsby and Cosmic

Thanks to those who attended the live Twitch stream of <a href="https://twitter.com/jlengstorf" rel="noopener noreferrer" target="_blank">Jason Lengstorf</a> and <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> building a Cosmic-powered Gatsby application. In the stream, Tony and Jason pair program a basic Gatsby application from scratch. In case you missed it, the video and resources are available below.&nbsp; <h3>The Main Points Discussed Are:</h3>✅ Creating a Cosmic website ✅ Adding content ✅ Displaying content on a Gatsby website ✅ Building dynamic header and footers <h3>Video: Build a Cosmic-powered blog using Gatsby</h3><iframe src="https://www.youtube.com/embed/mGcAWs1xRnY?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 360px;"></iframe> <h3>Resources to build apps with Cosmic and Gatsby:</h3><a href="https://github.com/cosmicjs/gatsby-source-cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic Gatsby Source Plugin</a> <a href="https://github.com/cosmicjs/gatsby-starter" rel="noopener noreferrer" target="_blank">Cosmic Gatsby Starter</a> <a href="https://github.com/cosmicjs/gatsby-localization-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter</a> <a href="https://cosmicjs.com/articles/webinar-video-localization-with-gatsby-and-cosmic-js-jnyqtjoa" rel="noopener noreferrer" target="_blank">Webinar Video: Localization with Cosmic and Gatsby</a><h3> </h3><h3>Conclusion</h3>If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.

Video: Build a Cosmic-powered blog using Gatsby

Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we teamed up with <a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a> developer advocate <a href="https://twitter.com/jlengstorf" rel="noopener noreferrer" target="_blank">Jason Lengstorf</a> to discuss how to make localization for websites less spooky using Gatsby and Cosmic.The main points discussed are: ✅&nbsp;How to create localized content models in Cosmic ✅&nbsp;How to install the Cosmic <a href="https://github.com/cosmicjs/gatsby-localization-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter</a> ✅&nbsp;How Gatsby builds your localized website for performance and SEO <a href="https://github.com/cosmicjs/gatsby-starter-localization" rel="noreferrer nofollow noopener" target="_blank"></a><iframe width="640" height="360" src="//www.youtube.com/embed/16m3wRFPGAY?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>Also we had a curveball thrown at us about localizing the language selectors. &nbsp;This has now been added to the <a href="https://github.com/cosmicjs/gatsby-localization-starter/blob/master/gatsby-config.js" rel="noopener noreferrer" target="_blank">gatsby-config.js</a> in the Gatsby Localization Starter by adding a <code>localized_name</code> property with different values for each locale:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d" class="embedly-card"></a></div>

Webinar Video: Localization with Gatsby and Cosmic 🌏

<a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a> is the new hotness for static sites, and <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> is an amazing service that helps you deploy static sites with some brilliant automation capabilities. &nbsp;Combine these with the new <a href="https://github.com/cosmicjs/gatsby-source-cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic source plugin for Gatsby</a> and you have a technology stack that scales well and is highly performant.In this tutorial, I&#39;ll show you how to deploy your Gatsby Blog to Netlify and trigger automatic builds on content edits using Cosmic Webhooks.<h3> Install the App</h3>Check out the <a href="https://cosmicjs.com/apps/gatsby-blog" rel="noopener noreferrer" target="_blank">Gatsby Blog available on Cosmic</a>. &nbsp;Install the app: 1. Create a <a href="https://app.cosmicjs.com/add-bucket">new Bucket</a> 2. Choose the option to start with an App 3. Install the Gatsby Blog<img src="https://cdn.cosmicjs.com/47de6bd0-37a2-11ea-bfe8-5b62c3bdf959-Screen-Shot-2020-01-15-at-8.20.55-AM.png" style="width: 100%;" class="fr-fic fr-dib"><h3> </h3><h3>Deploy to Netlify</h3>After you install the Gatsby Blog app, install the <a href="https://www.cosmicjs.com/extensions/deploy-to-web">Deploy to Web Extension</a>.<img src="https://cdn.cosmicjs.com/f8f073d0-37a9-11ea-bfe8-5b62c3bdf959-Screen-Shot-2020-01-15-at-9.15.49-AM.png" style="width: 100%;" class="fr-fic fr-dib">Find the Netlify option and add the Gatsby Blog GitHub URL: <a href="https://github.com/cosmicjs/gatsby-blog-cosmicjs">https://github.com/cosmicjs/gatsby-blog-cosmicjs</a> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/083d09f0-69c2-11e8-93d9-07e88fbd23be-Screen Shot 2018-06-06 at 2.39.20 PM.png" style="width: 100%;" class="fr-fic fr-dib"><h3>Set Environment Variables</h3>In Netlify, go to Your Netlify Site &gt; Settings &gt; Build and Deploy &gt; Build environment variables. &nbsp;Set a COSMIC_BUCKET environment variable to your Cosmic Bucket slug. &nbsp;Add your COSMIC_READ_KEY &nbsp;(Optional) if you&#39;ve set this in Your Cosmic Bucket &gt; Settings.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f7f91160-69c1-11e8-bb4b-bb841c6f890e-Screen Shot 2018-06-06 at 2.42.20 PM.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Do It Live!</h3>Your site should now be live and look like this:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/be934ba0-69c8-11e8-a7c7-51f210bd26e5-Screen Shot 2018-06-06 at 3.31.49 PM.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Set Up Hooks</h3>Now let&#39;s make sure to tell Netlify to rebuild our site whenever content is edited in Cosmic. &nbsp;To do this, first go into Netlify&#39;s deploy settings area located in Your Netlify Site &gt; Settings &gt; Build and Deploy &gt; Build Hooks and add a Build Hook:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/39af68a0-69c9-11e8-a629-b9b01087edc9-Screen Shot 2018-06-06 at 3.34.49 PM.png" style="width: 100%;" class="fr-fic fr-dib">Save, then copy and paste the generated build hook URL into your Cosmic Bucket &gt; Webhooks<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53f1f930-69c9-11e8-bb4b-bb841c6f890e-Screen Shot 2018-06-06 at 3.35.13 PM.png" style="width: 100%;" class="fr-fic fr-dib"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/856f3180-69c9-11e8-aa5e-899f1914d7b2-Screen Shot 2018-06-06 at 3.37.45 PM.png" style="width: 100%;" class="fr-fic fr-dib">This will trigger a rebuild whenever content is created, edited or deleted in Cosmic.<h3> </h3><h3>Now Edit Content!</h3>Now you&#39;ll notice whenever you add / edit / remove content in your Cosmic Bucket, a magic message is sent to Netlify to tell it to rebuild your awesome Gatsby site!<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53daf1f0-69cd-11e8-a7c7-51f210bd26e5-Screen Shot 2018-06-06 at 4.03.58 PM.png" style="width: 100%;" class="fr-fic fr-dib"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5e1ef760-69cd-11e8-a629-b9b01087edc9-Screen Shot 2018-06-06 at 4.04.50 PM.png" style="width: 100%;" class="fr-fic fr-dib"><h3>In Conclusion</h3>With Gatsby, Netlify and Cosmic, building fast, scalable and highly performant websites has never been easier. With webhooks and Netlify&#39;s built-in continuous deployment, you can enjoy an amazing automated developer experience.Let me know if you have any questions! &nbsp;<a href="https://twitter.com/tonyspiro" rel="noopener noreferrer" target="_blank">Reach out to me on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">message me on Slack</a>.

Netlify + Gatsby + Cosmic + Automatic builds with Webhooks

In this tutorial, I&#39;m going to show you how to create a simple but blazing fast blog using React, <a href="https://gatsbyjs.org" rel="noopener noreferrer" target="_blank">Gatsby JS</a>, and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. Let&rsquo;s get started.<h2>TL;DR</h2><a href="https://github.com/cosmicjs/gatsby-blog-cosmicjs" rel="noopener noreferrer" target="_blank">Download the GitHub repo.</a> <a href="https://gatsby-blog-cosmicjs.netlify.com/" rel="noopener noreferrer" target="_blank">Check out the demo.</a><h2>Prerequisites</h2>You will be required to install Node JS, npm, and Gastby CLI before starting. Make sure you already have them installed.<h2>What is Gatsby?</h2><a href="https://gatsbyjs.org" rel="noopener noreferrer" target="_blank">Gatsby</a> is a blazing-fast website framework for React. It allows developers to build React based websites within minutes. Whether you want to develop a blog or a business website, Gatsby will be a good option.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b372be00-68b9-11e8-931a-bbaa2f5b97ea-34450329-a494355a-ed06-11e7-9d0a-30aefeb2fd57.jpg" style="width: 300px;" class="fr-fic fr-dib">Because it is based on React, the website pages are never reloaded and also it will generate static pages which make the generated website super fast. &nbsp;<h2>Blog Development</h2>We have to set up the environment in order to start working on the blog.<h3>Install Gatsby</h3>First, install Gatsby CLI:<pre><code>npm install --global gatsby-cli</code></pre><h3>Scaffold a Gatsby Template</h3><pre><code> gatsby new gatsby-blog-cosmicjs</code></pre>Enter in your project&#39;s folder:<pre><code>cd <code>gatsby-blog-cosmicjs</code></code></pre>Start the server:<pre><code>gatsby develop</code></pre>At this point, you should already be able to get access to your Gatsby JS blog website at this address: <a href="http://localhost:8000" rel="noopener noreferrer" target="_blank">http://localhost:8000</a>.<h3>Install the Cosmic Source Plugin</h3>In Static Blog, your data can be consumed from different sources: Markdown files, HTML files, External API (WordPress, Cosmic, etc).Therefore, Gatsby implemented independent layer: the data layer. Which is powered by GraphQL. Very exciting stuff!To connect this Data Layer with different Data Providers, you need to integrate Source Plugin. Fortunately, there are many Source Plugins available to fulfil most of the needs.In our case, we are using <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. Obviously, we need to integrate Source Plugin for Cosmic. Good news: Cosmic has implemented their <a href="https://www.gatsbyjs.org/packages/gatsby-source-cosmicjs/" rel="noopener noreferrer" target="_blank">Source Plugin</a>!Let&#39;s install:<pre><code>npm install --save gatsby-source-cosmicjs</code></pre>We need to install some other plugins also. Let&#39;s do that also<pre><code>npm install --save gatsby-plugin-offline gatsby-source-filesystem</code></pre>These plugins need some configurations. So, replace the content of <code>gatsby-config.js</code>with:Path: <code>gatsby-config.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/de6450ac76bd813f6e883a7ec24bc511' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/de6450ac76bd813f6e883a7ec24bc511" class="embedly-card"></a></div>Then, restart the server to let Gatsby consider these updates.<h3>Posts List &amp; Settings</h3>First, we want to display the list of posts on the homepage. To do so, add the following content to the existing homepage file:Path: <code>src/pages/index.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/1a188fa022afe601d60831c1cc1b8872' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/1a188fa022afe601d60831c1cc1b8872" class="embedly-card"></a></div><h4>Explanation:</h4>At the end of <code>index.js</code>file, we exported pageQuery. These are GraphQl queries which are used to fetch important information about settings and list of posts.Then, we pass the <code>{ data }</code> destructed object as parameter of <code>IndexPage</code> and loop on its <code>allCosmicjsPosts</code> &amp; <code>cosmicjsSettings</code> object to display the data. <a href="https://gatsby-blog-cosmicjs.netlify.com" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/0477cdd0-68c0-11e8-b9b3-bb83b1de12e3-Screenshot-5.png" style="width: 656px;" class="fr-fic fr-dib fr-shadow"></a> <h3>Single Post Layout</h3>Till now we have integrated Cosmic source plugin with Gatsby and it&#39;s look like a Blog. Now we will work on blog post&#39;s details page.Let&#39;s create the template:Path: <code>src/templates/blog-post.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/753f9fc0a58c220b55843032ca87648e' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/753f9fc0a58c220b55843032ca87648e" class="embedly-card"></a></div>That looks fine, but at this point, Gatsby does not know when this template should be displayed. Each post needs a specific URL. So, we are going to inform Gatsby about the new URLs we need thanks to the <code>createPage</code> function.Path: <code>gatsby-node.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/26e6a4eb34aca0d7e24389ba89b562e0' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/26e6a4eb34aca0d7e24389ba89b562e0" class="embedly-card"></a></div>Restart the Gatsby server.From now on, you should be able to visit the detail page by clicking on URLs displayed on the homepage. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a6dd54e0-68c1-11e8-937a-d53747834e1d-Screenshot-1.png" style="width: 658px;" class="fr-fic fr-dib fr-shadow"> <h3>Extra Stuff!</h3>In addition to this, We also implemented <code>src/components/Bio.js</code> to display Author information &amp; <code>src/layouts/index.js</code> to create a generic layout for the blog.&nbsp;The <a href="https://github.com/cosmicjs/gatsby-blog-cosmicjs" rel="noopener noreferrer" target="_blank">source code is available on GitHub</a>. To see it live, clone the repository, and run (<code>cd gatsby-blog-cosmicjs &amp;&amp; npm i &amp;&amp; npm run develop</code>).Finally, restart the server and visit the website. It will look awesome!The static website generated by Gatsby can <a href="https://www.gatsbyjs.org/docs/deploy-gatsby/" target="_blank">easily be published on storage providers</a>: Netlify, S3/Cloudfront, GitHub pages, GitLab pages, Heroku, etc.Note: Our <a href="https://gatsby-blog-cosmicjs.netlify.com/" rel="noopener noreferrer" target="_blank">demo</a> is deployed on Netlify. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d6276410-68c2-11e8-9105-b16ce5fe6091-Screenshot-4.png" style="width: 655px;" class="fr-fic fr-dib fr-shadow"> <h3>Conclusion&nbsp;</h3>Congrats! You&rsquo;ve successfully built a super fast and easy-to-maintain blog! Feel free to continue this project to discover both Gatsby and Cosmic advantages.&nbsp;

Cosmic blogs on Gatsby

Start building today

Cosmic blogs on Gatsby

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today