Join the Webstudio community

Updated 5 months ago

Ghost: How to show a specific post on a standalone page?

At a glance

The community member is using Ghost as a headless CMS and wants to manage content for all pages on their website, not just the blog. They want to display the content of a specific Ghost post on an "About" page, and potentially add a "Now" page as well. The community member initially tried creating duplicates of the Ghost Posts and Post page, but ran into issues with changing the name and dynamic path of the duplicate "Post (1)" page.

In the comments, another community member suggests using Ghost Pages and creating a static page in Webstudio that fetches the content from the corresponding Ghost page using the Content API. They also provide a workaround for the issue with the dynamic page settings. The community member struggles to implement this solution and asks for more detailed guidance, which the other community member provides by sharing their own setup.

Eventually, the community member is able to put the URL expression together and use Content Embed to display the content on the page, though they mention breaking the Posts page in the process, which they plan to fix the next day.

Useful resources
With Ghost as headless CMS, I'd like to be able to manage content of all pages on my website, and not just the Blog page.

Concrete example: my website has an about page and I'd like that page to show only the content of the corresponding Ghost postโ€”this post has a unique tag (also About).

My idea was to create duplicates of the Ghost Posts and Post page, and repurpose them for this goal. Already felt a bit "messy," but hey, learning through doing, no? ๐Ÿ˜„ But then I got stuck with the Post (1) page, which is a duplicate of Post. It wouldn't allow me to change neither its name or dynamic path. (video attached)

Questions:
1) Is there a more elegant way of achieving this? Ideally, I'd like to retain a URL structure where blog posts are displayed under www/blog, whereas the About page would be at www/about. The idea is to also add a Now page, which would then reside at www/now.

2) If what I wanted to doโ€”duplicates of Posts and Post pageโ€”is the only or optimal way of achieving this, why did I get stuck the way I did?

Builder link: https://apps.webstudio.is/builder/0203520e-359c-4445-aade-35c4e9ac4c40?authToken=dab206d7-0b0e-4ae0-b951-c44ac271b358&mode=edit

@John Siciliano โ€“ you've already earned so much good karma helping me out, and here I only come for more. Huge thanks in advance ๐Ÿ™
J
D
25 comments
For Pages what I would do is use Ghost Pages then in Webstudio create a static page like /about and create a Resource that fetches the exact page you want from Ghost. So you'd use your Ghost url then /content/pages/{id}/ where the ID is a static value you get from the Page URL in ghost. https://ghost.org/docs/content-api/#pages
btw the reason you cant change the posts 1 is because it's a dynamic page, the app requires some data to be present before you change page settings (we need to change this imo). So you'd go to the page 1, put some slug in the address bar, and then you can change the page settings
also i noticed you're using an HTML embed for links. You can just add that to the header so 1 one you change it once it changes everywhere and 2 you don't have to manually copy paste it on each page
Thank you so much, John! ๐Ÿ™
For pages โ€“ This makes a ton of sense. I'll try it out!
You're my hero! ๐Ÿฆธโ€โ™‚๏ธ
Yeah, I'm a total newb, but from where I stand it should be possible to create more than just one dynamic page, for practical reasons. Cheers. Good to know it's a technical limitation, and not something wrong on my end.
You're right, and I'll fix that. Thank you!
nononon... you can create as many dynamic pages as you want
OK... but? ๐Ÿ™‚
the issue i was describing was that in order to change page settings, the dynamic page just needs to have data
ill record something
Appreciate that, thanks again ๐Ÿ™
Okay so the actual issue is the page setting Title field is requried and when it get no dynamic data, the validation for saving it fails which is why you cant save the page. So you can just hardcode some temp title for the time being then the page will save.

I'll create an issue for this as you should be able to at least delete the binding but it's not letting you when validation fails.
posted issue just fyi but the workaround will get you there https://github.com/webstudio-is/webstudio/issues/3965
Hey @John Siciliano, my dear friend โ€“ I tried to implement your wonderful advice, but sadly there were too many gaps in my understanding to make it happen ๐Ÿฅฒ

For Pages what I would do is use Ghost Pages then in Webstudio create a static page like /about...
Well, this I knew how to do! ๐Ÿ˜„
But then...
...and create a Resource that fetches the exact page you want from Ghost.

What I wasn't clear about:
1) Do I use the posts or post page template as a starting point?
So you'd use your Ghost url...
1) Where and in which shape/form?
...then /content/pages/{id}/ where the ID is a static value you get from the Page URL in ghost.
Sadly, once again...
1) Where exactly do I enter this data, and which shape or form?
I feel like I am starting to get an understanding for how to manipulate these things, but sadly I am still not at the level where I can take any abstract instruction and apply it properly.
If it's not too much to ask, could you please make this work for the About page on my site, and I believe I could learn a ton from that! And hopefully not have to bother you about this ever again ๐Ÿคž ๐Ÿ™‚
Btw, I hate to ask these things if there's a tutorial I could follow to achieve what I want. If there is, please just point me to it.

Thanks so much for being patient with me and for all the help so far ๐Ÿ™
Could I use AI to help me learning/doing this? ๐Ÿ˜„
hey i think you got it youre just missing the api key which is just mentioned here https://ghost.org/docs/content-api/#key. I think i did the same thing when setting it up too. Attached is my setup
Attachment
image.png
Thank you! I managed to put the URL expression togetherโ€”thanks to your clueโ€”and got the content onto the page using Content Embed! ๐Ÿ™Œ
I managed to break the Posts page in the process, but now I feel like I should be able to stitch it back together on my own ๐Ÿ˜„ That's something I will happily get to tomorrow morning, first thing! ๐Ÿ™‚
Add a reply
Sign up and join the conversation on Discord