Buil & Deploy a webpage with Gatsby and Surge

Welcome to the first part in this mini-series called Build & Deploy where I combine tools for building websites and applications plus the tools to deploy them online. Follow my blog or find me on Twitter for updates!

Gatsby & Surge

Gatsby is a React-based open source framework for creating websites and apps. It’s amazingly fast and has a great workflow.

Surge is a CLI tool that deploys your static pages for free within seconds. In this article, I will show you how to use both to quickly build and deploy a static webpage.

Install

Open a terminal and use npm to install Gatsby and Surge

$ npm i -g gatsby-cli surge

Login to surge

$ surge login

Build

Create a new project with Gatsby

$ gatsby new <project-name>
# or
$ gatsby new <project-name> <starter-repo>

Gatsby offers a great bunch of free templates on their website to get started quickly!

Fire it up!

$ cd <project-name>
$ gatsby develop

The develop command starts a development server where you can interact with your webpage while you're building. You can access it locally at http://localhost:8000/. To learn more about the Gatsby file structure check out: Gatsby Project Structure.

When you are finished making your webpage awesome, run the build command to generate an optimized static HTML site in the public folder

$ gatsby build

You can test the production by running the serve command

$ gatsby serve

Deploy

Surge offers many awesome futures but works as simple as typing surge in your public folder

$ cd public
$ surge

And BAM! Your webpage is live!

Create a CNAME document with the URL to skip the prompt on your next surge

$ echo <your-url>.surge.sh >> CNAME

Or use a custom domain name

$ echo your-website.com >> CNAME

To use a custom domain name, the DNS from the domain provider will need to be changed. More info: Adding a custom domain.

WTH just happened?

We’ve built a static webpage with Gatsby and deployed it to Surge with these commands

$ npm i -g gatsby-cli surge
$ surge login
$ gatsby new <project-name>
$ gatsby develop
$ gatsby build
$ gatsby serve
$ surge

Resources

Comments (1)

Chris Bongers's photo

Hey Felix,

So this Surge is basically a hosting provider? Where does it get deployed too?