But building AI workflows is still hard for many users. Most tools need code, a complex setup, or long training.

Activepieces makes this much easier. It's an open source tool that lets anyone create smart workflows with a simple visual builder.

You can mix AI models, data sources, and systems without writing code. This makes automation more open to teams that want to work faster and cut manual effort.

In this guide, we will learn what Activepieces is, how to work with it, and how to deploy our own version to the cloud using Sevalla.

What We’ll Cover

• What is Activepieces?

• Understanding the Activepieces ecosystem

• Building a workflow in Activepieces

• Deploying ActivePieces on the Cloud using Sevalla

• Real-world examples

• Conclusion

What is Activepieces?

Activepieces is an open-source automation platform that focuses on ease of use.

You can host it on your own server or use it in the cloud. The platform uses a clean flow builder where each block represents a step. These blocks are called pieces.

A piece may call an API, connect to a tool like Google Sheets, run an AI model, or wait for human input. By linking pieces together, you can build workflows that act like agents.

They can listen to events, run analysis, create content, evaluate data, or push results into other tools.

Understanding the Activepieces Ecosystem

The main goal of Activepieces is to let both technical and non-technical users build workflows that include AI. It gives a simple visual interface but also has a strong developer layer under the hood.

Developers can build new pieces in TypeScript. These custom pieces then appear in the visual builder for anyone to use. This keeps advanced logic invisible behind a friendly interface.

The platform has a growing library of over two hundred pieces. Many come from the community.

They include common tools like email, Slack, Google Workspace, OpenAI, and Notion. There are also pieces for reading links, parsing text, calling webhooks, or waiting for timed events.

The library grows fast because anyone can contribute new pieces. Each piece is an npm package, so it fits well into the wider JavaScript ecosystem.

Activepieces also supports human input. For example, a workflow can pause and wait for someone to review a message before sending it. It can also collect answers from a form.

These options make it possible to build flows that mix automation with human judgment. This is useful in tasks where risk or correctness matters, such as compliance checks or approval flows.

A major part of the platform is its AI-first design. It includes native support for popular AI providers. You can build agents that analyse text, rewrite messages, classify content, extract fields, or make decisions.

You can even ask the AI to clean data inside a flow, without needing code. This makes it easy to use AI to speed up work and remove repetitive steps.

Building a Workflow in Activepieces

Every workflow begins with a trigger. A trigger is an action that starts the flow.

It may be a new message, a new file, a web request, or a timed schedule. After the trigger fires, the flow runs step by step. Each step is a piece you choose from the library.

The builder shows the flow in a simple vertical layout. You can add branches, loops, retries, and data mapping.

Data mapping is the process of telling the flow how to pass information from one step to another. It uses a simple interface where you pick fields from earlier steps and connect them to new ones.

When AI pieces are added, the workflow becomes more powerful. For example, you can pass text from a form to an AI model and get a summary.

You can pass a document link and extract the main points. You can ask the AI to answer a question or decide if a message fits a category. These results then move to the next step, where they can be stored or sent.

Deploying Activepieces on the Cloud using Sevalla

To use Activepieces, you can either install it on your computer (not recommended due to the complex setup), buy a cloud subscription, or self-host it.

If you prefer to install it on your computer, here are the instructions.

Self-hosting gives you full control and is usually preferred by technical teams who want to keep sensitive data in-house.

You can choose any cloud provider, like AWS, DigitalOcean, or others to set up ActivePieces. But I will be using Sevalla.

Sevalla is a PaaS provider designed for developers and dev teams shipping features and updates constantly in the most efficient way. It offers application hosting, database, object storage, and static site hosting for your projects.

I am using Sevalla for two reasons:

• Every platform will charge you for creating a cloud resource. Sevalla comes with a $50 credit for us to use, so we won’t incur any costs for this example.

• Sevalla has a template for ActivePieces, so it simplifies the manual installation and setup for each resource you will need for installation.

Log in to Sevalla and click on Templates. You can see Activepieces as one of the templates.

Click on the “Activepieces” template. You will see the resources needed to provision the application. Click on “Deploy Template”.

You can see the resource being provisioned. Once the deployment is complete, go to the Activepieces application and click on “Visit app”. Enter your name, email and password, and you will be taken to the dashboard.

Click on “New Flow”. You can either create a flow from scratch or choose one of the many templates Activepieces offers.

Let's pick the “LinkedIn content idea generator” template.

Click on “Use template”. You will see the workflow generated for you. You can also add/remove components based on your requirements.

You will see the option to update each block of the workflow. You can create connections to your email, Google Sheets, and so on, to integrate them into the blocks.

In the rank news block, it will ask you to choose a model and add your API key. For example, you can find your OpenAI API key here. You will also see a pre-built prompt template ready for you to use with your workflow.

Great! You now have a production-grade Activepieces server running on the cloud. You can use this to set up all your workflows.

Real-World Examples

A sales team can automate lead enrichment by passing new leads through an AI model. The AI extracts company size, industry, and intent. The results go to a CRM. The team saves hours of manual research.

A content team can create a writing assistant. It gathers ideas from a form, generates outlines using an AI model, and stores drafts in Google Docs. Editors then refine the text.

A compliance team can process long documents. They upload a file, an AI model extracts key rules, and the workflow sends a summary to reviewers. This makes it easier to track changes in regulations.

An operations team can watch for new tickets in a helpdesk system. AI summarises the ticket. The workflow checks severity and sends it to the right team. This speeds up response times.

Conclusion

The idea behind Activepieces is simple: automate work that slows you down. Mix AI with your tools. Build flows visually. Let both technical and non-technical users create automation. This helps teams move faster, reduce errors, and stay focused on meaningful work.

The rise of AI means teams will use more specialised models. They will also need smooth ways to link these models with their daily tools.

No-code platforms like Activepieces give teams control and speed without asking them to learn programming. The platform keeps improving with new pieces and stronger AI features. As the community grows, the number of available integrations will rise.

Hope you enjoyed this article. Find me on Linkedin or visit my website.

I have recently started being active in a couple of online maker communities, and I've met a lot of talented folks who are building amazing products.

One thing that has stood out to me while engaging with these makers is that many of them are not developers – in the sense that they don't write code to build their products.

Instead, they use services that allow you to create apps and websites without having to touch any code, or in other words, no-code tools.

I never really spent time learning about these tools for a couple of reasons: first, as a developer, I thought I had enough skills to create whatever I wanted with code. The second was the cost – why would I pay for something like Webflow to create a website when I could write my own code and get it done without paying anything?

But the more time I spent learning about the no-code community, the more I realized that there's something important here that I have been missing out on. Even as someone who knows how to write code.

The critical thing for me is that no-code allows you to quickly iterate through ideas and bring them to life at a much faster pace than having to write code.

Thinking about it now, the amount of time that I have saved over the past couple of months creating things with no-code platforms and the no-code automation tools has been much more valuable to me than the small cost.

So, in short, it took me very little time to understand the enormous amount of value that I get out of these tools now, even as a developer.

As a result, I have decided to summarize my no-code learnings from the last couple of months in this article. I hope to help others who want to create their ideas – whether you don't know how to code or you're a developer who's open to learning about these no-code tools.

So let's get started with the first and most common question.

What is No-Code?

There is no single answer to this question, as it can mean different things to different people. In general, however, "no-code" refers to a type of software development approach that describes a step away from writing code by hand and using more automated tools.

This process can include using code generation tools, code libraries, or interactive applications that make it easy to create complex applications without touching a single line of code.

No code can be a great way to prototype and test new ideas. Using a platform that allows you to create and deploy applications quickly, you can rapidly test out your visions and see how they work in the real world. This then gives you the power to iterate through and validate your ideas.

Now that we have a better understanding of no-code, let's look at the next most common question.

Which No-Code Tool Should I Learn?

With a quick search, you can find tons of databases and websites that list no-code and automation tools that you can use for your next project. Here's a no-code tools list, for example.

This is a massive benefit for us, as there are a lot of advantages to having a lot of options in the no-code space. You can find the perfect platform for your needs, quickly get up and running, and avoid having to learn a new language or framework.

But it can be challenging to know which one is the best for your needs. With so many options, it's tough to keep up with all of the changes in the space. Additionally, it can be hard to find the right community and support network.

So to make this easier, I have broken the available options into multiple categories, such as website, app, and form builders. Then, I have selected the most common ones that I have come across for each category, hoping to make it easier for you to decide which one to go with.

No-Code Website Builders

Webflow

Webflow is a drag-and-drop website builder. It has a simple and user-friendly interface that allows you to design and build websites without touching a single line of code.

Webflow also comes with an extensive library of pre-made elements and templates that make it easy to go from 0 to 1 in just a couple of hours.

As mentioned on their website, Webflow is being used by more than 3.5 million designers and teams to create their websites without knowing anything about writing code.

Webflow Benefits:

1. Easy to create beautiful websites
2. Powerful CMS for managing dynamic content

Webflow Pricing Plans:

1. Free: Always free
2. Basic: $19/month or $12/month annually
3. CMS: $20/month or $16/month annually
4. Business: $45/mo or $36/month annually

Webflow Screenshot

Bubble

Bubble is another online design tool for building websites, landing pages, and online stores. Similar to Webflow, Bubble is also a no-code platform for building websites without having to write any code.

Bubble allows you to make your websites and apps fully functional without touching a single line of code.

I personally have worked with Bubble and find it an excellent tool for beginners and experts alike.

Bubble Benefits:

1. Powerful workflows for creating fully functional web apps
2. Many plugins and integrations for third party services

Bubble Pricing Plans:

1. Free: Always free
2. Personal: $29/month or $25/month annually
3. Professional: $129/month or $115/month annually
4. Production: $529/month or $475/month annually

Bubble Screenshot

Bubble vs Webflow

So you might wonder which is better, Webflow or Bubble?

Well, Webflow is better suited to developing lightweight web pages and relatively simple web apps. Bubble is for online projects that are more complicated and more customizable and progressive web apps.

Bubble's plugin engine and workflows make it easy to add additional logic to your website, making it possible to create more sophisticated applications.

On the other hand, Webflow makes it easier to design more sophisticated UI and UX designs, while Bubble takes a more technical and data-driven approach to web development.

If you are going for a simple web page, a blog, or a landing page for your product, service, or idea, I would suggest going with Webflow. But if you're doing a project that deals with data and requires workflows and plugins, Bubble would be a better choice.

I have written a separate blog post for a thorough comparison of Bubble and Webflow if you are still not convinced which is a better option for you.

Now that you've hopefully decided on which website builder to go with, let's move on to the next step. For many developers, the next step is to connect different apps and automate workflows.

No-Code Databases

Notion

You may have already heard of Notion, as it's gained a ton of popularity in recent years. This tool is a flexible workspace that adapts to your use case, making it easy to organize your ideas and projects and store information.

Notion's flexibility makes it an all-in-one tool for managing data for many no-code developers. It makes it easy to create and share templates, use different components to store various data, and even lets you publish your content to the internet, which makes it a website builder.

You can also integrate Notion with your projects, such as Bubble, and use it as a dashboard for managing your data.

Notion Benefits:

1. Very user friendly
2. Easy learning curve
3. Good for collaborative work

Notion Pricing Plans:

1. Free: Always free
2. Personal Pro: $5/month or $4/month annually
3. Team: $10/month or $8/month annually

Notion Screenshot

Airtable

Airtable is a part spreadsheet and a part database making it very easy to organize and manage your data. It's very simple and easy to use while being very powerful.

Airtable makes it easy to create different views such as Calendar, Forms, Kanban, and Grid, making it suitable for many use cases.

Similar to Notion, you can integrate Airtable with different tools to make even more powerful workflows for your project.

Airtable Benefits:

1. Easy to create complex databases
2. Various database schemas available

Airtable Pricing Plans:

1. Free: Always free
2. Plus: $12/month or $10/month annually
3. Pro: $24/month or $20/month annually

Airtable Screenshot

No-code form builders

Typeform

Typeform is a web-based form builder that allows users to create aesthetically appealing forms. This builder is mainly used for interactive surveys, with questions structured so that respondents may readily answer them.

I have found Typeform to be a great tool when I come up with a new project idea and would like to get some feedback for validation before jumping in to create the project. In these cases, I simply write a couple of questions on a form and send it to my potential users, asking what they think.

Typeform Benefits:

1. Easy to create fun and beautiful forms
2. Very easy to export your form data

Typeform Pricing Plans:

1. Free: Always free
2. Basic: $29/month or $25/month annually
3. Plus: $59/month or $50/month annually
4. Business: $99/month or $83/month annually

Typeform Screenshot

JotForm

Jotform is a sophisticated online tool that allows anybody to quickly build unique web forms. Its user-friendly drag-and-drop interface makes creating forms a breeze, and it doesn't need you to write a single word of code.

JotForm is very similar to Typeform, except for a couple of minor differences that may or may not make a difference to you. At the end of the day, I would suggest checking both their offerings before deciding which one would be the better option for you.

JotForm Benefits:

1. Multiple question/input formats
2. Can add custom themes and branding

JotForm Pricing Plans:

1. Free: Always free
2. Bronze: $29/month or $24/month annually
3. Silver: $39/month or $29/month annually

JotForms Screenshot

No-Code Automation List

Zapier

Zapier is a simple tool that allows you to connect different applications and create custom workflows to automate various parts of your business. It's free to use, but you can pay for more features.

Zapier is one of my favorite tools as it provides a lot of integrations out of the box and allows you to connect many different services and create custom workflows.

For example, one of my common automation with Zapier is when I want to get some validation feedback via survey forms. I have a custom flow using the Typeform and LogSnag integrations that allows me to track every time I get a new survey on Typeform and send it to LogSnag to track these surveys and get a push notification as soon as they happen.

Zapier Benefits:

1. Thousands of integrations and pre-built workflows
2. Very flexible, versatile, and easy to use

Zapier Pricing Plans:

1. Free: Always free
2. Starter: $29.99/month or $19.99/month annually
3. Professional: $73.50/month or $49/month annually
4. Team: $448.50/month or $299/month annually
5. Company: $898.50/month or $599/month annually

Zapier Screenshot

Make

Make, formerly known as Integromat, is another automation service for automating tasks and workflows to apps and systems.

Make works by connecting your favorite apps/services to build a scenario that automatically transfers and transforms your data. Simply design a scenario that watches for new data in one app/service, configure the following modules for the required end result, and Make will do the process for you.

Like Zapier, Make provides many plugins to make the integration process as easy as possible.

Make Benefits:

1. Very affordable pricing plans
2. Option of adding custom code

Make Pricing Plans:

1. Free: Always free
2. Core: $10.59/month or $9/month annually
3. Pro: $18.82/month or $16/month annually
4. Teams: $34.12/month or $29/month annually

Make Screenshot

There are tons of other no-code tools for many specific use cases, but based on my discussions with the makers in the no-code space, most are satisfied with the services in this no-code tools list.

Forms make it easy to collect surveys and validate your ideas. Website builders make it extremely easy to create static or even more complex web applications to recapture the list. Finally, automation tools make it possible to create custom workflows and automate the tasks for these websites.

Conclusion

Before I finish this post, I would like to introduce another no-code tool that I have been working on for the past couple of months.

LogSnag

LogSnag is a simple event tracking tool that makes it easy to track important events within your projects. For example, with LogSnag, you can track new signups, subscriptions, payments, or anything else you may want to keep an eye on within your project.

LogSnag provides plugins for other services such as Zapier and Bubble to make it easy to add to your project. In addition, it sends you push notifications when something important happens, creates a timeline of events, and provides simple analytics to know how your project is doing.

LogSnag Screenshot

LogSnag Benefits:

1. Push notifications on all of your devices
2. Simple charts and analytics

LogSnag Pricing Plans:

1. Free: Always free
2. Hobbyist: $9/month or $7/month annually
3. Startup: $16/month or $19/month annually
4. Professional: $59/month or $49/month annually

I hope that you have found this list of tools useful. I highly suggest you take a look into these services.

Most of the services listed here have a free tier that you can use to learn more about the product and decide whether it's the right fit for you before paying anything for the service.

In this article, I will provide you with a list of four free website builders you can choose from when creating your websites.

Here is the complete list. If you find an option you like, then click on the link and it will take you to that section of the article.

1. Wix
2. Weebly
3. SITE123
4. Carrd

Wix

Wix was founded in 2006, and it is a very popular free drag and drop website builder.

The free version comes with the following options:

• Up to 500 MB (megabytes) of storage and bandwidth
• Assigned URL: accountname.wixsite.com/siteaddress
• Wix ads appearing on every page

You can sign up using an email address and password or with Facebook, Google or Apple.

If you want to create a new website, you will be walked through a questionnaire to create the basic setup.

You have the option to design your website choosing from 100's of templates and drag and drop features. Or you can choose the [Wix Artificial Design Intelligence](https://support.wix.com/en/article/about-wix-adi#:~:text=Wix%20Artificial%20Design%20Intelligence%20(ADI,a%20stunning%20site%20for%20you!&text=From%20billions%20of%20combinations%20including,%2Da%2Dkind%20free%20site!) which will create a website for you.

If you choose the [Wix Artificial Design Intelligence](https://support.wix.com/en/article/about-wix-adi#:~:text=Wix%20Artificial%20Design%20Intelligence%20(ADI,a%20stunning%20site%20for%20you!&text=From%20billions%20of%20combinations%20including,%2Da%2Dkind%20free%20site!) option, then you will be asked a series of questions on what kinds of design themes and features you are interested in.

Once you choose your templates, then the Wix ADI will create your basic website where you can customize the pages.

You can also see what these sites would look like on mobile devices.

If you choose to use the template editor, you can browse through hundreds of free templates and customize them to your liking. You can also add your own media including videos and images.

When you are finished creating your site, click on Publish in the upper right hand corner of the page.

It is easy to get your website up and running using clean, professional designs and there is no coding knowledge necessary.

Weebly

Weebly was founded in 2006 and it is a free website builder that makes it easy to build blogs, online stores, and personal sites using customizable templates.

The free account will provide the following options:

• SSL security
• Access to the community forum
• Access to dozens of website templates
• Chat and Email support

You can create your own account using a username and password or you can login with Facebook, Google, or Square.

Once you are signed in, then you can choose between a business website or personal.

There are dozens of themes to choose from that you can customize to your liking.

In the Weebly editor, you can add media like videos, images, files and more. You can also add features like social icons, search boxes and forms.

Once you are done customizing your website, then you click on Publish located in the upper right hand corner.

SITE123

SITE123 was founded in 2015 and is a free website builder that gives you access to dozens of templates and layouts to choose from.

The free version comes with the following features:

• 250 MB Storage
• 250 MB Bandwidth
• 24/7 Live chat support

To get started, you can choose what kind of website you want to build.

You can choose your website name.

You can sign up with an email and password or with Facebook or Google. Once you are signed in then you can customize your website.

You can also preview what it would look like in desktop, tablet, or mobile view.

Once you are done editing your website, then you can publish it by clicking on the green publish button in the upper right hand corner.

If you are interested in adding a custom domain for your site, then you will need to pay for that.

Carrd

Carrd is a free website builder where you can browser through dozens of templates and create one-page websites.

You can create a free account by using your name, email, and password.

Once you are signed in, then you can choose from dozens of templates.

You can then modify the template by changing colors, fonts, and adding images.

When you are done editing your page, click on the publish option located in the upper right hand corner.

If you are interested in having custom domains, Google analytics, and custom forms, then you can sign up for the pro version.

I hope you enjoyed this article on free Website builders.

In this post I'll show you how to design four different example apps - a SimpleNote clone, a Twitter clone, a Slack clone, and an E-commerce store. And we'll do it with the coolest new toy released at AWS re:Invent 2020.

Introducing the Amplify Sandbox

Amplify Admin UI is a new low-code interface for building app backends that doesn't require any AWS expertise. However, what many people may miss is that Amplify Admin also includes a wonderful new Sandbox which lets you get started without an AWS account.

This Sandbox is a publicly sharable version of the Amplify Admin UI where you can create and prototype your data models without even logging in to an AWS account!

Currently only the Data sandbox is built out, but over time the other AWS Amplify categories will be made available as well.

When you first enter a Sandbox, you are dropped into a visual builder where you can add your models, enums, and custom types. Mostly, you'll just be creating models.

You can name models, add fields, and specify types (including whether they are optional or array fields), and even add one-to-one, one-to-many, or many-to-many relationships between models.

Further, it even lets you share the data models you create! This means you don’t have to start from scratch each time you create a project, and you can share your data schemas like you share code gists.

Our Four Sample Sandboxes

I thought it would be a great idea to demonstrate how powerful this is by sketching out four example sandboxes that you can use:

• A notes app (inspired by the free note-taking app SimpleNote)
• A chat app (inspired by Slack)
• A social media app (inspired by Twitter)
• An ecommerce backend (inspired by every shopping experience)

How to Create Entity Relationship Diagrams

Amplify Admin UI makes it easy to get going, but it is worth doing some planning before we start.

The time-tested way to do this is to draw entity relationship diagrams. We chose to use Lucidcharts for ours, but you can use any diagramming tool to do this.

The Notes App

This is a minimal app that I personally use every day, so I like it for its simplicity. We have two models: Notes and Tags, and only one many-to-many relationship between them for easy querying.

You could extend this by offering collaborative, role based editing, which is available once you deploy this model. You should also make use of the client-side DataStore libraries to make sure your notes work offline.

You can see the Sandbox here: https://sandbox.amplifyapp.com/schema-design/1c782f02-1fe7-4785-9a02-22a27cc96d0d/clone. Note that we use a bidirectional many to many relationship here between the models, as notes can have zero or more tags and vice versa.

The Slack Clone

Many of us use chat apps for work, so we are familiar with this app use case from the user side.

The new nuances here are that every Message belongs to a Channel and a User, and that each User can both create Channels and join them. So there is an interesting three way relationship between the three primary models.

You can see the Sandbox here: https://sandbox.amplifyapp.com/schema-design/5f863684-fd1e-41b4-bca1-36c2271e21a1/clone. Channel is the most complex model here – notice how we fully utilize all the relationship types available in the Sandbox:

• Channels can have many Users, and Users can join many Channels
• Channels can only be created by one User, and there is no requirement to keep track of what channels any particular user has created
• Channels can have many Messages, but each Message can only belong to one Channel

The Twitter Clone

Social media is often one of the most complex data models to model. We implement the minimum viable social media app – a Tweet and a User model is all we offer.

However the Tweet itself has a complex set of relationships. It has an author User, and a set of likes, replies, and quotes that need to be modeled.

Other modifications you can consider for this app: offering other types of tweets, including polls, images, and videos, building in advertisements, and direct messages.

You can see the Sandbox here: https://sandbox.amplifyapp.com/schema-design/ad5b5b7e-f207-42d1-92b1-0ccef056a26b/clone. Note that recursion is implemented here by modeling likes, replies, and quotes as an array of the respective User and Tweet ID's.

The Ecommerce Store

The stakes are higher when there is money involved. Keeping track of orders and ensuring a great customer experience is paramount.

We model a typical ecommerce backend by ensuring that we have separate models for Suppliers, Products, Orders, and Customers. To get into the nuances of a typical ordering experience, we also include the ability to specify product quantities in a single order, as well as to apply coupons.

Since there are infinitely many variations on the ecommerce experience, we can’t possibly model them all, but I hope that this serves as a good enough starting point. Share your own if you have twists on this concept!

You can see the Sandbox here: https://sandbox.amplifyapp.com/schema-design/aa0e7a61-aa72-4b27-b6db-ea8e2031f95e/clone. Note the sheer complexity of this model is easily handled by the Sandbox's features. One Order can only have one Customer, but a Customer can have many Orders.

When you set this up on the Customer model, the Sandbox is smart enough to automatically set up a corresponding customerID field as a "Relationship Source" on the Order model. This will be very handy for GraphQL queries down the road.

How to Deploy the Model to AWS

Once you are done with your model, the Sandbox prompts you to test locally by downloading it with the Amplify CLI. However, if you just want to get it live on AWS, you can skip that and head straight to the "Deploy to AWS" stage:

Once you hit "Login to deploy to AWS", you're done! Imagine that – you've just created an actual backend data model without writing any code and deployed it straight to AWS. 🤯

From here you can set up further customization, including adding authentication, inviting users and assigning roles, adding authorization rules on each model, creating content with our WYSIWYG editor, and more.

If you want to learn more, Ali Spittel did a great blogpost on how powerful the Amplify Admin UI becomes after you deploy it, whereas this article has been about the no-account-needed Sandbox environment before deploying.

Nader Dabit also wrote about 10 other features you may be keen to try.

With the Amplify Sandbox, it is really easy to model and think through any app backend scenario, so hopefully these examples jog your creativity. If you have any requests or submissions, please let me know!

Sir Issac Newton discovered the law of gravity when practicing “social distancing” during the Plague. What will YOU do? One silver lining of quarantine is that all this free time brings out the entrepreneur spirit and creativity in us.

However, especially because of the quarantine, now more than ever, any new idea or project must have a web site. Traditional CMS solutions like Wordpress, Squarespace, or Wix are difficult to use, look dated, are expensive, or all of the above!

We wanted to create a web site that has a sophisticated look and feel, yet is easy to customize. A non-technical person should be able to edit the source files and see the changes appear on the live web site in a few minutes. Ideally, it should also be free (forever free, not just free-for-now), and can scale to handle millions of visitors if it becomes popular.

Is this possible?

In this short article, I will walk you through a solution based on the Hugo framework, GitHub Pages, and GitHub Actions. You can get up and running with your shiny new website by the end of this article.

It is so easy that my 9-year-old son did it. He now manages a web site for his fictional country called Arenztopia. Check out the back story.

TL;DR

If you just want to get started with a working web site as soon as possible, first make sure that you have a free GitHub account.

Go to this GitHub repository, and click on the “Fork” button on the top right, and fork it to your own account.

Go to your forked repository, and click on the Actions tab. You will see a message like the one in the picture below. Click on the “I understand my workflows …” button.

Go to the Settings tab of your repository, and then scroll down to GitHub Pages. Re-select the gh-pages from the dropdown for the web site to build.

Go to the Code tab of the repository, open the config.toml file, and edit it. Change its title attribute to something else, and click on the “Commit changes” button at the bottom. We need this step to trigger the workflow at the new repository.

Wait a few minutes, go to the “published at” web address at GitHub Pages and you will see the template web site.

Next, you can customize the site by editing the config.toml file and the files in the content folder. Go to the “Add your own content” section at the end of this article to see how. You can check out the instructions for the Ananke theme here.

That’s it for the quick start! In the next several sections, I will explain in more detail the concepts and processes.

Hugo basics

Older generation CMS solutions like Wordpress are too difficult to adapt to new web site designs, and commercially hosted solutions like SquareSpace are too expensive and not flexible enough. Static web site generators like Hugo offer a good balance among features, flexibility, and ease of authoring.

• Hugo web sites can be customized and modified through configuration files.

• New pages and content sections can be written in markdown instead of HTML. That makes content authoring much easier.

• There are many modern design themes to choose from.

• The output of Hugo is a static HTML web site that can be deployed on any low-cost hosting provider.

• Together with static web site hosting services like GitHub Pages and Netlify, they can offer a completely free solution.

The Hugo software distribution is available on all major operating systems. You can learn about it here. But, since we will use GitHub Actions to automatically build our Hugo web sites, we do not actually need to install Hugo software here.

Here is how to do it.

Create a template website

First, select a Hugo theme. There are many. Some are geared toward web sites with one or more content web pages, while others are optimized for blog-like sites with timestamped posts.

Hugo themes

Find one you like, download a zip package or clone a GitHub repo, and unpack the theme into a folder. Let’s assume that the theme distribution is unpacked into a folder called my-theme. The following are commands in a Linux terminal. You could use the Terminal app on Mac or PowerShell on Windows.

Next, create your web site project directory on your computer.

$ mkdir -r my-site/themes

Copy the theme folder into your project.

$ cp -r my-theme my-site/themes

Next, copy the theme’s exampleSite to the project’s top-level directory.

$ cd my-site
$ cp -r themes/my-theme/exampleSite/* ./

Edit the config.toml in the project root directory my-site/ to point to the right theme.

baseURL = "/"themesDir = "themes"theme = "my-theme"

Next, create a GitHub repo called my-site, and push the my-site directory onto its master branch. Here are the steps for uploading files from GitHub’s web UI. Now we are ready to publish the theme example site.

For a Hugo-based system to be useable to a non-developer (or a young developer who has yet to master the command line tools), we must automate the process of building and deploying the static web site.

Automate deployment

In the GitHub project, go to Settings and enable GitHub Pages. Select the source to be the gh-pages branch.

Settings, GitHub Pages

Next, we create a GitHub Actions workflow to run the Hugo command on the source files from master branch, and push the generated HTML files to the gh-pages branch for publication. From the project’s Actions tab, click on the “set up a workflow yourself” button.

Set up a workflow yourself

The workflow is stored in the master branch as .github/workflows/main.yml file. The content of the file is as follows.

name: github pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v1  # v2 does not have submodules option now
        # with:
        #   submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.62.2'
          extended: true

      - name: Build
        run: hugo

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

What happens here is that the web site authors and editors will change content and files on the master branch. Whenever new content is pushed to the master branch, the automated GitHub Actions workflow will set up the Hugo software, run the hugo command, and turn those files into HTML files for a static web site.

The HTML files are pushed to the gh-pages branch of the same repository. They will be published on the specified web address by GitHub Pages as configured.

Notice the cname attribute in the last line. That is the custom domain name we set up with GitHub Pages. If you do not have a custom domain name, just remove this line, and you can access your web site at the domain provided by GitHub Pages.

Now go to the web site, and you should see the theme’s default web page.

The HugoSerif template for one of our web sites.

Add your own content

To change the default theme web site to your own content, you just need to change the files on the master branch. Please refer to the documentation of your selected theme. In general, Hugo templates work like this:

• The web pages are authored in markdown format and the md files are in the content folder.

• Each md file has a header section with properties such as the page’s menu placement, priority, timestamp, excerpt, etc.

• The overall configuration, such as the menu items and properties used by multiple pages, are stored in the data folder.

• Static content such as raw HTML files, JavaScript files, and image files can be placed in the static folder.

In particular, here is how you customize the Ananke theme that comes with our template:

• The config.toml file allows you to configure the website title, social icons on all pages, and the big featured image on the home page.

• All images should be uploaded to the static/images folder.

• The content/_index.md file contains the text for the home page.

• To add pages to the site, you can just create markdown files in the content folder. An example is the contact.md file. Notice that at the top of the file, there are attributes to control whether this page should be on the website menu.

• To add articles to the site, you can create markdown files in the content/post folder. Those are blog-like content articles that have dates and titles at the top. The most recent two articles will show up on the home page.

If you are interested in learning more and see how we did it, you can watch our progress at

• The Country of Arenztopia [GitHub] [Web site]

• Second State blog [GitHub] [Web site]

Good luck and stay healthy!

About the author

Dr. Michael Yuan is the author of 5 books on software engineering. His latest book Building Blockchain Apps was published by Addison-Wesley in Dec 2019. Dr. Yuan is the co-founder of Second State, a VC-funded startup that brings WebAssembly and Rust technologies to cloud, blockchain, and AI applications. It enables developers to deploy fast, safe, portable, and serverless Rust functions on Node.js.

Prior to Second State, Dr. Yuan was a long time open source contributor at Red Hat, JBoss, and Mozilla. Outside of software, Dr. Yuan is a Principal Investigator at the National Institutes of Health, with multiple research awards on cancer and public health research. He holds a PhD in astrophysics from the University of Texas at Austin.

You may hear the terms "No Code" and "Low Code" thrown around by developers and entrepreneurs.

There's a lot of ambiguity as to what these terms even mean. To add to the confusion...

Hacker Noon wants you to ponder The Low-Code vs No-Code Platform Dilemma.

Betty Blocks has scientifically determined that No-Code is at LEAST 4 times faster than Low-Code:

G2 is keen on telling us how No Code and Low Code differ in the RAD world. That’s “Rapid Application Development”, for those who are clearly not RAD enough to know.

Kissflow (a “No Code” platform) isn’t exactly calling Time of Death, but you should know that Low-Code Isn’t Dead Yet, But It’s Not Looking Good.

In the other corner, Mendix (a “Low Code” platform) warns you that the issues with most no-code tools are that they often don’t scale well and integration capabilities are very limited.

Finally, Wavemaker throws its hands up and just asks the straightforward question: No-code vs. Low-code – Is there a difference?

Whenever I see a question headline, I think of Betteridge’s law: Any headline that ends in a question mark can be answered by the word “No". As predicted, Wavemaker takes another 863 words or 5,601 characters to conclude: “no-code platforms are no different from low-code platforms.”

Stop it. Just stop. How is any of this petty squabbling a good use of time? Do you, the reader, feel any wiser reading all this?

To be sure, there are plenty of people with financial incentive to gate-keep “No Code” vs “Low Code” to prop their side up while putting the other down. As are the “arms dealers” who happily feed the flames of both.

“No Code” Tools Let You Code

Look at how common it is to add code to “No Code” tools.

Webflow is the champion of the current generation of No Code hype and organizer of No Code Conf. Even they encourage you to add code snippets for doing everything from styling the scrollbar to updating copyright information.

But it’s not just for small things. The most popular integrations require adding code snippets. If you want to add a Members-only section to your site (for example, to make money off subscriptions, a pretty important use-case), you’ll have to insert Memberful or Memberspace or Memberstack’s code. The more integrations you add, the more you’ll be coding.

There’s Betty Blocks, the “No Code” tool that you’ll recall is convinced No Code is at least 4 times faster than Low Code. Here’s their CEO talking about Using Traditional Coding in Betty Blocks’ No-Code Platform. Here’s their webinar teaching you about foreign keys to set up SQL-like relational database schemas in Betty Blocks. At what point are you really just coding with a fancy IDE?

Does it seem counter intuitive that most “No Code” platforms offer “escape hatches” to do coding? This is just pragmatism at play. Users suffer when platforms don’t let them do the things they need to do, and code is the ultimate malleable interface between the platform and the outside world.

“Low Code” Tools Don’t Require Code

Look at how much you can do in “Low Code” tools without coding.

Zoho Creator calls itself “a low-code platform.” Yet you can run through all 6 videos of it’s How-To series creating, customizing, and sharing your app from scratch without writing a single line of code.

Appian is well known as the first publicly listed “Low-Code Automation Platform.” But when you watch its “Become an Appian Expert Fast” tutorial, you realize the entire 43 minute video doesn't involve writing a single line of code.

Does it seem counter intuitive that “Low Code” platforms don’t require code, but don’t market themselves as “No Code?”

You can listen to John Rymer, half of the Forrester Analyst duo that coined the term “Low Code.” According to him, they market-tested the phrase “No Code,” but “Low Code” simply appealed better with enterprise customers. So "Low Code" it was.

We’re On The Same Side

In general, you’ll find that the “No Code” vs “Low Code” branding mostly differs by vintage:

• Older companies (Appian, Zoho Creator, and others I surveyed were created before 2010) proudly wear the “Low Code” label today.
• Newer ones (Webflow, Betty Blocks, and others are post 2010) consider themselves “No Code” to differentiate.
• Then there are the snowflakes that don’t pick a side. Parabola just wants you to “hand off your routine data tasks by describing them”. Airtable is “part spreadsheet, part database.” Zapier lets you “connect your apps and automate workflows.” All these companies regularly get lumped into this space but try to be above it all.

The truth is all these companies are on the same side – enabling every business user to create practical applications faster and cheaper.

There’s even debate about what to call this kind of user – Citizen Developer? Visual Developer? Power User? NoCoder? - to differentiate them from the traditional developer.

But the world doesn’t split neatly into developer vs. non-developer, technical vs. non-technical.

You could be a nontechnical business owner. You’re not too great with "the computers." But you recognize that work can be cheaper, faster, more reliable and collaborative when done through software.

You could be a technical user. You don't code – but you are the sort who keeps up on the latest iPhone and Android specs. You have a strong opinion on the best productivity apps. You still recognize that there are unserved gaps in the available apps out there. If only you could make an app, you could serve your own need (and that of coworkers and perhaps many others).

You could even be a regular developer, tired of the traditional, buggy, slow way of doing things. You recognize the value of a fast MVP. Your time is best spent taking advantage of commodity UIs, APIs, and workflows. And your dev time is best reserved for the “last mile” of what isn’t yet available.

Regardless of your technical aspect, No Code and Low Code platforms are there to serve you all. They should be evaluated based on their ability to serve your needs, not on the amount of code they may or may not require.

This is not a Moment, It’s a Movement

There won’t be one big winner in all this. Every domain, every industry, every level of the stack is up for a No Code/Low Code transformation. This is a general movement to bring Human-Computer Interaction into the 21st century.

The problems that can be solved with software aren’t bounded by the ~150,000 bootcamp and computer science graduates per year in the US, or the ~30 million developers worldwide (0.4% of the global population).

The bar to beat is spreadsheets. The vast majority of humanity (numbering in the billions) is already very productive with Excel and Google Sheets. How can you do better than a spreadsheet?

You can make data entry and lookup more ergonomic on a mobile phone, our primary computing device. You can automate other processes on data ingress and egress (firing off an email, or sending a text, or scheduling upload processing in the background). You can design better guardrails around error handling, team permissions, and user generated content like photos and videos.

The key is to start with a clear idea of your needs, and work backwards. The buffet of No Code and Low Code platforms are out there for you.

My advice: Stop sweating the semantics. Start creating.