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
shell
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
# or
surge public/
# or
surge public/ <your-domain>
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
Top comments (0)