How to host a website: a beginner's guide

A website on your machine exists only for you. Hosting means putting its files on a computer that is connected to the internet all the time, called a server, which answers when someone types the address. Everything else (domain, HTTPS, deploys) is a layer around that idea.

The shortest path for a beginner has five steps: create the site, build the final files, publish, connect a domain and verify. The examples use a static site, which covers portfolios, blogs, documentation and company pages.

What do you need to host a website?#

Three separate pieces:

1. The site files. HTML, CSS, JavaScript and images.
2. A server that delivers them. That is the hosting. It must stay on and connected.
3. An address. It can be the subdomain your host provides or a domain of your own. A domain is the readable name that points to the server, instead of an IP address that is hard to remember (MDN).

From the browser's side the flow is simple: it requests a URL and the server answers with a file. When the server only reads and returns ready-made files, the site is static. When it runs code and queries a database on every visit, it is dynamic. The difference is covered in what is a static site.

What type of hosting should you choose?#

• Static site: needs only a file server. It is the simplest and fastest to put online. It fits most sites with no login and no server-side database.
• Dynamic site (Node.js, Python, PHP): needs a server that runs your code, with RAM and often a database.
• Site builders (Wix, WordPress.com): you never touch files or servers, but you accept the tool's limits.

If you are starting out and have no reason to choose otherwise, start static. You can migrate later. To compare prices, see how much website hosting costs.

How do you create and build the site files?#

You can write an index.html by hand. It is already a complete site:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My first site</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

If you prefer a modern tool, Vite scaffolds a starter project. It needs a recent Node.js version, with the minimum listed in the Vite documentation:

npm create vite@latest my-site -- --template vanilla --no-immediate
cd my-site
npm install
npm run build
npm run preview

--template vanilla picks the plain HTML, CSS and JavaScript template, and --no-immediate stops the tool from installing and starting the dev server on its own, so you run each step yourself. Without these flags, create vite asks the same questions in the terminal.

build produces the dist folder with the final files, ready to publish (Vite build). preview serves that folder locally so you can check it before uploading. Publish the contents of dist, not the source folder.

How do you publish the files?#

The most common routes:

• Manual upload (ZIP or dashboard): send the folder through your host's dashboard. Good for a first site.
• Git: you connect the repository and every push triggers a new deploy. Ideal when the site changes often. See what deployment is.
• FTP/SFTP: common on traditional shared hosting.

When it finishes, the host shows a temporary URL. Open it in the browser and confirm the page loads before touching the domain.

How do you connect a domain to the site?#

1. Register the domain at a registrar. You pay for the right to use it for one or more years and renew it when it expires (MDN).
2. Create the DNS records your host tells you to, in the registrar's dashboard. Usually a CNAME record for subdomains (www) or an A/ALIAS record for the root domain.
3. Wait for propagation. It can take minutes to a few hours.

The detailed walkthrough is in how to point a domain to your app.

What about HTTPS?#

Without HTTPS, browsers usually warn that the site is not secure and traffic travels unencrypted. Most hosts now issue the certificate automatically once the domain points correctly. If yours does not, use a Let's Encrypt certificate (see how Let's Encrypt works). Do not leave the site on plain HTTP.

How do you check the site is live?#

Test from the terminal to see what the server really returns:

curl -I https://mysite.com

Look for a 200 status on the first line (for example HTTP/2 200; HTTP/1.1 200 is fine too). Then check on your phone, off your own Wi-Fi, and open a page that does not exist to confirm the 404 error shows up properly.

What are the common mistakes?#

• 404 on the home page: you published the wrong folder. index.html must be at the root of what you uploaded.
• Broken CSS and images: absolute paths (/img/photo.png) on a site served from a subfolder, or files that were not uploaded.
• Domain does not open: the DNS record is wrong or has not propagated yet. Check the exact value your host asked for.
• Certificate warning: the domain does not point to the server yet, so the certificate was not issued.
• You changed the code and nothing happened: you forgot to rebuild or redeploy, or the browser is serving a cached copy.

How to do this on Square Cloud#

Square Cloud is self-service hosting: you deploy and control everything. Among several runtimes, such as Node.js, Python and Go, there is one for static sites: nginx is always online serving your files, none of your code runs on the server, and every update goes live right away. See the runtimes available today on Runtimes. You upload the site content (the dist folder) as a ZIP in the dashboard, with the CLI, through GitHub or with the VS Code extension. The squarecloud.app file is optional: the dashboard generates the configuration on deploy, or you can write it at the project root.

Every web application gets a *.squareweb.app subdomain with HTTPS on any plan. A custom domain is available from the Standard plan: you create the DNS records shown in the dashboard at your registrar and TLS is automatic. The domain stays registered in your name, at your registrar.

Hobby starts at R$12.49 per month, and a web application needs at least 512 MB of the plan's RAM. Every plan includes a global CDN, unlimited traffic (fair-use policy) and cookie-free web analytics. The details are on the sites page.