webdev{docs}

Hosting Gatsby sites

Hosting on Netlify

You can host your site in Netlify if you have the source code of your site in Github.

Note that if you have deployed the site as explained in the section below "Hosting on Github Pages", you won't be able to host in Netlify.

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/mygitaccount/myrepository.git
$ git push -u origin master
  • Next, you have to follow these steps to deploy the Github repository on Netlify:
    • Login into your Netlify account.
    • Click on 'New site from Git'
    • Select 'Github' as repository provider
    • Connect and authorize to your Github
    • Choose the repository where your Gatsby site is located
    • Click on 'Deploy site'

Updating repository

$ git add . 
$ git commit -m "changed some stuff"
$ git push

Note: Netlify will automatically detect the changes on the Github repository and will deploy the changes on your Netlify site. Awesome !!! This is called continuous deployment (Git-triggered builds). you can disable this setting from Netlify dashboard.

Hosting on Zeit Now

You can push your Gatsby project of your local machine directly into Zeit Now hosting, by using Now CLI command line utility and running the command: $ now.

However, I prefer Zeit Now to get push commits updates from GitHub. Keep reading...

You can host your site in Zeit Now if you have the source code of your site in Github.

Note that if you have deployed the site as explained in the section below "Hosting on Github Pages", you won't be able to host in Zeit.

$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/mygitaccount/myrepository.git
$ git push -u origin master
  • Next, you have to follow these steps to deploy the Github repository on Zeit:
    • Login into your Zeit Now account.
    • Click on 'New Project' arrow button.
    • Select 'From GitHub' as repository provider
    • Click on 'select' button next to the repository
    • Click 'Import'

Every time you git push, Zeit will automatically detect the changes on the Github repository and will deploy the changes on your Zeit site. Awesome !!! This is called continuous deployment (Git-triggered builds). You can disable this setting from the Zeit dashboard.

Deleting an existing project

🔔️ Important
The only way to delete a project hosted in Zeit Now dashboard is by using the Now CLI command line utility.

In order to install Now CLI in your local machine, issue these commands:

npm i -g now
now login
  • Once installed, you can list the existing projects of your Zeit Now dashboard:

now ls

  • To delete a particular project (both in your local machine and at Zeit Now cloud dashboard), issue:

now projects rm <your-project-name>

Hosting on Github Pages

  • Go to your project root directory and prepare Git:
$ git init
$ git add -A && git commit -m "My first commit"
  • Install gh-pages:

$ npm install gh-pages --save-dev

  • Modify package.json file with:
scripts: {
  // ...you'll see build, develop, format, etc above this....
  "deploy": "gatsby build --prefix-paths && gh-pages -d public",
}
  • Add a path prefix to the configuration gatsby-config.js to let GatsbyJS know it's not in the root:
{
  siteMetadata: {
    title: `Your site Name`,
  },
  pathPrefix: "/your-repo-name",
}
  • Deploy:
$ git remote add origin http://github.com/username/repo-name.git
$ npm run deploy
  • Visit your site:

https://yourusername.github.io/repo-name/

  • Update site with new commits:
$ git add -A && git commit -m "My second commit"
$ npm run deploy