Surge is a simple and easy-to-use platform for deploying static websites. It allows you to quickly publish your HTML, CSS, and JavaScript files to a public URL. Here’s a step-by-step tutorial on deploying a static website using Surge:

Step 1: Install Surge

If you don’t have Surge installed, you can install it globally using npm (Node.js package manager). Open your terminal and run the following command:

npm install -g surge

Step 2: Create a Static Website

Create a directory for your static website and add your HTML, CSS, and JavaScript files to it. Ensure that your website is ready for deployment.

Step 3: Build Your Website (if necessary)

If your website includes any build steps, such as compiling Sass or bundling JavaScript, make sure to run those before deploying. Surge is designed for static files, so you’ll want to have your website built and ready to be served as static assets.

Step 4: Navigate to Your Project Directory

Open your terminal and navigate to the root directory of your static website:

cd /path/to/your/project

Step 5: Run Surge

Run the following command to deploy your static site with Surge:

surge

Step 6: Create a Surge Account (if prompted)

If this is your first time using Surge or if you haven’t logged in before, you’ll be prompted to create a Surge account. Follow the on-screen instructions to sign up.

Step 7: Configure Deployment Settings

Follow the prompts to configure your deployment settings:

• Project path: The default is the current directory. Press Enter if it’s correct.
• Domain: Choose a subdomain for your project. You can use the default provided or choose a custom one.

Step 8: Deployed!

Once the deployment process is complete, Surge will provide you with a public URL where your static site is now hosted. This will be in the format of your-project-name.surge.sh or the custom domain you specified.

Additional Tips:

• To update your deployment after making changes to your static files, simply run surge again in your project directory.
• You can specify a custom domain during the deployment process by using the --domain flag: surge --domain your-custom-domain.surge.sh.

That’s it! You’ve successfully deployed your static website using Surge. This is a quick and straightforward method for hosting simple static sites. If you need more advanced features or server-side logic, you might want to explore other hosting options.

Here are a few additional tips and information to help you get the most out of Surge:

Custom Domain

If you have a custom domain that you’d like to use, you can specify it during deployment or later on. For example:

surge --domain your-custom-domain.com

You’ll need to configure your domain registrar to point to Surge’s servers. Surge provides instructions on how to do this when you set up a custom domain.

Project Cleanup

Surge creates a surge file in your project directory to store deployment settings. It also adds a CNAME file if you’re using a custom domain. If you want to remove your project from Surge, you can use the following command:

surge teardown

This will delete the deployment settings and the associated domain.

SSL (Secure Socket Layer)

Surge provides free SSL for all Surge.sh domains. This means that your website will be served over HTTPS, providing a secure connection for your users.

Custom Error Pages

You can create custom error pages for your Surge deployment. For example, if you want to create a custom 404 error page, create an index.html file in your project with your custom content and deploy it with Surge.

Surge Plus (Premium Service)

Surge offers a premium service called Surge Plus, which provides additional features such as unlimited custom domains, SSL for custom domains, and more. You can check the Surge website for pricing and additional information.

Surge CLI Options

The surge command has various options that you can use. For example:

• --project: Specify the path to your project.
• --domain: Specify a custom domain.
• --build: Specify a build script or command to run before deploying.

You can view all options by running:

surge --help

Surge Dashboard

Surge has a web-based dashboard where you can manage your projects, view deployment history, and configure settings. You can access the dashboard by visiting https://surge.sh/account.

Remember that Surge is primarily designed for static sites. If you need server-side logic or have a more complex web application, you might need to explore other hosting options such as Netlify, Vercel, or AWS.