Hello,
In my project, I have a website ( HTML / CSS/ js ) and a blog running on a self-hosted blog. will it be possible to develop a ghost-based website and eliminate additional tech stack/cms / etc …
Are there any manual / best practices, please share.
Thanks
Absolutely.
Ghost themes are basically just HTML with a little bit of spice:
You can define your own home page, create landing pages, etc:
My own website is also just a custom Ghost theme I put together. The home page itself is not connected to Ghost as a CMS at all, other than for the navigation.
this is very interesting @jannis .
quick question,
your main page is not connected to CMS, where are you storing static content, images , etc.
in my case I have a html css and js. Is it possible to port to ghost’s custom theme javascript also?
Thanks
It’s just an HTML page. The images are stored in the theme using the assets helper.
“Not connected to Ghost as a CMS” meant that all the content is actually written in HTML and not pulled dynamically from a Ghost page or post.
And yes, you can use JavaScript without issues. Try having a look at existing Ghost themes to see how they work.
Ok. thanks @jannis. I created my landing page home.hbs. images and CSS are nicely served via asset. probably what I am missing is how to manage custom data from handlebars.
landing has plenty of custom data. (of course, it is possible to hardcode it to HTML ). is there a way to manage custom data from ghost CMS and render it via handlebars?
Not sure what you mean with custom data?
Personally, I have just hardcoded the content in HTML.
Yeah , @jannis. I did the same - hardcoded. let me rephrase what I mean.
in the case of landing you have only one page and it is fine to hardcode it, but what if I have many pages (not blog posts ). the structure probably will be the same/similar but no technical person will fill the content and it would be great to allow create content not hard-coded but from CMS and fetch it on the client side via template language.
also, a question using asset is caching the resources ( via documentation). what caching mechanism is used in Ghost?
Sounds like the data attribute is what you’re looking for 
As far as I am aware, out-of-the-box Ghost only does browser caching. Different hosting providers then add their own caching layers/CDNs on top. Most self-hosters use Cloudflare.
yeah, almost there @jannis.
for example, this file was created externally (non-technical person, should it be json or something else ? … )
{
“team”: {
“title”: “Meet Our Team”,
“description”: “Our team is dedicated to providing the best service. Learn more about each of our team members below.”,
“members”: [
{
“name”: “Jane Doe”,
“position”: “Chief Executive Officer”,
“bio”: “Jane has over 20 years of experience in the industry and is passionate about leading innovative projects.”,
“photo”: “/images/jane_doe.jpg”,
“social”: {
“linkedin”: “https://www.linkedin.com/in/janedoe”,
“twitter”: “x.com”
}
},
{
“name”: “John Smith”,
“position”: “Chief Technology Officer”,
“bio”: “John is an expert in software engineering and has been instrumental in developing our core technology.”,
“photo”: “/images/john_smith.jpg”,
“social”: {
“linkedin”: “https://www.linkedin.com/in/johnsmith”,
“twitter”: “x.com”
}
}
]
}
}
how can I “attach” or make aware of this file to a page and how should the handlebar script parse it on a page?
is there any example? it looks not so mainstream but should be pretty useful and unfortunately, I can’t find any example or tutorial.
I don’t know of a dynamic way (ie multiple pages) but I moved my landing page to a custom page recently and blogged about it in case that can help you: Moving All My Posts From My Ghost Homepage to Its Own Custom Page
Here I created a static page (handlebar etc) but have it pulling data from a page through the ghost structure. This way I can change out how my new “blog home page” looks at any point by changing the ghost page and I don’t need to open my themes code or upload the changes.
Maybe something like that will help you.
If this is just a JSON, I would just add it using the code injections on a post (not the global ones) and then simply parse that in the post.hbs.
That way your team can adapt it in the code injections and the theme can use the data using normal Javascript.
I used Ghost for a full website by creating different collections with custom routes in routes.yaml, then styled each using custom templates. If you’re troubleshooting 3ds max thumbnail issues while managing a portfolio section, you can also create dynamic pages in Ghost that pull in images cleanly, just be sure your image sizes are consistent and embedded properly in your templates so everything displays right.