Creating a 'website builder'?

Creating a 'website builder'?
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!


#4

Though this topic is pretty old, it is still useful, especially for such a beginner like me. I’m not tech savvy, but I want to create a website. Recently I’ve found free website builders and they seem to be easy-to-use and to meet all my requirements. But your words sound persuasively and the information given here is understandable, so maybe I should choose another way. Thanks for sharing such a useful post!


#5

To create your own ‘website builder’, you must have a basic understanding of HTML, so that’s not the best way to start.
Using one, on the other hand, is the opposite. They are tools for either helping people get a HTML document or helping in the creation of many or slightly different HTML documents in bulk.

I feel like you are mixing the two, @Tina7788.