What is your reason for not using Strapi. Love to learn more.
itās ok but Astro feature set is not properly exploited if you used a 3rd part cms.
first thereās this issue i mentioned earlier where youāll need a component mapper (from strapi components to astro components) and depending on your needs, you may end up with shit ton of unwanted JavaScript on your page. Include <script> tag only when component used Ā· withastro/roadmap Ā· Discussion #664 Ā· GitHub
second is that thereās no wysiwyg feature (similar to tinacms) which is a bummer i think, but itās not really related to astro, iāll give you thatā¦
ā¦but it doesnāt exploit imho one of the strongest feature in astro which is the support of mdx which is tremendously cool when it comes to authoring. you can expose a set of components (as design system, for example) and have a nice markdown editing experience with the power of letting unskilled people add custom blocks. (i believe the new beta markdown blocks will allow the same, but iām skeptical of the ui)
for a blog iād rather use plain Astro because the things you can do are much broader (mdx being one of them). if you have separated editors it is not super complicated (as a dev) to setup a dev env for non devs, there are a couple of ways to do it ; one could be to have a docker container run the dev server and mount LiteFS (or something similar) to expose the file system to people willing to edit stuff ; another way could be to mount the repo on an online IDE such as github codespaces, codesandbox or stackblitz.
Thank you for the context, and yeah it makes sense. I think it really depends on your requirement. In the article, I just wanted to showcase that it is possible.
Astro even mention using Strapi in there docs. Strapi & Astro š Astro Documentation
I think it really depends on what is your use case and what you are looking to achieve.
To your point using MDX and Astro is amazing. And form most cases it is the way to go.
I am refreshing my strapi website and thought I would try new-ish things like Astro and Tailwind, new for those like me that work on a blog as a hobby anyway. I got Strapi up, with the ckeditor which now seems even easier to set up. Astro seems to work pretty well too. But I am having a hard time rendering the CKeditor markdown. Basically the text and some bits of formatting get rendered. But the vast majority (āentersā between lines, bullet pointsā¦) are ignored. I tried āproseā, , markedā¦ From my google searches it seems that maybe Tailwind has some issue with rendering the ckeditor markdown? I am considering trying to use this How To guide but trying to not use Tailwind and see if it worksā¦ any ideas welcome!
Here is an example of my component where I used marked to render the markdown, I did end up adding custom CSS files. Maybe it will help.
If this is exactly what you have, maybe trying https://remark.js.org will be more useful. I believe it has more options to customized.
---
import { marked } from "marked";
import { formatDistance, format } from 'date-fns';
const { post } = Astro.props;
const { featuredImage, title, content, author, readingTime, publishedAt } = post.attributes;
const url = import.meta.env.STRAPI_URL;
const authorImage = author.data.attributes.bioImage.data.attributes.url || null;
const postImage = featuredImage.data.attributes.url || null;
---
<div class="container mx-auto">
<div class="w-full flex justify-end rounded-md">
<a
href={`/`}
class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yellow-400"
>
Back
</a>
</div>
<div class="my-4 text-center">
<h1 class="text-center text-4xl leading-tight text-gray-900 my-4 font-bold">
{title}
</h1>
<div class="text-gray-500 flex justify-center items-center space-x-2">
<span class="flex space-x-2 items-center overflow-hidden">
<img
class="inline-block h-8 w-8 rounded-full ring-2 ring-white"
src={authorImage
? url + authorImage
: "https://via.placeholder.com/1080"}
alt="author picture"
/>
<p class="font-medium text-xs text-gray-600 cursor-pointer">
{author?.name}
</p>
</span>
<span>·</span>
<span>{format(new Date(publishedAt), 'MM/dd/yyyy')}</span>
<span>·</span>
<span>{readingTime}</span>
</div>
</div>
<div class="rounded-md h-56 w-full overflow-hidden">
<img
class="object-cover w-full h-full"
src={postImage
? url + postImage
: "https://via.placeholder.com/1080"}
/>
</div>
<article class=" prose max-w-full w-full my-4">
<div class="rich-text" set:html={marked.parse(content)} />
</article>
</div>
<style is:global>
/*******************************************
Rich Text Styles
*******************************************/
/* Headers */
article .rich-text h1 {
@apply text-4xl font-bold mb-8 text-gray-800;
}
article .rich-text h2 {
@apply text-3xl font-bold mb-8 text-gray-800;
}
article .rich-text h3 {
@apply text-2xl font-bold mb-6 text-gray-800;
}
article .rich-text h4 {
@apply text-xl font-bold mb-4 text-gray-800;
}
article.rich-text h5 {
@apply text-lg font-bold mb-4 text-gray-800;
}
article .rich-text h6 {
@apply text-base font-bold mb-4 text-gray-800;
}
/* Horizontal rules */
article .rich-text hr {
@apply text-gray-800 my-8;
}
article .rich-text a {
@apply text-gray-900 underline text-xl leading-relaxed;
}
/* Typographic replacements */
article .rich-text p {
@apply mb-8 text-xl leading-relaxed text-gray-700;
}
/* Emphasis */
article .rich-text strong {
@apply font-bold text-xl leading-relaxed;
}
article .rich-text em {
@apply italic text-xl leading-relaxed;
}
article .rich-text del {
@apply line-through text-xl leading-relaxed;
}
/* Blockquotes */
article .rich-text blockquote {
@apply border-l-4 border-gray-400 pl-4 py-2 mb-4;
}
/* Lists */
article .rich-text ul {
@apply list-disc pl-4 mb-4 text-gray-800;
}
article .rich-text ol {
@apply list-decimal pl-4 mb-4 text-gray-800;
}
article .rich-text li {
@apply mb-2 text-gray-800;
}
article .rich-text li > ul {
@apply list-disc pl-4 mb-2;
}
article.rich-text li > ol {
@apply list-decimal pl-4 mb-2;
}
/* Code blocks */
article .rich-text pre {
@apply font-mono text-gray-800 text-gray-800 rounded p-4 my-6;
}
article .rich-text code {
@apply font-mono text-gray-800 text-gray-800 rounded px-2 py-1;
}
/* Tables */
article .rich-text table {
@apply w-full border-collapse text-gray-800 my-6;
}
article .rich-text th {
@apply text-gray-800 text-left py-2 px-4 font-semibold border-b text-gray-800;
}
article .rich-text td {
@apply py-2 px-4 border-b text-gray-800;
}
/* Images */
article .rich-text img {
@apply w-full object-cover rounded-xl my-6;
}
/* Custom containers */
article .rich-text .warning {
@apply bg-yellow-100 border-yellow-500 text-yellow-700 px-4 py-2 rounded-lg mb-4;
}
</style>
Hello,
I am getting having trouble connecting Strapi to Astro.
Please note that I am new to Strapi and any help is appreciated.
In my main project folder have Strapi in a /backend folder and Astro in my /frontend folder
The error message is fetch failed
{
"code": "ECONNREFUSED"
}
In my astro env file i changed ālocalhost:1337ā to my IP, but I get the same error .
STRAPI_URL=http://127.0.0.1:1337
maybe I am missing some other essential files that will login and connect to strapi?
Thank you for any replies.
Do you mind sharing your code via GitHub. I can try it out and see if you are missing anything.
I just tested the completed code in this repo and it worked. You can use it as a guide to see if you are missing anything. GitHub - PaulBratslavsky/strapi-astro-blog-post
I came for the comments, and wasnāt dissappointed 
I also want to like Strapi because Remix looks awesome and a headless CMS makes so much sense. Excecution is everything, I think this product has a great future if they work their asses off for a few more years. If they go at a normal pace, itās about 8 years away from becoming what Wordpress was in 2015. Just an honest review.
Thank you for your feedback, are there any specific areas of friction that you are experiencing that you can share that can help us improve. We are in the process of working on Strapi 5 ( beta just released ) which includes many improvements.