/ #Freebies 

How to build a website for free

The best things in life don’t have to cost any money

Want a website?

Want something that looks amazing?

Want something that is easy to use?

Want something that is easy to maintain?

Don’t like spending money?

If you answered yes to all of the above - then I am showing to explain to you how to this quickly, and for free. If you want a custom domain all you have to do is spend a couple of dollars to buy the domain of your dreams.

To achieve this all we are going to use the power of the open source community.

Spoiler Alert: The website you will end up with will be the same as this exact website.

How can I do this

We are going to be using the power of NetlifyCMS which is an open-source static content management system.

Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. You can use it with any static site generator to create faster, more flexible web projects. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

At its core, Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including:

  • Fast, web-based UI: With rich-text editing, real-time preview, and drag-and-drop media uploads.
  • Platform agnostic: Works with most static site generators.
  • Easy installation: Add two files to your site and hook up the backend by including those files in your build process or linking to our Content Delivery Network (CDN).
  • Modern authentication: Using GitHub, GitLab, or Bitbucket and JSON web tokens.
  • Flexible content types: Specify an unlimited number of content types with custom fields.
  • Fully extensible: Create custom-styled previews, UI widgets, and editor plugins.

Netlify CMS vs. Netlify

Netlify.com is a platform you can use to automatically build, deploy, serve, and manage your frontend sites and web apps. It also provides a variety of other features like form processing, serverless functions, and split testing. Not all Netlify sites use Netlify CMS, and not all sites using Netlify CMS are on Netlify.

The folks at Netlify created Netlify CMS to fill a gap in the static site generation pipeline. There were some great proprietary headless CMS options, but no real contenders that were open source and extensible—that could turn into a community-built ecosystem like WordPress or Drupal. For that reason, Netlify CMS is made to be community-driven, and has never been locked to the Netlify platform (despite the name).

With this in mind, you can:

  • Use Netlify CMS without Netlify and deploy your site where you always have, hooking up your own CI, site hosting, CDN, etc.
  • Use Netlify without Netlify CMS and edit your static site in your code editor.
  • Or, use them together and have a fully-working CMS-enabled site with one click! If you hook up Netlify CMS to your website, you’re basically adding a tool for content editors to make commits to your site repository without touching code or learning Git.

The website that you will end up with will be a Hugo generated site. For those who don’t know Hugo is a blazing fast static site generator.

The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

First thing you need to do is:

  1. Once you have these accounts setup, all you have to do is clone the NetlifyCMS Hugo Casper Two template https://github.com/12startups/free-blog-template-netlifycms that I created. I have already added the steps that Netlify require to the template that you have just cloned.

  2. Deploy your recently cloned project.

  3. Login to your Netlify CMS admin account or setup additional users. You can always just commit changes to your repository instead, if that is your preference. Changes to the git repository should trigger Netlify to deploy a new build. Check your deploy log to confirm success or any errors.

  4. Delete the sample content, found in the folder /content/*, & start using your awesome website to do awesome things.

  5. ??

  6. Profit.

If you have an issues watching the following video.

Wait, I want to add a custom domain

Technically, this will mean that the website is not free, but oh well 🤷‍♂️

General steps:

  • Add the custom domain to your sites Settings>>Domain Management. Netlify will verify the domain name you enter and offer to sell the domain to you if it is available. If the domain is registered with an external registrar, you can assign it to your Netlify site.
  • Configure your DNS provider to point the domain at the Netlify servers. How you do this depends on your domain registrar. Consult their documentation to find out.
  • Test that your site is accessible via the custom domain. There may be a delay while DNS changes propagate.

Detailed steps can be found via Netlify documentation.

💸💸💸

Now you have a really easy and cheap way to get up and running with a blazing fast website.

There is literally nothing stopping you from starting.

It would be really cool if you tweeted me should you decide to use it, or if there is any questions that you have?

💸💸💸


If you have read this far, please let me know you thoughts?

Over & Out 💪 💪 💪 💪 💪 👊 👊 👊 👊 👊