Add a headless CMS to Astro in 3 easy steps

<p>In this tutorial, I&#39;m going to show you how to create a simple Blog application using <a href="https://astro.build/">Astro</a>, and <a href="https://cosmicjs.com/">Cosmic CMS</a>. Without further ado, grab some coffee &amp; let&#39;s build a cool app!</p><h1 id="tldr">TL;DR</h1><ul><li><p><a href="https://astro-cosmic-blog.netlify.app/">Astro Cosmic Blog Demo</a></p></li><li><p><a href="https://github.com/sumitkharche/astro-cosmic-app">Download Source Code</a></p></li><li><p>&nbsp;<a data-remove-tab-index="true" data-sk="tooltip_parent" data-stringify-link="https://www.cosmicjs.com/apps/astro-cosmic-blog" href="https://www.cosmicjs.com/apps/astro-cosmic-blog" rel="noopener noreferrer" tabindex="-1" target="_blank">Install the Astro Cosmic Blog</a></p></li></ul><h1 id="prerequisites">Prerequisites</h1><p>You need to have installed the latest stable version of <a href="https://nodejs.org/">Node JS</a> and NPM. You will have no problem following the tutorial if you have a basic understanding of:</p><ul><li>HTML, CSS, and JavaScript</li><li>import and export syntax (ES6 modules)</li><li>concepts like components</li><li>the fetch API</li></ul><p>Let&#39;s get started with our technology stack.</p><h1 id="whatisastrohttpsastrobuild">What is <a href="https://astro.build/">Astro</a>?</h1><p>Astro is nothing but a yet another new Static Site Generator (SSG) which means it produces a static pages as in output. Its a new framework for building a websites. Astro give you us flexibility to use any JavaScript framework/library. The big advantage of using astro is it ships 0% Javascript by default and it will load on demand it we need it.</p><blockquote><p>Note: Astro is still an early beta state.</p></blockquote><h1 id="whataboutcosmichttpscosmicjscom">What about <a href="https://cosmicjs.com/">Cosmic</a>?</h1><p>Cosmic is a headless CMS that will enable us to build our application surprisingly quickly and deploy it to Netlifly in moments. Unlike traditional CMS, Cosmic offers us as the developers a lot of flexibility to develop this application how we please and take it to whatever hosting platform we wish. It is also very easy to store and retrieve data, which makes it perfect for building apps like this.</p><h2 id="creatingyourblogbucketincosmic">Creating Your Blog Bucket in Cosmic</h2><p>To create a blog app we will require data. To manage and manipulate this data, we will be using the power of Cosmic buckets and objects. To get started:</p><ol><li><p>Create a <a href="https://app.cosmicjs.com/signup">free account on Cosmic</a>. If this is your first time using Cosmic, you&#39;ll see a short tutorial which will introduce some of the data types we&#39;ll be using - buckets, objects, and metafields.</p></li><li><p>Create a new empty bucket &amp; name it coffee-blog. For each blog post, we will have three object types:</p></li></ol><ul><li><p>Title</p></li><li><p>Content</p></li><li><p>Image</p></li></ul><p>So, go ahead and add these properties in your buckets along with some data for those objects. <a href="https://www.cosmicjs.com/getting-started">If you&#39;re having trouble with Buckets, Objects, or Metafields, go ahead and read the Getting Started page really quickly for some startup instructions</a>, then come on back to this article.</p><p>Now we have created our Cosmic CMS and its get time to create a Astro project and integrate Cosmic CMS into it.</p><h1 id="createaastroapplication">Create a Astro application</h1><p>To create Astro project, we have to first create a folder and navigate to it.</p><pre><code>&gt; mkdir astro-cosmic-app &amp;&amp; cd astro-cosmic-app
</code></pre><p>Now run following command to install astro:</p><pre><code>&gt; npm init astro
</code></pre><p>After that select the template &quot;Starter Kit (Generic)&quot; as shown in below image:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2csgt9rnattoq5xljm96.PNG" alt="select-template" class="fr-fic fr-dii"></p><p>After that select framework you would like to use so I will select Preact but you can select whichever you want as shown below:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ua8ur3vlf5ox87e9gm8.PNG" alt="select-framework" class="fr-fic fr-dii"></p><p>Now wait for a minutes to finish the project creation.</p><p>After that install all the packages by running below command:</p><pre><code>&gt; npm install
</code></pre><p>To run the application execute below command:</p><pre><code>&gt; npm run dev
</code></pre><p>Now open <code><a href="http://localhost:3000/">http://localhost:3000/</a></code> and see the output:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oog08p5zo8xyyopp0grg.PNG" alt="first-start-app" class="fr-fic fr-dii"></p><p>So open the application into VS Code editor and check folder structure:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsmcujpvmwa1vqh073e5.PNG" alt="first-vs-code" class="fr-fic fr-dii"></p><ul><li><p>/public : Any static assets, like images, can be placed in the public/ directory</p></li><li><p>src/components: components are reusable piece of code. You put any Astro/React/Vue/Svelte/Preact components.</p></li><li><p>src/pages : this folder contains all the pages for your website which are .md or .astro files. Each page is exposed as a route based on its file name.</p></li></ul><p>For this blog application we are using a Start Bootstarp Clean-blog template. Download the template from <a href="https://startbootstrap.com/theme/clean-blog">here</a>.</p><p>After downloading, extract the files and copy the style.css file under /css folder of template into public folder in our project.</p><p>Also copy data of /assets from template into assets folder in our project.</p><h4 id="createaenvfile">Create a .env file</h4><p>we are using .env file to stored the cosmic bucket and read key data. So install below package:</p><pre><code>npm install --D dotenv
</code></pre><p>After that create a .env file in root level of project and add update with your details:</p><pre><code>COSMIC_BUCKET_SLUG= </code>
<code>COSMIC_READ_KEY=
</code></pre><h4 id="createdifferentcomponents">Create different components</h4><ul><li>So delete all the files in components folder. First we will create a component called &#39;BlogPostPreview.astro&#39; which takes input as single post data and display it. So in components folder create a new component as &#39;BlogPostPreview.astro&#39;</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/b239bc2c01cfae04c1af5b97584850e0' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/b239bc2c01cfae04c1af5b97584850e0" class="embedly-card"></a></div><ul><li>Create another components called &quot;BaseHead.astro&quot; which contains all metadata urls, links to external css/js files.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/d6daf74368ce28e6023158b2512326b3' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/d6daf74368ce28e6023158b2512326b3" class="embedly-card"></a></div><ul><li>Create a component called &quot;footer.astro&quot; to display the footer in all pages.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/1cb3938a415f7b588b8ff5e2337f0586' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/1cb3938a415f7b588b8ff5e2337f0586" class="embedly-card"></a></div><ul><li>Create a component called &quot;Navigation.astro&quot; to display the footer in all pages.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/5acc85dc7d85167dca5efdd2933270cf' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/5acc85dc7d85167dca5efdd2933270cf" class="embedly-card"></a></div><h4 id="displayallthepostsinlandingpage">Display all the posts in landing page</h4><ul><li>First we will create a folder in src called <code>lib</code> and inside that create a file called &#39;config.js&#39; which exports our env variables as belows:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/c6eecbdd859878a4d7863a9e8bdcc8a6' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/c6eecbdd859878a4d7863a9e8bdcc8a6" class="embedly-card"></a></div><ul><li>Open a index.astro file and replace below code to display all the posts in landing page:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/164d00b725ddf1b01a32a99d22814af8' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/164d00b725ddf1b01a32a99d22814af8" class="embedly-card"></a></div><p>Now run the application using <code>npm run dev</code> and see the output in <code>http://localhost:3000/</code>.</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltrlwkfz7bljbkuwa6vq.PNG" alt="landing-page" class="fr-fic fr-dii"></p><ul><li>Create another page inside pages folder called &quot;about.astro&quot; as below:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/9aef0d3d6767ec84dc27bb3708b61f1e' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/9aef0d3d6767ec84dc27bb3708b61f1e" class="embedly-card"></a></div><ul><li>Click on About option in navigation bar to see the output:</li></ul><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk6p013jx1d5gus9a4ax.PNG" alt="about-page" class="fr-fic fr-dii"></p><ul><li>Now we have to create a page which create separate static page for all our posts and when user clicks on single post it will display that page. To achieve that create a folder in pages called &quot;posts&quot; and inside that create a page called &quot;[slug].astro&quot; as belows:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/fec5790bdf0185793cfe383d95247dd5' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/fec5790bdf0185793cfe383d95247dd5" class="embedly-card"></a></div><ul><li>Now run the app again and click on post to see the post details:</li></ul><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob3cmtmbvppmqsuhzuty.PNG" alt="post-details" class="fr-fic fr-dii"></p><p>To build application in production mode you just need to run</p><pre><code>&gt; npm run build
</code></pre><h1 id="deployit">Deploy it</h1><p>We can now deploy our application on any hosting platform. I recommend deploying it on <a href="https://www.netlify.com/">Netlify</a> because it supports project structures like this and can quickly create deployments. Checkout this <a href="https://docs.astro.build/guides/deploy/#netlify">article</a> to deploy Astro app into Netlify.</p><h1 id="conclusion">Conclusion</h1><p>In this article, I have demonstrated you how to create a blogging application using Astro and Cosmic. The Cosmic Community has a lot of examples on how to handle integration with email functions, download functions, and third-party platforms. If you&#39;re interested in building your own applications like this, <a href="https://app.cosmicjs.com/signup">get started by setting up your free account</a>.</p><p>I really hope that you enjoyed this little app, and please do not hesitate to send me your thoughts or comments about what could I have done better.</p><p>If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmicjs">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join the conversation on Slack</a>.</p><p>You can follow me on twitter <a href="https://twitter.com/sumitkharche01">@sumitkharche01</a> or <a href="https://www.linkedin.com/in/sumit-kharche-890426a9/">LinkedIn</a></p>

Cosmic blogs on Astro

Start building today

Cosmic blogs on Astro

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

Start building today