How to make a whole editable website with Hype

Hi there,
In fact I’m not new to Hype. I’ve used Hype to do some projects called ‘H5’ in China for 2 years. Hype helped me and my team a lot lot lot!~~Thank you !!
I’m a designer with a little knowledge about html&css but very poor in Javascript and backend language. I love the animation and interaction in Hype and also do some ‘amazing’ static website.
But now I need to do some REAL website for my clients.
I’d like to do all the front pages(include navigation, footer, banner, animation and interaction, not just an animation) in Hype, and I’ll define in it which areas are editable. Then use some CMS into the Hype document so that my client could log in the CMS backstage to change the articles, images, products and so on. Just like using Wordpress.

My question is :

  1. Could anyone recommend which light-weight CMS is friendly to designer and the clients(I mean the graphical interface) and work well with Hype?
  2. When I finish all the front pages in Hype, how could I link the Hype document with the CMS? (I’ve been very confused here, probably because I’m lack of front-end experience).

Thank thank you very much !~~

2 Likes

I would recommend a flatfile CMS or something that has a JSON API. A search should give you some options.

This is a quick first attempt at your Problem. It can be done much better for images with the image replacement method I used for a recent post but at least this should get you started (with the text portion).
I use a CSS-Class based content replacement because it replaces content across layouts and CSS-ID’s have to be unique so Hype starts interfering if you would use CSS-ID’s …

HypeCMS_example1.zip

@MaxZieb Thank you very much for your reply, I’ll follow your suggestion and have a try~
And I’d like to download the zip to learn but it says “Not found”. Could you please upload again?

Thank you very much !:relaxed:

fixed… link should wok.

Was weekend shopping. Now I revisited the code and here is a example that works with a lookup map. I think this is better and allows you to map CSS-Classes for Text and Images to JSON-Keys. Also this way the image replacement works on a much lower core level without ever loading the original image. Also it doesn’t require an initScene function.

BTW one could also just embed the JSON (via PHP) into the Hype-HTML-Page and the the preoading (loading scene) would not be necessary.

This is perfectly fine and could only be improved through inverting the lookup map (initCMS) to also be generated automatically through special CMS-Classes keys that start like HypeCMS-KEYNAME … maybe in a (Version3).

HypeCMS_example2.zip

2 Likes

It’s cool~ Thank you very very much!~ I’ll learn about and test the example first.
Thank you for patiently giving me a thought. !:blush::blush::blush::blush:

Here is a closed source managed CMS (with a free tier that should cover many small Hype-Pages):

https://www.datocms.com/

and another (not tested yet)


Here are some Open-Source “Headless CMS” (managed or self-hosted) :

https://getcockpit.com/

3 Likes

Wow~Thank you Max ! I’ll have a try. Recently I found a CMS - October CMS. I guess I’m going to spend some time studying~

Well October CMS is also full CMS with template and frontend rendering. The ones I suggested are basically only headless and provide an API for the Data you create in them. If you use October CMS you will have to probably need to create some custom endpoints to load data from (https://octobercms.com/docs/database/serialization), use the API (https://octobercms.com/docs/api) or use a custom template to render the data directly into a JSON var in an JS-Section on the page holding the Hype-Element.

For anybody in the future… if you don’t need page rendering support a headless CMS should be fully sufficient and easier to maintain and on the other hand a full CMS can additionally produce some pages not displayed with Hype as the main view.

I kind like this integration, do you have any sample of a conection with this CMS we can view? seems very promissing singe hype relies on Javascript and there a number of integrations can benefit from this… kind like Hype CMS or something like that…

I don’t know what you mean exactly? There is an example above and I recommend a headless CMS to generate the end points. If your request is about October CMS… I personally don’t work with that CMS.

1 Like

Thank you for your reply, I think I probably know a little about the differences between them. I’ll try the Sanity and getcockpit first