DEV Community

Cover image for How to Host Website on Netlify for FREE
Vicky Shinde
Vicky Shinde

Posted on • Edited on

How to Host Website on Netlify for FREE

Hosting a website on Netlify is a straightforward process. Here are the steps to get your site up and running:

Create a Netlify Account:

Go to Netlify's website and sign up for a free account if you don't have one.

Connect Your Git Repository:

  • After logging in, click on "New site from Git".
  • Connect to your Git provider (GitHub, GitLab, or Bitbucket) and authorize Netlify to access your repositories.

Choose Your Repository:

  • Select the repository that contains your website code.
  • Netlify will automatically detect the build settings. If it doesn't, you can specify the build command and the publish directory (e.g., npm run build and dist).

Build and Deploy:

  • Click "Deploy site" Netlify will start the build process and deploy your website.
  • Once the build is complete, Netlify will provide you with a temporary URL where your site is live.

Custom Domain (Optional):

  • If you have a custom domain, you can add it to your Netlify site.
  • Go to "Domain settings" in your site's dashboard.
  • Click on "Add custom domain" and follow the instructions to configure your DNS settings.

Continuous Deployment:

  • Every time you push changes to your repository, Netlify will automatically rebuild and redeploy your site.

Additional Features:

  • Form Handling: Netlify offers built-in form handling without any backend code.
  • Redirects and Rewrites: You can configure redirects and rewrites using a _redirects file or netlify.toml.
  • Environment Variables: You can set environment variables for your build process in the site settings.
  • Functions: Netlify supports serverless functions that can be used for dynamic back-end processing.

Example:

Here’s an example for deploying a simple static HTML site:

  • Create a repository on GitHub and push your site’s code to it.
  • Connect the repository to Netlify as described above.
  • Since it’s a static site, you might not need any build command. You can directly specify the publish directory where your HTML files are located.
  • Deploy and check your site.

That’s it! Your site should now be live on Netlify.

Developer Portfolio Template (Next.js) — Terminal Edition | Free & Pro

Stop using the same gradient-hero portfolio every other developer has. This one looks like the tool you actually live in — a dark, fully responsive portfolio template styled as a real terminal, built with Next.js 16 + TypeScript + Tailwind CSS v4.Choose your version below:🆓 Free version includes: Terminal-style hero with live typing animation About, skills, projects, and experience sections Simple contact section Fully responsive — mobile, tablet, desktop One config file to personalize everything (no touching component code) Clean, beginner-friendly codeFREE - Live Preview ⭐ Pro version includes everything in Free, plus:Everything in the free version, plus the three things that actually turn visitors into clients: real case studies, a blog for SEO and credibility, and a contact form that works. Case study pages — dedicated /work/[project] detail pages for your best work (role, timeline, problem, approach, result). Just add a project to your data file — the page builds itself automatically Built-in blog — /blog index + post pages, perfect for writing dev.to-style content directly on your own portfolio for SEO Working contact form — validated, opens the visitor's email pre-filled with their message. Easy to upgrade to Resend/Formspree for full automation No watermark, no upsell footer — it's 100% yours Same one-file personalization, more pages to show off your real workPRO - Live Preview Why Pro is worth it:A custom portfolio with case studies, a blog, and a working contact form usually costs hundreds of dollars from a freelancer and takes a week of back-and-forth. With Pro, you get all of that as clean, production-ready code you own outright — customizable in an afternoon, not a week.Tech stack: Next.js 16 · TypeScript · Tailwind CSS v4 · Zero bloated dependenciesnpm install npm run devDeploys instantly to Vercel, Netlify, or any Node.js host.License: Personal and portfolio use. Customize and deploy freely for your own site. Not for resale or redistribution as a template.

favicon codervicky.gumroad.com

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.