Creating a 'website builder'?

Creating a 'website builder'?
0.0 0

#1

Hi all

I’d like to make a website with a few fields. I want a user to input 4 words, and then another word.

I’ve looked at it on Stackoverflow, and this interests me:

I’ve also seen .yml files, that interest me. So, this is what I want:

  1. A HTML site that the user forks on GitHub, and then inputs what they want in the template into a separate file. The fields are this:
//user inputs all of these
Name: 
Move 1: 
Move 2: 
Move 3: 
Move 4:
  1. This is placed in certain areas of the .html doc:
<body>
  <p>{name}</p>
</body>
  1. User can update and it updates on the site.

I know there is a way to do this, as I’ve seen other projects doing it.

I’d like it to work like this project does, with yml: https://github.com/jarrekk/Jalpc

Thanks


#2

Hello Giacomo,

Is there a particular problem you’ve run into trying to build such a program?

In general, this type of website builder is called “static site generator” because the exported files do not require a server back-end that handles changing logic. The logic is applied at “compile” time, when the HTML/CSS files are initially generated before they are uploaded to a hosting service.

The key steps are:

  1. Load content data
  2. Apply a set of templates
  3. Save HTML, CSS, and JavaScript files

I wrote a simple one in Go that does exactly this.
Code: https://github.com/mtso/lynx
Demo: https://apb.mtso.io

More production-ready ones have all kinds of additional steps in-between and may provide utilities like hot-reloading or serving to help you preview the website.

From the requirements you’ve posted, I can gather the following:

  1. Load content in yml format.
  2. Apply a template that uses curly brace syntax as placeholders.
  3. The user updates by committing their yml file into a forked repo and pushes to GitHub or GitLab, where it gets hosted on GitHub/GitLab pages.

For 1, I would suggest: https://github.com/nodeca/js-yaml
For 2, it looks like this matches your desired syntax best: https://github.com/shinesolutions/jazz
For 3, I would suggest to, by default, save the generated HTML/CSS files into a docs folder so that GitHub pages can detect it and host with minimal work on your part. The tradeoff here is that the user would need to build their website locally and commit those files directly into the forked repo. Another option is to push the generated files into a gh-pages branch separate from the main source code. *

* This “User can update and it updates on the site” part requires several steps to handle the deployment.

Update: Here’s a Glitch project that shows the yml->html generator flow: https://glitch.com/edit/#!/remix/rainbow-van


#3

Thanks so much, will try it out!

Thank you!