From 8fcadf5f5aa95567face7e509cd2ee905c0180f9 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sun, 31 May 2020 01:31:39 +0530 Subject: [PATCH 01/25] Added doc for deploying to digitalocean droplet Added doc for deploying gatsby site to digitalocean droplet and configuring domain name with SSL. For issue #24549 . --- .../docs/deploying-to-digitalocean-droplet.md | 230 ++++++++++++++++++ 1 file changed, 230 insertions(+) create mode 100644 docs/docs/deploying-to-digitalocean-droplet.md diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md new file mode 100644 index 0000000000000..ccf02127cb6d1 --- /dev/null +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -0,0 +1,230 @@ +--- +title: Deploying to DigitalOcean Droplet +--- + +This guide walks through how to deploy and host your next Gatsby site on [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/). + +DigitalOcean provides the easiest cloud platform to deploy, manage, and scale applications of any size, removing infrastructure friction and providing predictability so developers and their teams can spend more time building better software. + +DigitalOcean's famous product droplets are scalable compute IaaS(Infrastructure as a Service) or a VPS on the cloud which has great reliability and scalability and they come along with varied price range ideal for small apps to giant enterprise-level apps that harness the profit for your business. + +They provide service to select from the 6 Unix based distributions and select your technology-based platform with preinstalled pre-requisites from the marketplace. + +A Droplet could be spin up in just 55 seconds with as low as \$5/month! + +## Pre-requisites + +1. Your Gatsby site living in a Git repository (Github/Gitlab or any git cloud). +2. [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) with a non-root user configured with sudo group. +3. A custom domain name for your Gatsby site which will help configure SSL for HTTPS. + +## Steps to deploy your Gatsby site to DigitalOcean Droplet + +### Install NodeJS, NPM and Gatsby-CLI onto your droplet + +1. Login to your droplet as a non-root user. + +2. Install NodeJS + + ```bash + sudo apt-get update + sudo apt-get install nodejs + ``` + +3. Install npm + + ```bash + sudo apt-get install npm + ``` + + To view the version of node and npm installed, run, + + ```bash + node -v + npm -v + ``` + +4. To install the latest stable release (Optional) (Recommended), + + ```bash + sudo npm install -g n + sudo n stable + ``` + + `Note`: If you check the version now, you would see the older versions of node and npm from the cache. + You can either exit and restart your terminal or refresh the cache by following commands, + + ```bash + hash node + hash npm + ``` + +5. Install the gatsby-cli now globally. This will be useful ahead in building the gatsby site for production. + + ```bash + sudo npm install -g gatsby-cli + ``` + +### Clone your repository to the droplet + +1. Next step is to clone your repository containing your gatsby app(Replace `` with your Github repository link) + + ```bash + git clone + ``` + + Referring the directory cloned as `` throughout this post for simplicity. + +### Build your gatsby site to generate a static site for production + +1. The static files will be hosted publically on the droplet. `gatsby build` provides utility to build the site and generate the static files in the `/public`. + + ```bash + cd my-gatsby-app + sudo gatsby build + ``` + +### Install Nginx Web Server to host the static site and open firewall to accept HTTP and HTTPS requests + +To host a website or static files onto a Linux-based server/VPS, a web-server is required like Apache, Nginx. + +Nginx is web-server, it provides the infrastructure code for handling client requests from the World Wide Web, along with features like a load balancer, mail proxy and HTTP Cache. + +1. Install Nginx + + ```bash + sudo apt-get install nginx + ``` + +2. Configure firewall settings of the droplet to listen to HTTP and HTTPS requests on port 80 and 443 respectively. + + ```bash + sudo ufw allow 'Nginx HTTP' + sudo ufw allow 'Nginx HTTPS' + ``` + +3. To check the access, + + ```bash + sudo ufw app list + ``` + +4. In case, if ufw status is disabled/inactive, you can enable it using, + + ```bash + sudo ufw enable + ``` + + `Note`: Allow the OpenSSH if not already done, to not disconnect from your droplet. + + ```bash + sudo ufw allow 'OpenSSH' + ``` + +### Configuring Ngnix to point to your gatsby site's `/public` directory and add your domain + +Change the root directory configuration of Nginx in the default server block file + +1. Go to /etc/nginx/sites-available/ + + ```bash + cd /etc/nginx/sites-available/ + ``` + +2. Open the file default + + ```bash + sudo vim default + ``` + +3. Edit the file and make the following changes for below-mentioned fields, leave the rest of the fields as it is. + + ```bash + server { + root /public; + + index index.html index.htm index.nginx-debian.html; + + server_name ; + + location / { + try_files $uri $uri/ =404; + } + } + ``` + +4. Restart the ngnix service, + + ```bash + sudo systemctl restart nginx + ``` + +5. Configure your domain to point to the IP address of your droplet. Go to the Advanced DNS settings in your domain provider's console and put an A record that points to the IP address of the droplet. + +6. By this time, you can view your site live at ``. + +### Configuring SSL for your Gatsby Site. + +Follow the below steps to configure your site with a free SSL certificate from Lets Encrypt using their Certbot cli tool. + +However, it's advised to use a premium SSL certificate from any SSL Certificate provider. + +1. Install Certbot onto your droplet. + + You'll need to add the Certbot PPA to your list of repositories. To do so, run the following commands, + + ```bash + sudo apt-get update + sudo add-apt-repository ppa:certbot/certbot + sudo apt-get update + ``` + + Run the following commands to install certbot. + + ```bash + sudo apt-get install certbot python3-certbot-nginx + ``` + +2. Generate the certificate. Certbot will automatically edit and configure the ngnix config file for the SSL and point to the certificate file. + + Run the following command, + + ``` + sudo certbot --nginx + ``` + +3. If you are using Certbot for the first time on this droplet then you will be prompted to enter your e-mail for recovery purpose. + +4. Agree to the license agreement on prompt. + + `Note`: You will be prompted to select the domain for which you want to generate the certificate. Select the domain configured in [this](#configuring-ngnix-to-point-to-your-gatsby-site's-`public`-directory-and-add-your-domain) step. + + `Note`: You will be prompted to choose the option to redirect HTTP requests to HTTPS, you may choose on your needs. + (Suggested, to choose to redirect HTTP to HTTPS) + +5. Restart the nginx service. + + ```bash + sudo systemctl restart nginx + ``` + +6. Now, you can access your site at `` with a secure connection. + +### View your Gatsby site live + +Once you've followed along with all the steps and configuration properly, you can visit your site live at ``. + +Whenever there's an update to your site, run a `sudo gatsby build` in the root of your `` and your changes will be live. + +Congratulations! You've deployed your Gatsby App on DigitalOcean droplet along with configuring SSL for it. + +## Addtional resources + +There's a lot to learn more about DigitalOcean's Droplet, Ubuntu configurations and Nginx. Below are some useful links which will be useful in achieving the pre-requisites of this post: + +- [Microblog - Create a new non-root user with sudo privileges on Ubuntu-based DigitalOcean Droplet configured with SSH](https://dev.to/mistryvatsal/microblog-create-a-new-non-root-user-with-sudo-privileges-on-ubuntu-based-digitalocean-droplet-configured-with-ssh-1l3) +- [Official DigitalOcean Docs](https://www.digitalocean.com/docs/) +- [Official Nginx Docs](http://nginx.org/en/docs/) +- [Configuring HTTPS Servers with Nginx](http://nginx.org/en/docs/http/configuring_https_servers.html) +- [How To Install Nginx on Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04) +- [How To Secure Nginx with Let's Encrypt on Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04) From 0719d2452c9b1258078d9b0502e6257c69609cc9 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sun, 31 May 2020 01:38:02 +0530 Subject: [PATCH 02/25] Updated with deploying to digitalocean droplet doc Updated with deploying to digitalocean droplet doc to fix issue #24549. --- www/src/data/sidebars/doc-links.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index 8860f7cdd2b65..5810fae50734f 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -72,6 +72,9 @@ - title: Deploying to AWS Amplify link: /docs/deploying-to-aws-amplify/ breadcrumbTitle: AWS Amplify + - title: Deploying to DigitalOcean Droplet + link: /docs/deploying-to-digitalocean-droplet/ + breadcrumbTitle: DigitalOcean - title: Deploying to S3 & CloudFront link: /docs/deploying-to-s3-cloudfront/ breadcrumbTitle: S3 & CloudFront From ae5f680d8482a5ad781c5af8d0eeaa2de8a7071e Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sun, 31 May 2020 03:41:48 +0530 Subject: [PATCH 03/25] Added missing code language flag to fix lint check Lint Check failed due to one code language flag was missing in one of the code snippet in the md file. Fixed that. --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index ccf02127cb6d1..619020c13c8e0 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -189,7 +189,7 @@ However, it's advised to use a premium SSL certificate from any SSL Certificate Run the following command, - ``` + ```bash sudo certbot --nginx ``` From 2c861e1cd49a91ebbb6fea452f24adb9ee764d06 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Tue, 2 Jun 2020 10:59:44 +0530 Subject: [PATCH 04/25] Updated grammar and styles as per code review Co-authored-by: Marcy Sutton --- .../docs/deploying-to-digitalocean-droplet.md | 76 ++++++++++--------- www/src/data/sidebars/doc-links.yaml | 2 +- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 619020c13c8e0..fc7978a22ae68 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -1,28 +1,30 @@ --- -title: Deploying to DigitalOcean Droplet +title: Deploying to a DigitalOcean Droplet --- -This guide walks through how to deploy and host your next Gatsby site on [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/). +This guide walks through how to deploy and host your Gatsby site on a [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/). -DigitalOcean provides the easiest cloud platform to deploy, manage, and scale applications of any size, removing infrastructure friction and providing predictability so developers and their teams can spend more time building better software. +DigitalOcean provides a cloud platform to deploy, manage, and scale applications of any size, removing infrastructure friction and providing predictability so developers and their teams can spend more time building better software. -DigitalOcean's famous product droplets are scalable compute IaaS(Infrastructure as a Service) or a VPS on the cloud which has great reliability and scalability and they come along with varied price range ideal for small apps to giant enterprise-level apps that harness the profit for your business. +DigitalOcean's product droplets are scalable compute IaaS (Infrastructure as a Service) or a VPS (Virtual Private Server) on the cloud which has great reliability and scalability. They come with varied price ranges ideal for small apps to giant enterprise-level apps. They provide service to select from the 6 Unix based distributions and select your technology-based platform with preinstalled pre-requisites from the marketplace. -A Droplet could be spin up in just 55 seconds with as low as \$5/month! +A Droplet can be spun up in less than a minute for as little as \$5/month. -## Pre-requisites +## Prerequisites -1. Your Gatsby site living in a Git repository (Github/Gitlab or any git cloud). -2. [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) with a non-root user configured with sudo group. -3. A custom domain name for your Gatsby site which will help configure SSL for HTTPS. +- A Gatsby site living in a Git repository (GitHub, GitLab, or any Git cloud) +- A [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) with a non-root user configured with sudo group ([example: Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/how-to-create-a-new-sudo-enabled-user-on-ubuntu-18-04-quickstart)) +- A custom domain name for your Gatsby site to help with configuring HTTPS -## Steps to deploy your Gatsby site to DigitalOcean Droplet +## How to deploy your Gatsby site to DigitalOcean ### Install NodeJS, NPM and Gatsby-CLI onto your droplet -1. Login to your droplet as a non-root user. +Follow these instructions for installs on an Ubuntu droplet. + +1. Log in to your droplet as a non-root user. 2. Install NodeJS @@ -44,7 +46,7 @@ A Droplet could be spin up in just 55 seconds with as low as \$5/month! npm -v ``` -4. To install the latest stable release (Optional) (Recommended), +4. To install the latest stable release using the `n` package (Optional) (Recommended), ```bash sudo npm install -g n @@ -59,7 +61,7 @@ A Droplet could be spin up in just 55 seconds with as low as \$5/month! hash npm ``` -5. Install the gatsby-cli now globally. This will be useful ahead in building the gatsby site for production. +5. Install the gatsby-cli now globally. This will be useful ahead in building the Gatsby site for production. ```bash sudo npm install -g gatsby-cli @@ -67,17 +69,17 @@ A Droplet could be spin up in just 55 seconds with as low as \$5/month! ### Clone your repository to the droplet -1. Next step is to clone your repository containing your gatsby app(Replace `` with your Github repository link) +The next step is to clone the repository containing your Gatsby app (Replace `` with your Github repository link) ```bash git clone ``` - Referring the directory cloned as `` throughout this post for simplicity. +> Note: this guide will refer to the cloned directory as `` for simplicity. ### Build your gatsby site to generate a static site for production -1. The static files will be hosted publically on the droplet. `gatsby build` provides utility to build the site and generate the static files in the `/public`. +The static files will be hosted publicly on the droplet. The `gatsby build` command provides utility to build the site and generate the static files in the `/public`. ```bash cd my-gatsby-app @@ -86,9 +88,9 @@ A Droplet could be spin up in just 55 seconds with as low as \$5/month! ### Install Nginx Web Server to host the static site and open firewall to accept HTTP and HTTPS requests -To host a website or static files onto a Linux-based server/VPS, a web-server is required like Apache, Nginx. +To host a website or static files onto a Linux-based server/VPS, a web-server like Apache or Nginx is required. -Nginx is web-server, it provides the infrastructure code for handling client requests from the World Wide Web, along with features like a load balancer, mail proxy and HTTP Cache. +Nginx is web-server. It provides the infrastructure code for handling client requests from the World Wide Web, along with features like a load balancer, mail proxy, and HTTP Cache. 1. Install Nginx @@ -109,23 +111,23 @@ Nginx is web-server, it provides the infrastructure code for handling client req sudo ufw app list ``` -4. In case, if ufw status is disabled/inactive, you can enable it using, +4. If `ufw` status is disabled/inactive, you can enable it with the following command: ```bash sudo ufw enable ``` - `Note`: Allow the OpenSSH if not already done, to not disconnect from your droplet. + Allow the OpenSSH if not already done, to not disconnect from your droplet. ```bash sudo ufw allow 'OpenSSH' ``` -### Configuring Ngnix to point to your gatsby site's `/public` directory and add your domain +### Configuring Nginx to point to your Gatsby site's `/public` directory and add your domain Change the root directory configuration of Nginx in the default server block file -1. Go to /etc/nginx/sites-available/ +1. Go to `/etc/nginx/sites-available/` ```bash cd /etc/nginx/sites-available/ @@ -137,7 +139,7 @@ Change the root directory configuration of Nginx in the default server block fil sudo vim default ``` -3. Edit the file and make the following changes for below-mentioned fields, leave the rest of the fields as it is. +3. Edit the file and make the following changes for below-mentioned fields, leave the rest of the fields as is. ```bash server { @@ -153,7 +155,7 @@ Change the root directory configuration of Nginx in the default server block fil } ``` -4. Restart the ngnix service, +4. Restart the Nginx service ```bash sudo systemctl restart nginx @@ -163,15 +165,15 @@ Change the root directory configuration of Nginx in the default server block fil 6. By this time, you can view your site live at ``. -### Configuring SSL for your Gatsby Site. +### Configuring HTTPS for your Gatsby Site -Follow the below steps to configure your site with a free SSL certificate from Lets Encrypt using their Certbot cli tool. +Follow the below steps to configure your site with a free SSL/TLS certificate from Lets Encrypt using their Certbot CLI tool. However, it's advised to use a premium SSL certificate from any SSL Certificate provider. 1. Install Certbot onto your droplet. - You'll need to add the Certbot PPA to your list of repositories. To do so, run the following commands, + You'll need to add the Certbot PPA (Personal Package Archives) to your list of repositories. To do so, run the following commands: ```bash sudo apt-get update @@ -179,28 +181,28 @@ However, it's advised to use a premium SSL certificate from any SSL Certificate sudo apt-get update ``` - Run the following commands to install certbot. + Run the following commands to install Certbot. ```bash sudo apt-get install certbot python3-certbot-nginx ``` -2. Generate the certificate. Certbot will automatically edit and configure the ngnix config file for the SSL and point to the certificate file. +2. Generate the certificate. Certbot will automatically edit and configure the Nginx config file and point to the certificate file. - Run the following command, + Run the following command: ```bash sudo certbot --nginx ``` -3. If you are using Certbot for the first time on this droplet then you will be prompted to enter your e-mail for recovery purpose. +3. If you are using Certbot for the first time on this droplet then you will be prompted to enter your e-mail for recovery purposes. 4. Agree to the license agreement on prompt. - `Note`: You will be prompted to select the domain for which you want to generate the certificate. Select the domain configured in [this](#configuring-ngnix-to-point-to-your-gatsby-site's-`public`-directory-and-add-your-domain) step. + `Note`: You will be prompted to select the domain for which you want to generate the certificate. Select the domain configured in a [previous step](#configuring-nginx-to-point-to-your-gatsby-site's-`public`-directory-and-add-your-domain). - `Note`: You will be prompted to choose the option to redirect HTTP requests to HTTPS, you may choose on your needs. - (Suggested, to choose to redirect HTTP to HTTPS) + `Note`: You will be prompted to choose the option to redirect HTTP requests to HTTPS, which you may choose on your needs. + (It is recommended to choose to redirect HTTP to HTTPS) 5. Restart the nginx service. @@ -216,11 +218,11 @@ Once you've followed along with all the steps and configuration properly, you ca Whenever there's an update to your site, run a `sudo gatsby build` in the root of your `` and your changes will be live. -Congratulations! You've deployed your Gatsby App on DigitalOcean droplet along with configuring SSL for it. +Congratulations! You've deployed your Gatsby App on a DigitalOcean droplet along with configuring HTTPS for it. -## Addtional resources +## Additional resources -There's a lot to learn more about DigitalOcean's Droplet, Ubuntu configurations and Nginx. Below are some useful links which will be useful in achieving the pre-requisites of this post: +There's a lot more to learn about DigitalOcean's Droplets, Ubuntu configurations, and Nginx. Below are some links which could be useful in achieving the prerequisites of this post: - [Microblog - Create a new non-root user with sudo privileges on Ubuntu-based DigitalOcean Droplet configured with SSH](https://dev.to/mistryvatsal/microblog-create-a-new-non-root-user-with-sudo-privileges-on-ubuntu-based-digitalocean-droplet-configured-with-ssh-1l3) - [Official DigitalOcean Docs](https://www.digitalocean.com/docs/) diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index 5810fae50734f..4fc973c086ede 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -72,7 +72,7 @@ - title: Deploying to AWS Amplify link: /docs/deploying-to-aws-amplify/ breadcrumbTitle: AWS Amplify - - title: Deploying to DigitalOcean Droplet + - title: Deploying to a DigitalOcean Droplet link: /docs/deploying-to-digitalocean-droplet/ breadcrumbTitle: DigitalOcean - title: Deploying to S3 & CloudFront From 71c6c3564cc96e96e12db253794d4f77db4e047b Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Tue, 2 Jun 2020 11:03:42 +0530 Subject: [PATCH 05/25] Removed the line for brevity --- docs/docs/deploying-to-digitalocean-droplet.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index fc7978a22ae68..5135b5ecc02d4 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -169,8 +169,6 @@ Change the root directory configuration of Nginx in the default server block fil Follow the below steps to configure your site with a free SSL/TLS certificate from Lets Encrypt using their Certbot CLI tool. -However, it's advised to use a premium SSL certificate from any SSL Certificate provider. - 1. Install Certbot onto your droplet. You'll need to add the Certbot PPA (Personal Package Archives) to your list of repositories. To do so, run the following commands: From f8db03044d280f908e6f5264ae46908190dd4942 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Tue, 2 Jun 2020 11:29:43 +0530 Subject: [PATCH 06/25] Updated grammar change for line #11 as per code review --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 5135b5ecc02d4..13bc3deac319a 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -8,7 +8,7 @@ DigitalOcean provides a cloud platform to deploy, manage, and scale applications DigitalOcean's product droplets are scalable compute IaaS (Infrastructure as a Service) or a VPS (Virtual Private Server) on the cloud which has great reliability and scalability. They come with varied price ranges ideal for small apps to giant enterprise-level apps. -They provide service to select from the 6 Unix based distributions and select your technology-based platform with preinstalled pre-requisites from the marketplace. +They provide service to select from various Unix-based distributions and select your technology-based platform with preinstalled pre-requisites from the marketplace. This guide will walk through the specific options that work best for deploying a Gatsby site with DigitalOcean. A Droplet can be spun up in less than a minute for as little as \$5/month. From 9229f7d927c93f463eaa172801a316e7915f3210 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Tue, 2 Jun 2020 17:27:53 +0530 Subject: [PATCH 07/25] Ran prettier to format the code --- docs/docs/deploying-to-digitalocean-droplet.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 13bc3deac319a..c5ea422af91e9 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -71,9 +71,9 @@ Follow these instructions for installs on an Ubuntu droplet. The next step is to clone the repository containing your Gatsby app (Replace `` with your Github repository link) - ```bash - git clone - ``` +```bash +git clone +``` > Note: this guide will refer to the cloned directory as `` for simplicity. @@ -81,10 +81,10 @@ The next step is to clone the repository containing your Gatsby app (Replace ` Date: Wed, 3 Jun 2020 01:23:03 +0530 Subject: [PATCH 08/25] Added step to install dependencies after cloning --- docs/docs/deploying-to-digitalocean-droplet.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index c5ea422af91e9..8a339e6eaf55e 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -81,8 +81,16 @@ git clone The static files will be hosted publicly on the droplet. The `gatsby build` command provides utility to build the site and generate the static files in the `/public`. +1. Install dependencies. + ```bash cd my-gatsby-app +sudo npm install +``` + +2. Run build to generate static files. + +```bash sudo gatsby build ``` @@ -92,7 +100,7 @@ To host a website or static files onto a Linux-based server/VPS, a web-server li Nginx is web-server. It provides the infrastructure code for handling client requests from the World Wide Web, along with features like a load balancer, mail proxy, and HTTP Cache. -1. Install Nginx +1. Install Nginx. ```bash sudo apt-get install nginx From 2867e712dffc13a2047aac3b3f74a70b6a137c1b Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:02:02 +0530 Subject: [PATCH 09/25] Change case of node to Node as per suggestion. Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 8a339e6eaf55e..dc700a236247d 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -39,7 +39,7 @@ Follow these instructions for installs on an Ubuntu droplet. sudo apt-get install npm ``` - To view the version of node and npm installed, run, + To view the version of Node and npm installed, run, ```bash node -v From 1e5b7aa9fb8f561afd6bcc3cef6b13134da7ab54 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:03:38 +0530 Subject: [PATCH 10/25] Changing optional to required for installing version of Node Gatsby required Node 10, so making the use of n package while installing the Node on digitalocean as a REQUIRED step. Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index dc700a236247d..54d6bdc803fcf 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -46,7 +46,7 @@ Follow these instructions for installs on an Ubuntu droplet. npm -v ``` -4. To install the latest stable release using the `n` package (Optional) (Recommended), +4. To install the latest stable Node.js release using the `n` package (Required), ```bash sudo npm install -g n From 5a8b78780610b3251a58323cb62c4f3daa1de4c9 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:04:45 +0530 Subject: [PATCH 11/25] Adding suggested changes for better understanding. Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 54d6bdc803fcf..67f3f54f82449 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -75,7 +75,7 @@ The next step is to clone the repository containing your Gatsby app (Replace ` ``` -> Note: this guide will refer to the cloned directory as `` for simplicity. +> Note: this guide will refer to the cloned directory as `` for simplicity; you should replace it with your repo directory name. ### Build your gatsby site to generate a static site for production From 81669d648d55faf9dae7106da5dd67c14f17f765 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:06:20 +0530 Subject: [PATCH 12/25] Adding the suggested changes. Using "Generate your Gatsby site for production" instead of "Build your gatsby site to generate static site for production" Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 67f3f54f82449..34278c259d1ee 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -77,7 +77,7 @@ git clone > Note: this guide will refer to the cloned directory as `` for simplicity; you should replace it with your repo directory name. -### Build your gatsby site to generate a static site for production +### Generate your Gatsby site for production The static files will be hosted publicly on the droplet. The `gatsby build` command provides utility to build the site and generate the static files in the `/public`. From d0477fa234a86d2ab294154e630ec2adfd424667 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:07:34 +0530 Subject: [PATCH 13/25] Making changes as per suggestion by moderator Making the docs style changes as suggested by moderator marcysutton Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 34278c259d1ee..ad1b854620a55 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -84,7 +84,7 @@ The static files will be hosted publicly on the droplet. The `gatsby build` comm 1. Install dependencies. ```bash -cd my-gatsby-app +cd sudo npm install ``` From 788d42bbf086084e339e2ce4fc1a5ae65731d717 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:08:35 +0530 Subject: [PATCH 14/25] Making changes as per suggestion Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index ad1b854620a55..2beeeec4eb347 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -94,7 +94,7 @@ sudo npm install sudo gatsby build ``` -### Install Nginx Web Server to host the static site and open firewall to accept HTTP and HTTPS requests +### Install Nginx Web Server to host the site and open firewall to accept HTTP and HTTPS requests To host a website or static files onto a Linux-based server/VPS, a web-server like Apache or Nginx is required. From ed4178d5b53b191612080cb47c1867be5bba80d4 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:12:29 +0530 Subject: [PATCH 15/25] Making changes as per the suggestion Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 2beeeec4eb347..16e8a09d11d6f 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -131,7 +131,7 @@ Nginx is web-server. It provides the infrastructure code for handling client req sudo ufw allow 'OpenSSH' ``` -### Configuring Nginx to point to your Gatsby site's `/public` directory and add your domain +### Configure Nginx to point to your Gatsby site's `/public` directory and add your domain Change the root directory configuration of Nginx in the default server block file From d213d4a003fe69d0350c926e038233570f53712c Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:14:59 +0530 Subject: [PATCH 16/25] Update docs/docs/deploying-to-digitalocean-droplet.md Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 16e8a09d11d6f..31bb6c3af0a62 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -141,7 +141,7 @@ Change the root directory configuration of Nginx in the default server block fil cd /etc/nginx/sites-available/ ``` -2. Open the file default +2. Open the file default in Vim ([shortcut cheat sheet](https://devhints.io/vim)) ```bash sudo vim default From 6c3bd8fce9123416f4e8dd306c0efeaa737faec8 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:16:15 +0530 Subject: [PATCH 17/25] Making changes as per the suggestion Adding path resemble line to make it easy for people to understand the path Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 31bb6c3af0a62..23f072545add7 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -147,7 +147,7 @@ Change the root directory configuration of Nginx in the default server block fil sudo vim default ``` -3. Edit the file and make the following changes for below-mentioned fields, leave the rest of the fields as is. +3. Edit the file and make the following changes for below-mentioned fields, leave the rest of the fields as is. Your exact path may vary, but it may resemble `/home///public`. ```bash server { From a1504466b7d26e888a158b1a2018a5787b7437a6 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:20:05 +0530 Subject: [PATCH 18/25] Adding changes as per the suggestion Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 23f072545add7..f6acb99a41069 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -168,6 +168,7 @@ Change the root directory configuration of Nginx in the default server block fil ```bash sudo systemctl restart nginx ``` +You should now be able to view your built Gatsby site at your DigitalOcean IP address, before configuring a domain. 5. Configure your domain to point to the IP address of your droplet. Go to the Advanced DNS settings in your domain provider's console and put an A record that points to the IP address of the droplet. From 463f41b7719f114a75dd0f8a968f30755fb0bf3d Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 20:20:39 +0530 Subject: [PATCH 19/25] Making changes as per the suggestion Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index f6acb99a41069..d62300a5888af 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -2,7 +2,7 @@ title: Deploying to a DigitalOcean Droplet --- -This guide walks through how to deploy and host your Gatsby site on a [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/). +This guide walks through how to deploy and host your Gatsby site on a [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) with Ubuntu and Nginx. DigitalOcean provides a cloud platform to deploy, manage, and scale applications of any size, removing infrastructure friction and providing predictability so developers and their teams can spend more time building better software. From 135f281d7816e350dda153ac6b3147463ed9af09 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 21:15:35 +0530 Subject: [PATCH 20/25] Added snippet to get rid of permission denied Added snippet to get rid of permission denied while cloning the repository --- docs/docs/deploying-to-digitalocean-droplet.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index d62300a5888af..193aff708edcf 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -75,6 +75,13 @@ The next step is to clone the repository containing your Gatsby app (Replace ` ``` +Incase of any warning related to Permission denied, check if have sudo privileges or before cloning your repository, give permission to to access the .config directory of under /home/gatsby/. + +```bash +cd ~/ +sudo chown -R $(whoami) .config +``` + > Note: this guide will refer to the cloned directory as `` for simplicity; you should replace it with your repo directory name. ### Generate your Gatsby site for production From 67220f63c7b7b0ad7695d9d3c4e746faa470b8d1 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 21:31:34 +0530 Subject: [PATCH 21/25] Adding indentation as per linting rules --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 193aff708edcf..f216abf31b46a 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -175,7 +175,7 @@ Change the root directory configuration of Nginx in the default server block fil ```bash sudo systemctl restart nginx ``` -You should now be able to view your built Gatsby site at your DigitalOcean IP address, before configuring a domain. + You should now be able to view your built Gatsby site at your DigitalOcean IP address, before configuring a domain. 5. Configure your domain to point to the IP address of your droplet. Go to the Advanced DNS settings in your domain provider's console and put an A record that points to the IP address of the droplet. From 4cb6cc9d2d8737a1da00505db018d1b59b938e11 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Sat, 4 Jul 2020 21:42:21 +0530 Subject: [PATCH 22/25] Ran prettier --- docs/docs/deploying-to-digitalocean-droplet.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index f216abf31b46a..9b7ded46e80bf 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -175,6 +175,7 @@ Change the root directory configuration of Nginx in the default server block fil ```bash sudo systemctl restart nginx ``` + You should now be able to view your built Gatsby site at your DigitalOcean IP address, before configuring a domain. 5. Configure your domain to point to the IP address of your droplet. Go to the Advanced DNS settings in your domain provider's console and put an A record that points to the IP address of the droplet. From 2fb05d6c951b68aa9606dbfce5632a704f3e34b8 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Tue, 21 Jul 2020 13:39:18 +0530 Subject: [PATCH 23/25] Updating grammar as per suggested Co-authored-by: Marcy Sutton --- docs/docs/deploying-to-digitalocean-droplet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 9b7ded46e80bf..7c7ad9c366599 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -75,7 +75,7 @@ The next step is to clone the repository containing your Gatsby app (Replace ` ``` -Incase of any warning related to Permission denied, check if have sudo privileges or before cloning your repository, give permission to to access the .config directory of under /home/gatsby/. +In case of a warning related to "Permission denied", check if `` has `sudo` privileges. Or before cloning your repository, [change permissions](https://help.ubuntu.com/community/FilePermissions) for `` to access the `.config` directory of under `/home/gatsby/': ```bash cd ~/ From b5ebaccc6bd2e528d596d6ac4565595e584cbd7b Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Wed, 22 Jul 2020 00:04:53 +0530 Subject: [PATCH 24/25] Added note to copy local repo path for future ref --- docs/docs/deploying-to-digitalocean-droplet.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 7c7ad9c366599..55526cb118fe6 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -75,19 +75,26 @@ The next step is to clone the repository containing your Gatsby app (Replace ` ``` -In case of a warning related to "Permission denied", check if `` has `sudo` privileges. Or before cloning your repository, [change permissions](https://help.ubuntu.com/community/FilePermissions) for `` to access the `.config` directory of under `/home/gatsby/': +> Note: Copy the path where your `` is cloned, for future reference. +```bash +pwd +``` + +In case of a warning related to "Permission denied", check if `` has `sudo` privileges. Or before cloning your repository, [change permissions](https://help.ubuntu.com/community/FilePermissions) for `` to access the `.config` directory of under `/home//`: ```bash cd ~/ sudo chown -R $(whoami) .config ``` -> Note: this guide will refer to the cloned directory as `` for simplicity; you should replace it with your repo directory name. +> Note: This guide will refer to the cloned directory as `` for simplicity; you should replace it with your repo directory name. ### Generate your Gatsby site for production The static files will be hosted publicly on the droplet. The `gatsby build` command provides utility to build the site and generate the static files in the `/public`. +> Note: Go to the path where is. You can used the copied path for reference in a [previous step](#clone-your-repository-to-the-droplet). + 1. Install dependencies. ```bash From e911332d23fd347b1a24ff0a3912d46c39b9ace8 Mon Sep 17 00:00:00 2001 From: Vatsal Mistry Date: Wed, 22 Jul 2020 00:05:21 +0530 Subject: [PATCH 25/25] Ran prettier to format the code --- docs/docs/deploying-to-digitalocean-droplet.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/deploying-to-digitalocean-droplet.md b/docs/docs/deploying-to-digitalocean-droplet.md index 55526cb118fe6..ac599c79f6f10 100644 --- a/docs/docs/deploying-to-digitalocean-droplet.md +++ b/docs/docs/deploying-to-digitalocean-droplet.md @@ -76,6 +76,7 @@ git clone ``` > Note: Copy the path where your `` is cloned, for future reference. + ```bash pwd ```