FabForm

Written by: Geoffrey Callaghan

Surge Tutorial

Surge Tutorial

Surge is a simple, fast, and powerful platform for hosting static websites and web apps. It allows you to deploy your projects with just a few simple commands. Here’s a tutorial to help you get started with Surge:

  1. Install Surge:

    • If you haven’t already, you’ll need to install Surge globally using npm (Node.js package manager). Open your terminal or command prompt and run: 
      npm install -g surge

  2. Navigate to Your Project Directory:

    • Open your terminal or command prompt and navigate to the directory where your static website or web app files are located.

  3. Build Your Project (if necessary):

    • If your project needs to be built (e.g., for React or Vue.js projects), make sure to run the build command before deploying.
    • For example, if you’re using React, you can run: 
      npm run build

  4. Deploy Your Project:

    • Once you’re in the project directory, simply run the following command in your terminal: 
      surge
    • If it’s your first time using Surge, you’ll be prompted to create an account or log in with your existing credentials.
    • Follow the prompts to specify the directory you want to deploy (usually the current directory), and choose a domain name for your project.

  5. Visit Your Deployed Site:

    • After the deployment process is complete, Surge will provide you with a URL where your site is hosted.
    • You can visit this URL in your web browser to see your deployed site.

  6. Custom Domain (Optional):

    • If you have a custom domain, you can easily set it up with Surge.
    • After deploying your project, run the following command in your terminal: 
      surge --domain your-custom-domain.com
    • Follow the prompts to complete the setup process.

  7. Updating Your Site:

    • If you make changes to your project and want to update your deployed site, simply run the surge command again in your project directory.
    • Surge will upload the updated files and your changes will be live on the web.

  8. Project Removal (Optional):

    • If you want to remove your project from Surge, you can run the following command in your project directory: 
      surge teardown
    • Follow the prompts to confirm the removal of your project.

That’s it! You’ve now successfully deployed your static website or web app using Surge. It’s a straightforward and hassle-free process, making it an excellent choice for quick and easy hosting of your projects.