Hosting platforms

Options

1. Cloudflare Pages
2. Vercel
3. Netlify

https://www.reddit.com/r/nextjs/comments/z9iomc/vercel_vs_netlify_which_is_more_costeffective/

Setting up a website using Vercel

1. Set the domain name in Vercel
   1. It will instruct you to add CNAME to your DNS provider.
   2. Login to namecheap or google domains or wherever you bought your domain from and add the CNAME record provided by Vercel to that domain.
   3. After this is done, Vercel will refresh the entries and will try to serve the website using that domain.
2. If the website is using quartz Follow directions to host the quartz website using Vercel
   1. https://quartz.jzhao.xyz/hosting#vercel
   2. Create vercel.json
   3. In Vercel, go to the project, go to settings and search for Framework and then, follow the instructions.
   4. After the deployment, the website should be live.

Setting up a custom deployment using Vercel

Specifying the build tool

If Vercel doesn’t auto-detect it, we can specify it using Framework Preset

Using a custom build command

How do I set up auth for my static website hosted using Vercel?

To set up authentication for a static website on Vercel, you have three main paths depending on whether you want a “no-code” security wall, a simple password, or a full user login system.

1. The “No-Code” Way: Vercel Deployment Protection

Vercel has a built-in feature called Deployment Protection that acts as a firewall.

1. Vercel Authentication (Free/All Plans): This forces anyone visiting your site to log in with their Vercel account. Only people on your Vercel Team can see the site.
2. Password Protection (Pro Add-on/Enterprise): You can set a single “site-wide” password.
3. How to set it up: 1. Go to your Project Dashboard on Vercel.
   1. Click Settings > Deployment Protection.
   2. Toggle on Vercel Authentication or Password Protection.

2. The Simple Way: Edge Middleware (Basic Auth)

If you want a classic “username/password” popup without paying for a Pro plan add-on, you can use Vercel Edge Middleware. This runs code before a request reaches your static files.

1. Create a file named `middleware.ts` (or `.js`) in your project root.
2. Add the following logic to intercept requests:

   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   
   export function middleware(req: NextRequest) {
     const authheader = req.headers.get('authorization') || req.headers.get('Authorization');
   
     if (!authheader) {
       return new NextResponse('Authentication required', {
   status: 401,
   headers: { 'www-authenticate': 'Basic realm="Secure Area"' },
       });
     }
   
     const auth = Buffer.from(authheader.split(' ')[1], 'base64').toString().split(':');
     const user = auth[0];
     const pass = auth[1];
   
     // Replace 'admin' and 'password123' with your desired credentials
     if (user === 'admin' && pass === 'password123') {
       return NextResponse.next();
     }
   
     return new NextResponse('Authentication failed', {
       status: 401,
       headers: { 'www-authenticate': 'Basic realm="Secure Area"' },
     });
   }
   

3. The Professional Way: Third-Party Auth (Clerk / Auth0)

If you need users to have their own accounts (Sign up with Google, Email/Pass), the industry standard for Vercel is Clerk. It is highly optimized for “static” sites because it handles the session on the client side or via middleware.

1. Why use this? It provides a full UI (Login/Signup buttons) and manages a user database for you.
2. How to set it up:
   1. Install the SDK: `npm install @clerk/nextjs` (or the JS equivalent).
   2. Wrap your app in a `<ClerkProvider>`.
   3. Use their `middleware.ts` helper to protect specific routes (e.g., `/dashboard`).

Are there other hosting sites that let me do Deployment Protection with password for free?

Finding a site that offers a “one-click” password toggle for free is difficult because most platforms (Vercel, Netlify) treat that convenience as a Pro feature.

However, you can get the exact same result for free on other platforms by using Middleware or Zero Trust tools. Here are the best free alternatives:

1. Cloudflare Pages + Cloudflare Access (Most Secure)

Cloudflare is the most robust free option. Instead of a simple password, you can use “Cloudflare Access,” which is part of their Zero Trust suite.

1. How it works: You put your website behind a “gate.” When someone visits, they are prompted to enter their email and a one-time code, or log in with Google/GitHub.
2. Cost: Free for up to 50 users.
3. Setup: Deploy your site to Cloudflare Pages, then go to the “Access” tab in the dashboard and create an “Application” for your domain.

2. Cloudflare Pages + Basic Auth Middleware (Simplest)

If you just want a classic browser popup that asks for a username and password (like Vercel’s Pro feature), you can do this for free using Functions.

1. Setup: Create a folder named `/functions` in your project root and add a file called `_middleware.js`.
2. The Code: You can paste a small script (similar to the Vercel Middleware example) that checks for a `Basic` auth header.
3. Cost: Free (included in Cloudflare’s free tier).

3. Netlify (Middleware/Headers)

Netlify also charges for the “Password Protection” dashboard toggle (about $19–$45/mo), but you can bypass this for free:

1. Basic Auth via Headers: You can define basic authentication in a `_headers` file, though it is slightly more manual than a toggle.
2. StatiCrypt: Many developers on Netlify’s free tier use a tool called StatiCrypt. It encrypts your HTML files with a password before you upload them. The user sees a password prompt generated by JavaScript; if they enter the right one, the page decrypts in their browser.

4. Firebase Hosting (Identity Platform)

If you are comfortable with a little more setup, Google’s Firebase Hosting allows you to integrate Firebase Authentication for free.

1. How it works: You can “lock” your site and only show content to authenticated users.
2. Cost: Free (within generous Spark Plan limits).

Cloudflare Pages

Is Cloudflare Pages free?

Yes, Cloudflare Pages is free, and its free tier is widely considered the most generous in the industry.

Unlike Vercel (which locks “password protection” behind a Pro plan), Cloudflare allows you to secure your site for free by using its Zero Trust features or Middleware.

Cloudflare Pages Free Plan (The “Catch-Free” Basics)

The free plan includes everything you need for a professional static site:

1. Unlimited bandwidth and unlimited requests for static assets.
2. Unlimited sites: You can host as many projects as you want.
3. Custom Domains: You can connect your own .com or .net (Vercel and Netlify also do this, but Cloudflare makes the DNS setup very easy).
4. Free SSL: Your site automatically gets the “lock icon” (HTTPS).
5. 500 builds per month: This is plenty for almost any personal project or small business.

How to get “Password Protection” for Free

Since you want to prevent people without a link from accessing the site, you have two free paths on Cloudflare:

Path A: Cloudflare Access (Best for “No-Code” Security)

Cloudflare includes its Zero Trust platform for free for up to 50 users.

In your dashboard, go to Zero Trust > Access > Applications.

Add your website URL.

Set a policy to allow specific emails (or any email ending in @yourdomain.com).

When a user visits, they’ll see a clean login screen asking for their email to receive a “Magic Link” or PIN. This is much more secure than a simple password.

Path B: Basic Auth via Functions (The “Classic” Password)

If you want the old-school popup that asks for a single password, you can use Pages Functions (Cloudflare’s version of Middleware).

Limit: The free plan allows 100,000 requests per day for these functions.

How: You place a small _middleware.js file in your project that checks for a password.

[ERROR] Missing entry-point to Worker script or to assets directory

This error usually happens because Cloudflare is looking for a build output folder (like `public` or `dist`) that doesn’t exist in your GitHub repository, or it’s accidentally trying to deploy your site as a Worker instead of a Page.

Since you are uploading your HTML directly, here is how to fix it in 60 seconds:

The Quick Fix (Dashboard Settings)

1. Go to your Cloudflare Dashboard > Workers & Pages.
2. Select your project and go to Settings > Builds & deployments.
3. Under Build configuration, click Edit output directory.
4. If your `index.html` is in the main folder of your Git repo, set the “Build output directory” to: `/` (just a forward slash).
5. If your files are inside a folder named `public`, set it to: `public`
6. Important: Ensure the Build command is completely blank. If it isn’t, delete the text and save.

Why the error happened

Cloudflare has two products that look similar: Pages (for websites) and Workers (for code/scripts).

1. The “Worker” Mistake: If you clicked “Create Worker” instead of “Create Page,” Cloudflare expects a JavaScript file (an “entry-point”). You must ensure you are on the Pages tab when creating the project.
2. The “Missing Folder” Mistake: If you told Cloudflare your files are in a folder called `dist`, but you only have an `index.html` in your root folder, Cloudflare “panics” because it has no assets to upload.

How do I protect a Cloudflare Pages static site with a password?

Since you are using Hugo, you have two ways to do this on Cloudflare Pages.

The Zero Trust method is “cleaner” because it doesn’t require adding code to your Hugo project, while the Middleware method is better if you want a simple shared password for anyone who has the link.

Method 1: Cloudflare Zero Trust (Recommended)

This puts a “lock screen” in front of your site. You don’t need to change a single line of your Hugo code.

1. Open Zero Trust: In your Cloudflare Dashboard sidebar, click Zero Trust.
2. Access / Applications: Go to Access > Applications > Add an application.
3. Select Self-hosted: Enter a name (e.g., “My Private Site”) and enter your domain.
4. Set Authentication: * Choose “One-time PIN”. This means people enter their email, get a code, and they’re in.
   1. The “Secret Link” Trick: If you only want people with a specific “link” to get in, you can set the policy to only allow specific email addresses or a specific email domain.
5. Save: Now, whenever anyone hits your URL, they see a professional login page.

Method 2: The “Shared Password” (Middleware)

If you want a simple popup that asks for a username and password (like Vercel Pro), you can use a Cloudflare Function.

Step 1: Create the file

In your Hugo project, create a new folder called `functions` at the root level (not inside `public`). Inside that folder, create a file named `_middleware.js`.

Step 2: Add this code

Copy and paste this into `_middleware.js`:

export async function onRequest(context) {
  const { request } = context;
  const authHeader = request.headers.get('Authorization');

  // Change these to your desired credentials
  const USERNAME = 'admin';
  const PASSWORD = 'your-super-secret-password';

  if (authHeader) {
    const [scheme, encoded] = authHeader.split(' ');
    if (scheme === 'Basic') {
      const decoded = atob(encoded);
      const [user, pass] = decoded.split(':');

      if (user === USERNAME && pass === PASSWORD) {
        return await context.next();
      }
    }
  }

  return new Response('Unauthorized', {
    status: 401,
    headers: {
      'WWW-Authenticate': 'Basic realm="Secure Area"',
    },
  });
}

Step 3: Deploy

Push this to GitHub. Cloudflare will see the `functions` folder and automatically apply the password protection to your entire Hugo site.

Which one should you use?

Tags

1. Domain Name System (DNS)