title | seoDescription | datePublished | cuid | slug | cover | ogImage | tags |
---|---|---|---|---|---|---|---|
How to Configure cloudcannon collections to enable Post & Page content editing? |
CloudCannon makes it easy to store your content in your Git Repo and have non-developers update it. The editing is all done in with minimal configuration. |
Sat Mar 11 2023 17:17:41 GMT+0000 (Coordinated Universal Time) |
clf48ceo3000d09mp9p8p188z |
how-to-configure-cloudcannon-collections-to-enable-post-page-content-editing |
cms, reactjs, nextjs, jamstack, cloudcannon |
Next.js is one of the most popular React-based SSGs. CloudCannon makes it easy to store your content in your Git Repository and have non-developers update it. Better yet, the editing is all done in context with minimal configuration.
This guide will walk through the steps required to get your Next.js site you previously built, editable, and living on CloudCannon.
Effort: 25 mins
After completing this reading, you will be able to:
-
Edit your deployed Static Site within cloudcannon UI.
-
Configure cloudCannon collections locally to enable Posts content editing.
-
Configure cloudCannon collections locally to enable Pages content editing.
-
Make Git-based changes through the CloudCannon UI.
If you intend to run this lab on your system, please ensure you have the following:
-
A basic understanding of working with the terminal.
-
A Laptop or PC with Windows installed
-
A Internet connection
-
Git installed on your local machine. For more details on accomplishing this, review Installing & Setting Up Git on Windows.
-
A GitHub account.
-
The latest version of Visual Studio Code is installed on your machine.
-
The cloned demo website starter deployed to cloudcannon already up and running.
Note: This is a follow-up tutorial, it does require you to have created the Hands-on-Lab, as covered in the article How to deploy Jamstack sites to cloudcannon to make the most out of it.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551544034/5a3c3558-cf3f-4d7b-86fa-c05acff2bfdb.png align="left")
So let’s get started with another capability of cloudcannon that can give us the ability to actually manage and edit this content inside of our project.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551573244/4a2de944-e89d-4b4f-a912-eb84e43520c4.png align="left")
We can actually go through and mainly find all the files here,
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551583935/616dcc9d-27a0-46d4-9fa5-e24ae615beb8.png align="left")
that we actually want to edit such as if we wanted to edit our homepage,
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551596833/821f9fdf-5ba0-44a1-8044-6e26ae8638d8.png align="left")
or the about page or any other page, we can edit the source right here:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551612183/0d5f646c-8716-4ea5-83e4-fc2b17a52008.png align="left")
But we have other options by using a configuration locally in our project so that cloudcannon can actually see what we define as our content.
If we head over to the cloudcannon documentation,what we ultimately want to do is Defining our collection, and we can do that by defining our collections Configuration along with all the other options that we're going to actually need, which we're going to walk through now.
Note: It's recommended to spend some time to read Cloudannon Documentation
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551628076/187a32b3-ed18-4a57-a099-18e4722b8165.png align="left")
I'm going to create a file in the root of my project called cloudcannon.config.js
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551639528/2a85bb6a-a31f-4491-9c91-87ff1ca31ebf.png align="left")
Then I start by defining our collection configuration.
Let's walk through this new code:
1 - I start by defining a module exports. I'm going to set that to a new object.
2 - Then we want to add a key for our actual collection of content that we're about to set up, and we have two things that we want to eventually set up.
Our pages and our posts.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551649299/9dd83694-5ba5-4eba-b79d-1e3782d1b0ad.png align="left")
3 - Following that, I insert the following block of code into our Posts collection:
posts: {
name: "Posts",
path: "src/_posts",
parser: "frontmatter",
output: true,
url: "/posts/[slug]",
},
Note: If we look inside of the pages directory & posts directory we have the setup that shows:
/posts/[slug]
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551746253/6297ec52-dee8-414d-bd8c-807d25aa60ce.png align="left")
Note: When I add
/posts/[slug]
it's not going to be something that has to line up one-to-one with the actual name of that javascript file [postSlug].js. It's going to just be this slug in the brackets because that's what cloudcannon is going to understand as the slug. Now that we have our post finally set up, let's get this up to cloudcannon and see what happens this time after we commit these changes.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551817481/b9942d3d-4053-417a-8b66-949df2594983.png align="left")
We save the file, and then we're going to commit and push these changes to Github.
$ git add .
$ git commit -m "Add Posts object to collection config"
$ git push -u origin main
Note: Cloudcannon automatically updates these changes for us.
We can actually see that under Files. We now have another src option where our posts are.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551844398/6e89ee79-2c83-43e2-90c3-06147ea33ef7.png align="left")
If we click on that we can now see all those different posts that we had locally as files.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551863839/49d3b5cb-2c02-4103-b2af-67923d777022.png align="left")
If we click into one again we can see that we can open up one of these posts with a Content Editor,
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551890958/6c823846-16ab-4a2d-a57c-322953a498a9.png align="left")
A nice looking editor, not just the source of the code, where we can make changes to any of the content in our site, including all the frontmatter that belongs to each and every one of those markdown files that is visible on the left: Title, Date & Categories.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551910606/9f364020-6cd1-4522-878d-60283ed8cd1c.png align="left")
Now the cool thing is we can select this drop-down and we can see that we have a couple of different options for how we want to interact with this file particularly we still have this option to edit the source of it by clicking on the Source Editor.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551928595/00c8e7bc-a0ac-4cc3-a675-4b09d2afb03b.png align="left")
If you're not familiar with the structure of markdown we have this frontmatter at the top which just defines a few data points which is what we saw on the left of the post we had opened with the Content Editor before**.** The rest of it, is going to be our content which is parsed inside of our project and then we can actually edit it as content, if we prefer right inside this Source editor.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551940684/e65eac4d-c952-4a53-8f74-7584886c0923.png align="left")
But we also want to manage our pages like this right, so I'm going to go ahead and copy & paste this object and I'm going to rename everything instead of posts to pages. You can see the new updated block of code below:
pages: {
name: 'Pages',
path: 'src/_pages',
parser: 'frontmatter',
output: true,
url: '/[slug]'
},
Let's walk through this new code:
Just like I did with Posts before I'm going to make sure that the name is actually capitalized, and the biggest difference here is, we want to make sure that we're passing in the url as the appropriate url. Now, we don't actually have pages in front of the slug like this; if we look at the file inside of pages, it just exists at the root of the pages directory called [pageSlug].js. The way that works is if we don't manually define that file, it's going to fall back to that dynamic page slug and create it using that template, so we're going to leave this just as /[slug]
where it's going to be able to create those files for us.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678551968505/5506d4f4-13a4-4b5c-8229-a696999430a0.png align="left")
Here's the final javascript code of cloudcannon.config.js
module.exports = {
collections_config: {
posts: {
name: "Posts",
path: "src/_posts",
parser: "frontmatter",
output: true,
url: "/posts/[slug]",
},
pages: {
name: "Pages",
path: "src/_pages",
parser: "frontmatter",
output: true,
url: "/[slug]",
},
},
};
Just like before, once it is finished, we're going to commit and push these changes to Github.
$ git add .
$ git commit -m "Add Pages object to collection config"
$ git push -u origin main
Note: Just like before, Cloudcannon automatically updates these changes.
We can see now in our Dashboard that Github updated the cloudcannon.config.js file in just a matter of seconds.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552220782/5dcd67dd-4220-4aba-92ce-33db5cfca36b.png align="left")
We have the pages area:
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552281332/b8569aca-baac-4ec2-82a6-8e67308fd77b.png align="left")
Where we can select our about page and edit any of the content that we'd like.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552297132/3c45c2c4-ff7e-409c-95fd-7aa7453cc0b6.png align="left")
Now in terms of actually editing content, we can do this right inside of this Content editor.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552312266/62a50c78-1926-464f-89b4-dc1ef2510980.png align="left")
For instance, if I wanted to add a new sentence, "Please read the articles by order"
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552328788/d0340d1a-f8f1-4e8e-9d73-5349a6c2e385.png align="left")
And I click save
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552347630/aefba3d7-4e74-4f23-9886-0b39a8c2315c.png align="left")
What that's going to do is actually update that file inside of my Git project repository, since these files are Git based and then it's going to Redeploy which we saw just happened automatically.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552380522/7aec9a76-d09a-469a-a001-45e4a43953ff.png align="left")
If we look back at our GitHub project we can see that we have this new commit called updated source pages about via cloudcannon where it actually adds that change and removes the heading 2 from the first sentence.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552400333/d7537012-21e4-411b-b6fe-87f23c780d80.png align="left")
And to prove that it works we can see once it's done we can actually head back to our Dashboard and see that the About page was just updated.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552422854/4d222925-2508-47af-a08d-5f1330df0796.png align="left")
Now to see it in real-time, open up our site. We can navigate over to the about page and we see that the sentence is now added and live...
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678552440308/ecf58f32-73d8-47fe-97e1-0424eb650258.png align="left")
In addition to providing us with a great way to manage our content directly using the Content Editor, cloudcannon also allows us to edit and redeploy our production projects out to the web very quickly.
Are you a fan of the jamstack let me know in the comments and let me know what's your favorite part of building with the Jamstack.
If you want to follow along with more advanced stuff in the next article. I'll talk about A Step-by-Step Guide to Installing Pre-Configured Cloudcannon Themes for Your Jamstack Project Thanks for the read! Now go practice & build something awesome!