11
19 Comments

How to build a website builder

👶🏻Noob dev question: Looking for tutorial-style blog posts or articles on how to create a website builder from scratch (in the likes of Carrd, Squarespace, or even Sheet2site) - anyone came across any?

Basically the usual things that such platforms can do:

  • users can authenticate and create accounts
  • in their accounts they can select web elements/blocks for their site, edit copy, upload images
  • publish their site to a subdomain
  • pay for monthly subscription for custom domain, analytics etc

Could be using the usual HTML/CSS/Javascript/PHP, or Ruby on Rails, Jekyll, or React / Gatsby...

Wanting to build a website builder on my own for learning and potentially as a side hustle, but just need a bit of reference on how to start. Amazingly, googling "how to build a website builder" didn't return much.

  1. 3

    I think if there were articles out there describing how to build website builders, then you'd know the space is getting crazy saturated.

    You're talking about building a real piece of end-to-end software! - it's supposed to be hard, it's supposed to be the kind of thing that requires specialist experience - so don't be turned off by the fact that there's no resources out there neatly explaining how to do it in 10 steps :)

    You've mentioned a bunch of boilerplate functionality that all SaaS products will need, like user auth, upload images etc - those I will set aside as that sort of self-contained pattern will be covered in tutorials that you can google.

    What I will comment on is the nuts and bolts of the site-builder functionality itself, how I might approach it (at a basic level) and this may help you in either further research or getting started in building.

    I'm assuming you are familiar with the MVC pattern since you mention Rails.

    If I was building this in Rails, I would probably have:

    Component model - these would be the individual component templates that make up your library. I guess here you would have to hold some template code in the model, like a snippet of HTML. These I would most likely populate to the DB via a rakefile. Users would not be able to add Components, only admin users would be able to.

    Site model - this would hold config such as the preferred subdomain. The site would belong to a User. Has many Layers.

    Layer model - belongs to Site and belongs to Component. A Layer is what a User would add to their Site. It would hold some kind of local config that overrides the global config in Component (e.g. different text, different font, different colours). It would also hold a sort order so that you can display the Layers in the order the User wants.

    That's pretty much the basics.

    This is obviously a massively simplified example with only one level of granularity; Layers. In reality, a site builder tool might have multiple levels, so within Layers you could nest other Layers... after which point the name Layer might not be so contextually correct anymore 😅

    Hope that gives you a bit of a jumping off point.

    1. 1

      Wow this is really useful, thanks so much @yongfook! I asked a few Rails devs and your answer is by far the most helpful. Yes, a jumping off point is what I needed to research and experiment more on my own.

      Coincidentally I'd been reading your blog posts about Montage and Promomatic which I understand you made in Rails. Taking lots of inspiration from it. So thank you for that too, for helping out a Rails noob here

  2. 2

    Hello Jason,
    the goal of my landing page builder was to create a PWA from a spreadsheet, actually is far from good, it's just a POC.
    However this is what I've done:

    1. create a customizable Boilerplate ( the idea is to create a higly customizable site, where you can easily change the layout with just some parameter )
    2. create a frontend where you user can save his preference for the parameters.
    3. create a backend that handle the input of the user in the frontend and use those datas to populate the boilerplate fields .
    4. when the customer deploy the site the backend start a pipeline with a CI/CD tool (maybe jenkins or travis?) the pipeline takes the data used in the frontend to populate the boilerplate and deploy the site.
    5. You customer will enjoy his new site :)
      P.s. my websites are builded with Gatsby

    oh, I almost forgot, this is my POC: www.sheetpages.com

    1. 1

      Love the niche target for marketing landing pages. How is it doing so far?

      Thanks for the broad steps - useful for me to go research further! So you use Gatsby as the site generator? What do you use for frontend?

      1. 1

        not bad.
        Honestly I am not a marketing expert, I am learning step by step, but I am receiving a good number of emails, I am satisfied enough to have started recently.
        My frontend is created with the same boilerplate that I use to generate landing pages, so it's done with React and Gatsby.

  3. 1

    My two cents is that searching for "how to build a website builder" isn't a good way to approach this.

    First of all its to vague, what is a website builder? You could very quickly build something that takes markdown and spits out a website. You could find some JS library which has a nice interface for writing markdown so your users don't need know it. This could be hacked out in a couple days. Or, are you looking at something much more complicated, where people drag an drop components, can build interactive forms use complicated theming. That on the other hand would take months.

    Really what you need to do is break your project down into a minimal set of features and then set out to build each of those features. The kind of stuff you want to be googling is "How to authenticate in a web app", "JavaScript library for wysiwyg HTML editing ", "HTML template library". i.e specific things to meet those sub goals.

    1. 1

      @faris ooh nice yes yes breaking it down the way you did is exactly what I need at this stage. It's such a big elephant to eat that I don't even know how to start, i.e. the right key words to search, hence the vagueness. So thanks for the google key words.

  4. 1

    I did publish http://spreadsheet2site.com/ as a result of a tutorial series I was running on a newsletter of mine. It's using Spring and Kotlin though. Uses Google sheets for the data.

    Link to tutorial: https://codeboje.de/spring-boot-google-sheet-api-tutorial-app/

    1. 1

      @azarai oh sad, I don't know any Spring or Kotlin at all, and with the project already daunting enough to attempt, I can't imagine having to learn another lang for it. But thanks for sharing in any case! Maybe I can learn the broad principles from the article and try to apply it to my project. 😊

  5. 1

    There are lots of moving parts to it. I was in same place as you are about a year ago.

    I can say this since I also built one myself. Though not sure if it can be said as page builder entirely, it started small and eventually came to be what it is today.

    I started with learning SailsJs (https://sailsjs.com). Besides Sails comes with a good boilerplate of auth, email, Stripe etc.

    Basic understanding of frontend library like Vue will also help things move forward.

    In my experience, get started and then build on it every day.

    1. 1

      @PingDemand Useful resources! Thanks for pointing out SailsJS and Vue.

      Is your page builder Tugify? I went to check it out - it's pretty sleek! Love the differentiator of scheduling appointments. Can imagine lots of service-based SMBs like barbers, salons or dentists find this useful. So you used Sails for backend, and Vue, Bootstrap, jquery for front end?

      1. 1

        Thanks, yes working professionals is what I am trying to target. It's Vue/Buefy+Bulma for frontend, jQuery only part that comes with sails.

  6. 1

    Can't you use GrapesJS with Rails backend? :-) Basically whatever is created in the builder scripting, save with Rails, boom you have your product :-)

  7. 1

    First you need to learn how to build a SaaS.
    Then you need to learn how to build a page builder. I heard it's not as easy as it sounds, honestly.
    Third you need to learn something about DNS.
    I work with Laravel and I can say you can easily build a SaaS app with it. And also implement the "publish your website with your own domain name". (hint: users can register in your app and have a custom subdomain: myshop.yourappname.com. Then, using a DNS A or CNAME record, can point their own domain name to the subdomain).
    The hardest part, in my opinion, is building the page builder. It will be 100% Javascript. But you can take a look GrapeJS and reverse engineer it.

    Anyway, for building a SaaS with laravel and more laravel tutorials, I recommend you codecourse.com.

    1. 1

      @RaduC nice thanks for the DNS pointer! I was scratching my head about the site gen part, so having keywords like that helps. Yes, saw GrapeJS when researching - looks like a strong contender! :)

  8. 1

    In my opinion a great place to start is https://github.com/artf/grapesjs
    This also has a very visual website where you can see it in full action - notice the not so subtle similarities to Webflow. Read through the readme and the code, if something doesn't make sense google it or go to freecodecamp.com
    Good luck - best of wishes to your project! Cheers!

    1. 1

      @ebenryanmallory awesome thanks much! I chanced on this during my google search - it's definitely one of the contenders for the site builder. Thanks!

  9. 1

    I've been looking into building something similar and have found a few projects on GitHub which try to solve this problem.

    Here are links to a few.

    https://github.com/elementor/elementor
    https://github.com/infinum/phrasing
    https://github.com/pushtype/push_type

    I've looked at the code as a reference, but haven't found an ideal way to approach this problem as yet.

    1. 1

      @maphumulops cool thanks!!! Familiar with Elementor, but not seen the others. Will check it out! That solves the site builder aspect.

      I'm also looking for site generation solutions. Have you come across any before?

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 15 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments