Hi all! I’ll get the ball rolling here, feel free to show off anything you’re proud of here or think would be useful to others.
I wanted to share my latest tutorial and video, building on my previous exploration of setting up an Astro blog with CloudCannon. The series shows how I would set up an Astro theme (Bigspring) for CloudCannon.
This time around, we’re
- setting up and adding .mdx files which allow for snippets to enable complex HTML components within markdown content
- refining the image path configuration
- refactoring multiple collections into a single pages collection for better content organization
I’m currently working on the next video at the moment. We’re pretty much set up for editing and creating blog posts, so we will be moving on to how to make the rest of your site editable. I’ll dig into reusable components, live editing for landing pages, optimized images, and advanced input configurations.
Let me know if you have any questions!
16 Likes
Another awesome tutorial Tom 
7 Likes
Kia ora! 
I’ve just added another video in our tutorial series where we set up a free Astro theme in CloudCannon.
This time we’re looking at how to set up visual editing previews - how to get your pages to show edits to your frontmatter in real time, without having to save any changes.
This video covers:
- A quick recap of the setup work we did for Bookshop in our last video. Last video we set up Bookshop because we were using it to import all of our components into our content pages. This ensures that if one was placed amongst our markdown body content by an editor as a Snippet, it will work.
- The rest of the set up to get Bookshop (and therefore live editing) running on our homepage.
- Refactoring ‘hardcoded’ code on our home page into components which allow for live editing, and can be reused/reordered throughout your site
- How to set up responsive images for Astro in CloudCannon
- Configuring inputs and component information to polish up the editing experience. In particular demonstrating how to use structures in combination with array & object inputs in CloudCannon.
I have some ideas for the next video including:
- Refactoring some of the other pages to use Bookshop components, which will be a bit different than the homepage - which already had most of its content as frontmatter templated throughout its layout.
- Setting image paths on image inputs that use the Astro Image component to open the image picker in a different place than normal images
- Attaching a custom domain
- Setting up automatic blog publishing workflows
- Configuring any non-component inputs (eg. the data files)
Would love to hear any requests for things to cover in future videos if anyone in the community has any ideas!
6 Likes
Agree! Super digestible and helpful 
@rbarnes I thought you might find this series from Tom helpful 
