I’ve self-hosted Ghost on my DigitalOcean server and integrated it with my Next.js application using a custom integration. While the content from my Ghost blog is being retrieved correctly, the styles are not being applied, which causes the blog layout to appear broken or unstyled.
Has anyone else experienced a similar issue or found a solution for applying Ghost’s styles properly in a custom front-end setup?
Thanks in advanced.
I’m assuming you’re retrieving content either from the content API or admin API. Neither one applies theme styling – if you’re retrieving post bodies as HTML, you’re responsible for loading the styles (and some javascript) for making them work correctly.
Ghost themes mostly load cards.min.css and .js, which handle styling of the built in Ghost cards in post bodies. And the majority of themes either inline a bunch of other styles, or load one or more .css files for the styles necessary to render the page. That won’t be 100% of what you need, but it’ll be a good start. All of the official themes are MIT licensed, so you might look at importing one or more of their style files also, to cover the rest.
I am also having the same issue so in that case what should I do, can you provide me some steps or some ghost guide which help to resolve this issue
Thank you
There’s some documentation on running Ghost headless, but it isn’t a beginner item.
Thank you for your quick response. I have implemented the solution as suggested; however, there is no mention of styling in the provided guidance. I am currently encountering difficulties with styling, as the block content is being rendered but not styled as expected.
Did you read my previous post about loading styles?
Yes, Resolved. Thank you so much for your quick response, it means a lot 