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 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.
Open a terminal and use npm to install Gatsby and Surge
npm i -g gatsby-cli surge
Login to surge
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
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
You can test the production by running the
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>
And BAM! Your webpage is live!
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.
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