Can I use JSON and "template" pages to build a complete static website?

Wappler General How To
#1

Is it possible to combine “template” pages with JSON, bake the results, and build a full static website out of them?

I’m making a personal gallery/portfolio out of “template” pages and JSON, with the goal of having a 100% static website that I can update simply by adding new entries to the JSON file, build the resulting content, and upload new HTML pages/assets via FTP.

I have two kinds of template pages:

  • The Gallery page, which displays all available entries as thumbnails + titles.
  • The Entry page, used for individual gallery entries, which displays the project itself (in this case, images), title + description, and detail shots.

I currently already have JSON linked up to a rough draft of these templates, so I can see these pages and all the data functioning correctly. My biggest issue right now is that I can’t find any way to “bake” the results into completely static HTML – or automatically create pages for each Object entry in the JSON file, for that matter.

Is this currently doable? Does this sort of functionality exist in Wappler?

#2

Hi Lollie, welcome to the community!

If I understand you correctly you should be able to do that with Wappler. You would likely need the Pro version though?

#3

Welcome Lollie, you can use a JSON Data Source. Should be possible with the Basic version.

1 Like
#4

Hi @Lollie, welcome aboard.

I know that the developers of Wappler do not want to make this public, but JSON is the middle name of Wappler. All you need to do is include a JSON Data Source to your document as @patrick has shown and Bob’s your uncle.

You state that you are creating a static website. Actually, your JSON data file makes for a dynamic site by definition.

#5

Locally, I’m making a dynamic site, I understand that. But what I want to do is take the dynamic site, and bake it down into a static site – effectively using Wappler like a visual static site generator.

Like I said in my post, I already have JSON hooked up, I have a couple rough and functional template pages that are reading/displaying everything correctly. It’s just a matter of figuring out how to flatten this result into something I can simply toss up online.

#6

OK, I understand now. As far as I know, there is no way to automatically convert a dynamic site to a static site, nor do I know of a reason for wanting to do so.

Could you please explain your reason is for a conversion? Knowing that will help to find a solution.

#7

I can try to explain, but it’s gonna be kind of verbose.

Honestly, my biggest reason is simply that I want to avoid dealing with online databases and server-side configuration as much as possible. I’m not a web developer by trade – I’m a visual artist, so static sites are most comfortable to me.

I’m also trying to avoid command line tools, or anything that requires a programming environment. Unfortunately for me, as far as I can tell, basically every static site generator out there is one of these two things.

Because I’m building a personal portfolio, there’s a lot of data to push out. I could do this manually and make new pages by hand, copy and paste everything into where it needs to go, etc – but the biggest issue with the manual approach is that it is time consuming and repetitive. If I want to alter the page design/structure later on (or worse, a complete site redesign), I would have to apply my changes to every page individually and manually.

So, my thought here is that by building template pages, and sticking all the actual content (and page-specific CSS data, like background colors, SVG fill colors, etc) in a JSON, I never have to worry about refining my site’s design once it’s online. All the actual content is more or less future-proof, I can just tweak the templates as needed and rebuild the site. And, because the resulting site would be static, I could host it anywhere with zero configuration.

Hopefully that explains my reasoning behind why I’m trying to follow this dynamic-to-static approach. The only other idea I have is to get a dynamic site running locally, and then use a site scraper to create a static version of the site, which seems… okay, but messy. There has to be a better way.

#8

So as to be clear, I would not use JSON for styling.

Do use JSON for Gallery and Entry details.

To setup a template system, have a look at https://docs.wappler.io/t/creating-single-page-apps-spa/6583.

Using this example, you would have a link to the Gallery page; the items in the Gallery page would contain link to the Entry page. The JSON dataset would populate both the Gallery page and the Entry page.

Using this scenario, there is just one template that needs modifying while the JSON dataset will take care of Galeries and Entries.

1 Like
#9

I’m using “dmx-style” and “dmx-bind:style” to add inline CSS to specific elements. Each entry comes with its own line of background CSS (a color, a gradient, or an image, depending on what best suits the entry) and hex values for accent colors, so that each page’s elements can be unified with the entry itself.

This comes very close to what I’m looking for, thank you. I’d still rather build a set of static pages directly through Wappler, but if that isn’t possible, then this will at least allow me to build a dynamic site for local use, from which I can scrape static pages.

#10

Your project is very interesting and fully possible in Wappler!

You can really make nice static pages that become dynamic with the help of Wappler’s App Connect framework and JSON data.

Actually a very good example of that is already included in Wappler. Check the included “Demo Dynamic Real Estate site” project

It is all powered by JSON file for all its data and still all searches and data population are dynamic.

1 Like
#11

I think that I am still not grasping exactly what you want to do. Yes you can use App Connect features like dmx-bind:style to manipulate the styling dynamically and you can create static pages using the SPA procedure.

I still think that using the JSON file - which contains the Gallery data - would make it a lot easier for you. For the Entry details, you would need just one link containing a URL variable to show the relevant details.

https://github.com/Wappler/docs/wiki/Filtering-Database-Query-with-an-URL-Parameter shows how to do this using a relational database, the same can be achieved using a JSON file.

The Demo Dynamic Real Estate site that @George pointed to, will get you as far as the Gallery page.

#12

This reminds me of GatsbyJS. I hope we can do that here in Wappler. I am very new here, yet I find the tool very stable and lightweight. I am really looking forward to using Wappler for years and learn how to create my own CMS or the other functionalities here I am not familiar of. Just using the tool gives me the impression that I can do learn more and do more of from it. Hoping though. :slight_smile:

#13

Here’s a visual description of the workflow I’ve been looking for. You’ll have to excuse the large image, but I feel as though my ability to explain with words alone is failing me, ahah.

At this point, I’m pretty certain that I’m looking for functionality that does not exist in Wappler - or any visual web-dev tool for that matter. So consider the below image to be a description of a “dream feature” that I would love to have: JSON goes in, multiple Static HTML files come out.

Site-Gen-Workflow
Site-Gen-Workflow.png1944×1366 249 KB

#14

Hello Lollie,
I still don’t quite get your idea - why not set up static template and fill it with JSON data, using the tools we have in Wappler?
Then you can edit the JSON contents and it will update the pages immediately.

#15

I have done this. The issue is that I want to use the resulting dynamic data, and flatten it back down into static HTML.

I’m more or less asking for Static Site Generator features in a visual web-dev tool.

#16

Then why use JSON at all and not generate HTML files directly? :slight_smile:

#17

By using JSON (or YAML, XML, whatever), I can keep the site’s content separate from the site’s design. And then, if I ever need to tweak the site’s design/structure, I only have to alter the template files, and then ideally rebuild the site.

As for why I’m not simply generating HTML files directly: All of the Static Site Generator tools I’ve come across ask for programming environments and bash prompts. I honestly feel that ought to be unnecessary – there has to be a better way to do SSG, and I want to avoid command line tools as much as possible.

Forgive me, but I feel like I’m running into a brick wall trying to explain my desired workflow, and why I’m chasing it so strongly. I’ve already explained several times what I’m trying to achieve, and nobody seems to understand the approach. It’s frustrating to say the least.

1 Like
#18

I think you are just overcomplicating a simple task.
All you need is static HTML pages, and dynamic data coming from a JSON file.

In your static HTML pages use serverside includes for common elements - navbar, sidebar, footer. Then you have it in a separate file which can be changed and changes will be applied to all the pages.

Content, separated from design is in a JSON file and you put your dynamic bindings in the static HTML pages. As soon as you change/update the JSON file the content is updated on your pages.

No complicated build scripts are required, no database setup is required - just your static HTML files and JSON data bindings in there.

2 Likes
Building a catalog app
#19

Yeah, that strange…
Lollie wanted the obvious thing: export his site as a bunch of static htmls (sometimes it calls ‘prerender’).
It is required to be indexed by search engines properly (search engines has limited ability to render javascript, like google or can’t at all). Another reason - faster page rendering to the user.

I just downloaded the Wappler and tried to do exacly that and was surprised that there is no ability to do it… exept that, the product is amazing (but without that feature I can not use it)

#20

Hello,
Google already renders javascript pretty well (for 5 years already) and using javascript does not affect SEO at all…
Unfortunately we don’t support exporting static html / sites. That’s not our top priority at the moment.