DigitalCore.co.nz

# 05 - Continuous deployment

Watch the YouTube video:

https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE

# TL;DR

Today, I will demonstrate how to:

  • setup a GitHub repository (repo),
  • setup SSH to securely connect to GitHub,
  • push a local project to the GitHub repo,
  • pull the GitHub repo into Netlify, and
  • define a Netlify sub-domain name.

# Executive summary

Continuous deployment (CD) is a software release process. CD uses automated testing to check if the changes that are made to a codebase are stable. If the changes are reliable, then an immediate, autonomous deployment is made to the production environment. Today, I am going to show how Git, GitHub, and Netlify are used to execute a CD strategy.

# Prerequisites

The following technologies are needed for this dev guide:

  • Git,
  • a browser,
  • a terminal,
  • a GitHub account,
  • a Netlify account, and
  • an internet connection.

NOTE: You can use the terminal built into VS Code instead of using a terminal program.

# Citations

The following references were used during the writing of this dev guide:

# 1/5 - Setup a GitHub repo

Follow these steps to create a repo on the remote GitHub website:

  • Open a browser.
  • Login to GitHub.
  • Click the green "New" button in the left, "Repositories" sidebar menu, or the "+" icon at the top-right of the page and select "New repository" from the popup dialog.
  • Add "login-code" to "Repository name".
  • Add an optional "Description".
  • Choose if you want the repo to be "Public" or "Private".
  • Choose if you want the repo to include a "README" file.
  • Choose if you want to add a ".gitignore" file and a "license".
  • Click the green "Create repository" button and make a note of the HTTPS and SSH connection methods.

NOTE: Keep the browser open during the next two sections and refer to the details on the web page as needed.

# 2/5 - Setup SSH to securely connect to GetHub

The SSH (Secure SHell) protocol is used to connect to, and authenticate, remote services. This is achieved with the use of private keys that are kept securely on your system, and public keys that are used on the Internet.

Follow these steps to establish a secure SSH connection to GitHub:

# 1/7 - Globally configure Git

  • Open a terminal.
  • Run the following commands:
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

# 2/7 - Check for existing SSH keys

  • Navigate to the root directory of the login-code project.
  • Run the following command to see if any SSH keys exist:
$ ls -al ~/.ssh

NOTE: SSH keys are usually called:

  • id_rsa.pub,
  • id_ecdsa.pub, or
  • id_ed25519.pub.

# 3/7 - Create new SSH keys

  • Generate a pair of SSH keys:
$ ssh-keygen -t rsa -b 4096 -C "johndoe@example.com"
  • When prompted to "Enter a file in which to save the key," type the following (so you can tell at a glance who the keys are for) and then press ENTER:
~/.ssh/github
  • Include an optional secure passphrase... twice.

# 4/7 - Add the private key to the ssh-agent

  • After generating the keys, start the ssh-agent:
$ eval "$(ssh-agent -s)"
  • Add the newly-created private key to the ssh-agent:
$ ssh-add ~/.ssh/github

# 5/7 - Copy the public key to the clipboard

  • Copy the newly-created public key to the clipboard:
$ pbcopy < ~/.ssh/github.pub # DON'T forget the .pub extension

# 6/7 - Add the public key to GitHub

  • Open a new browser tab (and leave the open GitHub page alone!!)
  • Navigate to GitHub.
  • Click the profile picture at the top-right of the page.
  • Select "Settings" from the popup menu.
  • Click the "SSH and GPG keys" link in the left sidebar.
  • Click the green "New SSH key" button at the top of the page.
  • Add "login-code" to the "title" field.
  • Paste the public key into the "Key" field.
  • Click the green "Add SSH key" button.

# 7/7 - Test the SSH connection

  • Run the following command in a terminal:
$ ssh -T git@github.com
  • You may see warnings like these:
> The authenticity of host 'github.com (IP ADDRESS)' can't be established.
> RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
> Are you sure you want to continue connecting (yes/no)?

> The authenticity of host 'github.com (IP ADDRESS)' can't be established.
> RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
> Are you sure you want to continue connecting (yes/no)?

Type yes to see the following message:

> Hi John Doe! You've successfully authenticated, but GitHub does not
> provide shell access.

NOTE: There is an official CLI called GitHub CLI that, as of writing, is currently in beta. There is also an unofficial tool called hub that behaves as a proxy to Git.

# 3/5 - Push the project to GitHub

Follow these steps to use Git to push the local project to the remote GitHub repo:

  • On your local system, open a file manager.
  • Navigate to the root directory of your project and check for a ".git" folder.
  • If the ".git" folder doesn't exist, you can:
    • open a terminal,
    • navigate to the root directory of your project, and
    • initialise git version control with the following commands:
$ git init -y
# The -y flag uses a set of default values
# when the package.json file is created.
$ touch README.md
# Create a README.md file.
$ git add .
# Stage all the files and folders in a project except for
# those files and folders that are listed in the .gitignore file.
$ git commit -m "initial commit"
# Commit all the staged files, and include a message (-m).
$ git remote add origin git@github.com:username/repo.git
# Add a remote repo (that points to repo.git under
# the username account on GitHub) and call it origin.
$ git push -u origin master
# Push the master branch to the remote repo called origin.
  • If the local repo exists (i.e. the ".git" folder is evident) and you have been using Git locally, then use the following commands instead:
$ git remote add origin git@github.com:username/login-code.git
$ git push -u origin master

NOTE 1: Use the information in the open browser tab to guide you through the setup process. Or you can find this information by:

  • logging into your git account,
  • clicking on the repo in the left, sidebar menu,
  • clicking the green "Code" button above the commits panel, and
  • clicking the "Use SSH" link to display the required "Clone with SSH" string as used in the git remote add command above.

NOTE 2: The git remote add command comes in two flavours:

  • an SSH version like the one that is used here, and
  • an HTTPS version that constantly asks for a username and password.

The SSH version has an initial setup process but it is worth establishing because there will be an increase in efficiency and security.

# 4/5 - Pull the GitHub repo into Netlify

Follow these steps to pull the GitHub repo into the Netlify website:

  • Open a new browser tab.
  • Login to Netlify.
  • Click the green "New site from Git" button.
  • Click the grey "GitHub" button.
  • If needed, authorize Netlify to access GitHub.
  • Click on the repo that was pushed to GitHub in the last section.
  • Select the "Owner" of the new site.
  • Select the "Branch to deploy" (which is probably "master").
  • Specify the "Build command" (which, for Nuxt, is probably npm run generate).
  • Specify the "Publish directory" (which, for Nuxt, is probably dist).
  • Ignore the "Advanced build settings" options.
  • Click the green "Deploy site" button.

NOTE: Other frameworks use different settings. For instance, VuePress uses the vuepress build docs build command, and the docs/.vuepress/dist publish directory.

I needed to alter two files to successfully deploy this project:

  1. I added the generate command to the package.json file:
  "scripts": {
    "generate": "nuxt generate"
  },
  1. I commented out the "target: 'static'," setting in the nuxt.config.js file:
  // target: 'static',

# 5/5 - Change the Netlify sub-domain name

Netlify randomly creates default sub-domain names for new projects, but it is easy to change the site name to something that is easy to remember.

Follow these steps to change the sub-domain name:

  • Click the grey "Site settings" button towards the top-left of the page.
  • Click the grey "Change site name" button in the "Site information" panel.
  • Change the "Site name" to something that is easy to remember (login-code.netlify.app is already taken by me, thank you very much).
  • Click the green "Save" button.

NOTE: Only letters, numbers, and dashes can be used to create a new site name.

# The Result

Whenever changes are pushed to GitHub, Netlify automatically notices. Netlify pulls in the whole repo, including all the changes. After the repo has been pulled, Netlify re-builds the entire site and, as soon as the built process completes, the site goes live with all the new changes.

This is continuous deployment in action.

# Review

In this dev guide, we:

  • setup a GitHub repo,
  • setup SSH to securely connect to GetHub,
  • pushed a local project to the GitHub repo,
  • pulled the GitHub repo into Netlify, and
  • defined a Netlify sub-domain name.

# Next

In the next dev guide, we are going to connect a FaunaDB database to a Netlify project.