I recently noticed a surge in traffic to my old article How to deploy your full-stack application for free? which led me to believe that it has helped many people who are searching for free tools to host their applications. It's always great to see that something you have written is useful to people today. If you haven't read that article yet, I highly recommend you take a look at it. It's a great resource that can help you to get started with deploying your full-stack web application without having to spend any money on hosting.

In this article, however, we will look at how to host your website for free. Before starting, let's discuss the difference between a web application and a website. While they share similarities, they have distinct differences.

Difference between web application and website

A full-stack web application may include dedicated databases and an admin panel, and may even be a standalone SaaS application hosted on a dedicated network. On the other hand, a website can simply be a collection of static pages served from servers or a Content Delivery Network (CDN), with minimal interactive components. A website can use and store its content on a Content Management System (CMS) and if it has a form, the data entered in the form can directly be transferred to an email account without having to need any database or admin panel.

To be more precise, GitHub, being a highly interactive platform with vast amounts of data, qualifies as a web application. Their customers can perform a range of actions, including logging in, signing up, creating, pushing, and sharing repositories. However, a personal blog or portfolio site such as mine at https://aabishkar.info.np is a website. It mainly serves blogs as content and contains just one form, making it a more straightforward digital platform.

How do I host my website for free? And, how you could too!

My website is also hosted for free and has no any admin-panel or dedicated dashboard. In this section, I will share how I host it for free, where I store my contents, how I transfer the user-entered form details to my email, and will also be discussing some other alternatives that you could consider. To keep things organized, this section is divided into three sub-sections: Framework, Hosting, and Content. In each sub-section, I'll provide information on what I use for my website and other available alternatives, so you can choose the best options for your website.

Framework

My website is generally a static site written in NextJS. If in case you don't know, Next.js is a free and open-source React-based full-stack framework that uses powerful Rust-based JavaScript tooling for the fastest builds. NextJS can also be used to create a web application, however, I am just using its Incremental Static Regeneration (ISR) feature for faster rendering and SEO. Some other alternatives that you can use instead of NextJS are:

• GatsbyJS

  GatsbyJS use to be a lot popular just a few years ago, but now it has somehow lost its charm. Still, this can be the best choice for your website. Recently, they also announced NextJS like ISR feature, which they call Deferred Static Generation (DSG). GatsbyJS is definitely worth giving a try for your next website. (No pun intended)

• Hugo

  Their homepage itself says, "The world’s fastest framework for building websites". While I haven't personally looked into the specifics of this claim, it certainly piques my interest. If a tool can help me build my website faster and more efficiently, then why not give it a try? I think it's definitely worth exploring Hugo as a potential option for your next website project.

• 11ty

  11ty is another easy tool that can be used to create a static website. With 11ty, you can create your site using markdown and easily host it for free. It's a great choice for those who want a straightforward and user-friendly solution for building their website.

Hosting

Hosting, as the name speaks for itself is the process of making your website live and accessible throughout the world. There are generally tons of free hosting services available right now. Let's discuss some of the popular ones and what I use for my website below:

1. Vercel

   Vercel, which is also the company behind the creation of NextJS, is an excellent platform for users to host their front-end applications. It provides a user-friendly interface and generous freemium options for hosting client, static, or server-rendered websites. I personally use Vercel to host my own website and I cannot thank them enough for their free-tier hosting service.

2. Cloudflare

   Cloudflare offers a service called Cloudflare Pages, which can be another good option to host your websites for free. It utilizes a global CDN service to ensure fast loading speeds worldwide. Much like Vercel, Cloudflare Pages provides a user-friendly hosting experience that allows you to easily connect your GitHub repository and leave the rest to them. Cloudflare is definitely worth a look if you are considering hosting your site for free.

3. Netlify

   Netlify is another freemium service that you can use to host your static website for free. Although I haven't personally used this platform for any of my projects, it is highly regarded and offers seamless integration with GitHub, allowing you to quickly host your site with minimal effort.

Contents

Contents on the website are incredibly important as it plays a vital role in attracting visitors, making the site engaging, boosting SEO, and much more. It can be a key tool to showcase your portfolio and communicate your message and ideas with your visitors. In essence, it is essential for establishing a strong online presence.

On my website, content such as details about me and my social network links are placed in the codebase itself as a JSON object. This is because, these contents are not something that will be frequently changed, so having them in the codebase itself was the ideal thing to do. However, I store my website blogs on Hashnode, using their publicly available GraphQL API to make them accessible on my site. The reason behind this choice is primarily due to Hashnode's impressive editor, Neptune. Another reason is it's free to publish unlimited blogs and it's always amazing to be sharing my writing with the Hashnode community.

Some of the other alternatives that you can use to store your website's content are:

1. Contentful

   Contentful is an excellent headless CMS option for those looking to get started quickly. It offers both GraphQL and REST API for seamless integration with your website. It has a very generous free tier and fits perfectly for you if you are running a website with limited content.

2. DatoCMS

   I discovered DatoCMS recently and I love it. The user experience is exceptional and the getting started process is straightforward. Additionally, DatoCMS provides a separate URL for your CMS project and delivers content via an API with a CDN, resulting in very quick content retrieval. If you are exploring CMS then DatoCMS is definitely worth a shot.

3. Sanity

   Unlike Contentful and DatoCMS, Sanity is an open-source CMS platform, where you can customize your data models through the code. Similar to the CMS, you can retrieve your content with the help of Sanity API. They have an excellent community and have documentation for a lot of front-end frameworks. Sanity is a great option for those who prefer open-source solutions and the ability to customize their CMS models with code.

Send data entered in the website form to email

A form, such as a contact form, can be one of the interactive elements of your website. There are tons of options on what we can do with the data entered into those forms, with one of the most popular options being to send the information directly to your email. This approach allows for quick and easy access to the collected data. On my website, I utilize the SendInBlue email transaction API to quickly transfer those data to my personal email. With 300 free transactional emails available per day, SendInBlue is a fantastic option for small to mid-traffic websites.

Key points to remember:

1. While websites and web applications share some similarities, there are also notable differences between the two. A web application can include interactive features such as login, sign-up, managing data, etc. while a website could be a simple platform serving static data with only a few interactive elements.

2. Building and hosting a website for free is way easier than thought. We can utilize open-source web frameworks such as NextJS, Gatsby, 11ty, etc, to quickly build out the website.

3. Freemium hosting services such as Vercel, Cloudflare, or Netlify could be used to swiftly host the website. Their integration with platforms such as Github makes it easier and faster to commit and deploy your website.

4. Content management can be challenging, but powerful headless CMS tools like Contentful, DatoCMS, and Sanity provide easy integration of content with your website. These tools offer APIs to access data for your website.

5. If your website includes a form, a freemium email service provider like SendInBlue can easily transfer form data to your email. This allows for quick and easy access to the data.

Conclusion

In this article, we discussed, how you can build and host your website for free.

Whether you are a beginner or you are a professional, I am sure this article has helped you understand different tools that you can use to host your website for free. If you found this information useful, please consider sharing it with friends or colleagues who may also benefit from it. If you have any questions or would like to discuss the topic further, you can reach out to me on Twitter at https://twitter.com/aabiscodes or LinkedIn at https://www.linkedin.com/in/aabis7/.