DEV Community

Cover image for Build & Deploy a webpage with Gatsby and Surge
Felix Swinkels
Felix Swinkels

Posted on

Build & Deploy a webpage with Gatsby and Surge

#gatsby #surge #build #deploy

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
Enter fullscreen mode Exit fullscreen mode

Login to surge

surge login
Enter fullscreen mode Exit fullscreen mode

Build

Create a new project with Gatsby

gatsby new <project-name>
# or
gatsby new <project-name> <starter-repo>
Enter fullscreen mode Exit fullscreen mode

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

Fire it up!

cd <project-name>
gatsby develop
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode


shell
You can test the production by running the serve command

gatsby serve
Enter fullscreen mode Exit fullscreen mode

Deploy

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

cd public
surge
# or
surge public/
# or
surge public/ <your-domain>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or use a custom domain name

echo your-website.com >> CNAME
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Resources

Top comments (0)

Read next

apilover profile image

Top Debugging Tools Every Developer Should Know

Wanda -

hkp22 profile image

Unwrapping JavaScript ES2024: Key Features Every Developer Should Know

Harish Kumar -

bardui profile image

🎨 All the Colors You Need with Tailwind CSS

bardui -

congcong profile image

GBASE数据库 | Introduction to GBase 8a MPP Cluster Data Loading and Performance Tuning

Cong Li -