Learning to Code June 21, 2020

How to build a website builder?

Jason Leow @jasonleow

👶🏻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. 4

    Well, we are building a site builder that can build sites straight from Google Sheets/Airtable.

    For example, this page(Work in progress) is built from Google sheets using NoCodeSheets

    There is no direct way or blog which can answer on how to build a landing page builder like carrd or squarespace as far as I know. Things like carrd, squarespace looks simple but that is the result of years of effort. So, start somewhere , may be create a couple of landing pages manually and then try to programatically render content from configurations.

    For example as @volkandkaya said sometime it takes months and apparently his product Versoly took about 18 months with full time of 2 people. So, you can imagine the efforts and the space is overcrowded as well.

    In short, if you are considering this as a weekend project or side hustle, please rethink again. There is lots of efforts required.

    But, if you are willing for a long term game, yes, jump in.

    1. 1

      @upenv thanks for sharing. I did sign up for nocodesheets previously - love the product.

      Noted your words of caution. I already make websites manually for customers, so looking to make something more scalable and automated.

      I'm not worried about effort or overcrowdedness tbh... yeah it might take me triple the time to make it compared to experienced devs, but I'm not in a hurry. Like you said, long term game. Overcrowded market - for general website builders, yes probably, but I'm thinking of eventually niching it narrow for social causes and nonprofit NGOs (a sector that I work in and familiar with), with unique features for them (like managing donations etc). Websites in the sector are terrible.

  2. 4

    Terrible side hustle haha :)

    While building https://versoly.com/ I couldn't find any guides on how to build any of it except the usual auth stuff and that wasn't great.

    Something like https://usegravity.app/ might speed development in that regard.

    Also the stackoverflow questions were completely wrong at times and we wasted so much time trying to follow them especially around subdomains.

    Versoly has taken 18 months full time with 2 people. We have a few features that are overkill for simple builders though.

    1. 1

      @volkandkaya LOL yes "terrible" indeed. Feels daunting I'll be honest, but I'm up for the challenge. Not in a hurry either.

      I take inspiration from folks at Andrey Azimov who built sheet2site. He's started coding not too long before he made Sheet2site too. Just lots of dedication to learn and to hustle. He built in relatively quick, at least for an MVP, so that makes me feel more optimistic to attempt this.

      Isn't it intriguing how no one had really written up a tutorial for this? So rare to find a topic on the internet with so little resources... I wonder why. It can't be that niche a topic, judging from the number of Quora questions asked about it (with poor answers)...

  3. 2

    You won't find such a tutorial, building a site builder like Squarespace or Carrd is a huge undertaking. And there are so many variations on how you could architect it.

    Are all of the pages going to be dynamic? Will they be statically generated? Server-side rendered? Client-side? The answers to these will drastically affect how you would build this.

    As an exercise for learning, this could be a good challenging project to take on.

    But as others have suggested, turning this into a side hustle probably isn't the right move. There are already huge players in the market and you're at a significant disadvantage technically (no offense). If you had some great new architecture that would allow you to undercut the competitors, you could make a compelling case. Or if you have some famous designers creating the themes, that could be another good case.

    Unless you've got some big innovations in mind, that is a market I'd personally avoid.

    1. 1

      @wicked_prophet thanks for the guiding questions. Useful to help guide my thinking. Will research more and think it through. For now, I've been interested in static sites for some time, looking to explore more into it. So probably static sites for a start, and server-rendered.

      Yes, it's an overcrowded market for sure. Especially if it's just a general website builder. But taking inspiration from Sheet2site and The Church Co - i think a combination of niche features for a narrow slice of users in a specific industry might still work. I don't feel like I need to capture everyone who needs a website tbh. I work on social causes and nonprofit NGOs a lot, so am thinking of something localised (in Singapore) and targeting charities, for a start. They do have specific use cases that are unique to the nonprofit sector, so perhaps that can be a selling point.

      But all that is still future talk hah, things can evolve. Right now I already make websites for them, so making a website builder feels like something natural and next stage to attempt.

  4. 2

    IMO, it's too complicated side hustle. Believe me, it's better to offer web design service using other web builder. It will make quicker money and less stress.

    1. 1

      @Jondeporta yeah I realised it's complicated but I'm up for a challenge haha. I already make websites manually for clients, so this feels like the next stage to take things to.

  5. 1

    Hey Jason,

    I don't mean to discourage you at all, but I think it's important to set realistic expectations for yourself so you don't lose motivation in your learning journey.

    Creating something like SquareSpace for instance, even a very stripped down version, from scratch would be a huge undertaking requiring you to be a skilled full-stack developer.

    Based on your question I'd suggest trying to focus more on the fundamentals first, HTML/CSS/JS and from there a backend language like PHP/Node etc.

    From there I'd start with a few smaller projects such as building out custom sites for clients as a freelancer that will give you some more varied experience, by solving other people real problems you'll quickly start to learn more and figure out all the things you didn't even know, you didn't know.

    I know that's the least exciting answer anyone could give you, but you have to, unfortunately, get through the more tedious stage of learning before you can build the really exciting stuff and even then, you can never know it all, you will still have your strength and weaknesses and will need to lean on other peoples open source code and get help from other developers.

    I've been a developer for about 6-7 years now and building a website builder from scratch would still be no easy task.

    The thing is, as a working developer you won't always be able to find a tutorial on how to build what you need to and that's really the skill. Problem-solving and figuring out how to build stuff before you ever even open your code editor.

  6. 1

    A good start could be to code your own templating system. From there you can incrementally add new features and see where it's getting hard. You can also check how open source static site generators like Hugo works to get ideas

    1. 1

      @Memos thanks! Great suggestions, will try it out. Yes, quite open to using open source static site generators like Jekyll actually... but resources and tutorials on how to create a website generator out of it are scarce...

  7. 1

    Take a look at this:
    https://respondcms.com/respond-7/index.html

    They have stopped support for the website builder now, but the code is still available for download. This could, maybe, help you figure out how things are pieced together.

    1. 1

      @jobscout thanks Neal! This is really useful! :)))

Recommended Posts