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