Long story short — Yes, I built a Sheet2Site alternative because I wanted to have/give more power to users to design their website from Google Sheets data and of course for an affordable price. We got paying customers, opened to positive reviews and got good traction. Its primarily both #nocode and #nodesign website builder for Google Sheets.
Feel free to checkout Siteoly — The fastest way to build websites
Follow me at https://twitter.com/upen946
See some sample designs at https://content.siteoly.com/card-designs
I still respect the tremendous work Andrey has put in this space. But I wanted to provide more value to users and thats why I built Siteoly — The powerful website builder using Google Sheets.
It’s often a tough challenge to build a website with dynamic data like for example — “Building website from Google sheets” or “Building website from Firebase data” or for that matter any data source like Airtable, Excel or Text Files.
If you don’t have Sheet2Site or Siteoly or similar products, below are the series of steps you would need to build something like Sheet2Site.
(Assuming you want to turn google sheet into website)
- You need to understand how Google Sheet API works (if you are lazy and not worried about publishing your sheet to web, there are many ways to extract the data from Google sheets via NPM packages, PIP packages and Google itself provides a couple of ways on how you can get data in the form of JSON)
- But most people don’t like to publish the sheet to web and would like use either API/key or OAuth access. So, now it’s getting deeper.
- Once you play around with API/Key or OAuth access , there are a few limitations because Google throttles your request both per project and per user access.
- To use google sheets as database for website and also to handle huge traffic, you need to implement a caching layer in between. (Who knows if your site becomes suddenly popular on HackerNews or ProductHunt, you cannot afford to loose traffic and users because of Google throttling your request)
- Now that you are able to call Google Sheets API and get data from Google sheet to website, you need to start working on displaying this data from to your website.
- Once you have the data, it is easier to create a webpage as you need using any of the frameworks. If you use a template engine for your pages, all you have to do it map the data as needed to the template.
Two targets achieved so far
- Pull data from google spreadsheet to website
- Display data from google spreadsheet on website
Lets see what else is needed
Now that you pulled the data from Google sheets and displayed on website, you need to work on more add ons like — Adding mailchimp integration, adding filters to filter the data on website, adding search functionality and mobile responsiveness as well.
Mailchimp integration
Filters & Search — Dynamically coming from Google sheets data
- Adding search component to your website needs some good amount of ground work to make it work at scale. Same is the case with filters.
- The importance of mobile responsiveness needs no introduction and these days everyone is following a mobile-first approach as well.
Now coming back to our story of using Google sheets as a database for website — This is what Sheet2Site and Siteoly both automated already.
But the problem here is — With Sheet2Site, you are first selecting the template (design) and then connecting your data to the design which is primarily not the case in real world. Image you are developing or designing an application with code and you donot decide your data based on UI/UX design. Typically you will have your database first and UI/UX must be flexible enough to work with data. Just because you are changing the UI of website shouldn’t mean you need to change your data.
Sheet2Site needs — “Anyone with link can view” access to your Googlesheet site but why would you provide access to anyone to view your data. In a real world, this is like “Any one with my database connection credentials are okay to see my data”. With Siteoly — its purely secured access to your data. You don’t need to provide any viewing rights.
Sheet2Site needs Add-Ons to be installed on your Google Sheet. With Siteoly, its purely plug and play. Plug in your sheet and you are good to do without any installations.
Sheet2Site detailed pages are of same design always. There is no way to provide a different look/design for an About US page vs Card Click page. Both pages (in fact all detailed pages) need to have same design. With Siteoly, each page can adapt its own design out of several detailed design pages.
Sheet2Site is heavily priced at about $700-$1000/year
Siteoly is priced at about $8/month for a single custom domain.
The additional power that Siteoly gives you are below
- Minutest of the minutest details can be configured as needed. Its all small blocks and components similar to Lego bricks, you can build any UI that you can imagine.
- Extreme configuration for Navigation Bar is possible. You can set the menu items either to centre or to right. Mobile view is automatically taken care.
- Logo — If you have a logo for image, Siteoly can pick the logo from Google sheets data and display it on website. If you don’t have a logo, don’t worry — Siteoly can handle this for you. You can pick a font, color and set Text for your logo and your logo will be automatically displayed from the font, color and text you chose. Isn’t it cool?
- The Navigation bar can be configured either to stick to page as you scroll down or can be static as well.
- You have a lot of variations in Header (this is the place where you can show a hero image/hero text — The main image and text). You can select how to display the image — can be set as background image, right side image or left side image. In fact, you can also get a modern look by displaying image on top of image to get a highlighted view.
- Then comes the body. This is the place where you can show the cards data. A lot of work has been put on this. You can add cards data along with a pre-cards content (content that displays before the cards) or post-cards content (content that displays after the cards)
- A lot of variations in footer — Menu can be placed to left , centre or right, along with copy right text and social media links.
- Detailed page variation — There are multiple designs you can pick on how each detailed page can appear. Each detailed page can have its own design.
- Card click action — You can define how to show the detailed page when a card is selected — You can redirect to another page or You can just expand the card or You can just show as a Popup.
- Any kind of content on any page — Yes, you can add html content, iframes, forms, maps, javascript on any page on the website. (Below sample using uCalc calculator, Google Maps)
- Dynamic blocks of content possible in home page. (as mentioned in point 6). You can add unlimited blocks before or after the cards. This could be a signup form, or a map or a table or anything.
- Supports JSON-LD (JavaScript Object Notation for Linked Data) — This mean you can add lot of SEO based tags/content on each detailed page. This will help primarily to get your results shown in Rich Snippet format in Google Search results.
- Supports complete CSS styling of all elements in NavBar, header, Footer, Body-Cards and Body-Text. Yes, you can add a specific CSS class name and add the css for this className inside the sheets.
- For Tailwind Fans — Supports all Tailwind components on both home page and detailed pages. So, you can just copy your Tailwind components on the page anywhere.
- Best page score from Google page speed test
The point here is the mental model of “Would you pick your UI/UX design first and then data” or “Would you pick your data first and then think of UI/UX design” ?
One more sample :
Another sample (Pinterest Masonry style cards)
(Building a sheet2site alternative wasn’t the final goal, building a more powerful and robust website builder on top of Google sheets data is the main goal)
Roadmap:
- Airtable integration so that you can build websites using Airtable data as well. This will work similar to how you can build websites using Google sheet data.
- Locked/Unlocked cards
- User Sign In/Sign Up process — This will allow you to secure your site access to only signed in users. At the same time, you can send the users to your favourite email tools like Zapier and Integromat and send users details to other platforms like Convertkit, Mailerlike, Mailchimp etc.
Feel free to checkout Siteoly — The fastest way to build websites
Follow me at https://twitter.com/upen946
