Your first Steps to Host your No-code Website on Netlify with your own Domain at no Cost

The comfort of no-code tools usually comes with a higher level of pricing regarding the extra services like hosting that you'd get somewhere else. This here is an easy and quick to do 15 min hack to host your side project for free.

This is a project I made for an up and coming director here https://nikomoritz.com where I finally tried Netlify and I am pretty, pretty satisfied.

Netlify is a hosting and serverless backend service. Netlify deploys your static websites and web applications to their global infrastructure in mere seconds. It also comes fully secured with an auto-renew Let’s Encrypt SSL certificate. Their free tier should fit your personal sites, side projects, and experiments just right.

  1. Package
  2. Deploy
  3. Set-up Domain
  4. Optimize

and in 15 min you're finished.

Step-by-step visual instructions

1. Packing a zip container

  • First, export your code that you have created with your no-code tools.

Most no-code tools allow you to pack your complete site as a zip, tar, or similar container. I like to build mine with no-code/low-code tools like Carrd and Webflow. They allow me to build quick landing pages (Carrd) and more sophisticated websites (Webflow). I started using them I realized I spend too much time on the websites than its copywriting after moving from CMS (Drupal, WordPress…) where I spend too much time on to static site builders (Jekyll, Hexo…) where I spend too much time on design.

2. Deploy your site on Netlify

Sign-in to Netlify or sign-up for a free tier.

  • Just upload your ZIP container and Netlify starts building and deploying your build.
  • Once the site has finished uploading, you get a URL that Netlify generated for you and will look somewhat like this: TODO
  • Klick it and see your site is now hosted and ready for the world to see.
  • You can change your that generic subdomain to something of your liking.

3. Set-up your own Domain

You probably want to map your own domain name to your new Netlify site.

  • Head over to "Domain Management", and then add a custom domain.

You can choose to use Netlify DNS or the DNS of your Domain provider.

Read the documentation for why you should choose www.nikomoritz.com vs nikomoritz.com

If you struggle with setting up DNS records, then you go ahead and purchase your Domain through Netlify.

Taking full advantage of the Netlify global CDN

Now you want to make sure to profit from the global content distribution network (CDN) Netlify offers. To fully take advantage use either the Netlify's built in DNS, or an DNS provider that supports ANAME or ALIAS records,

point an ANAME or ALIAS record to filmmaker.netlify.app
i.e.
ALIAS nikomoritz.com to filmmaker.netlify.app

Netlify With Namecheap DNS

Namecheap has the option to set up an ALIAS record. But instead of setting the ALIAS record nikomoritz.com to filmmaker.netlify.app as described in the Netlify documentation, you must use "@" as the hostname just like so:

ALIAS @ to filmmaker.netlify.app

Now your site should show up under https://www.nikomoritz when you enter https://nikomoritz into your address bar.

And with the ALIAS record at Namecheap's DNS you are taking full advantage of Netlify’s global CDN. BTW with Netlify you don't necessarily need all of cloudflare's services.

If you encounter an SSL_ERROR_BAD_CERT_DOMAIN Error code head back to the Netlify dashboard and

  • Initiate a renew of your SSL certificate.

Optimize your site

One thing you want to do is to tidy up how your website's address is shown in the URL bar.

  • Go to "Build & Deploy",
  • Here you find "Post Processing", and "Asset Optimization".
  • Now, you have to enable "asset optimization" which will enable "Pretty URLs"
    and get rid of the .HTML extensions.

This step is important  if you plan on handling form submissions using Netlify.

Here you can also choose to enable prerendering, if you're using a single-page app to optimize your SEO performance.


Finished! Now head over to Step 2: Handling form submission through Netlify.

Photo by Ben Kolde. Post Hero photo by Levi Stute.