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.
Open a terminal and use npm to install Gatsby and Surge
$ npm i -g gatsby-cli surge
Login to surge
$ surge login
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
$ gatsby build
You can test the production by running the
$ gatsby serve
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!
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