Edit-Test-Website CI/CD Lifecycle Demonstration

Jump to Table of Contents

Tools Used

Before Website

screenshot of website before pushing commit

screenshot of website before pushing commit

Creating a Commit

Create a Branch

Not shown here, but you should create a separate branch to create a pull request.

Edit the Post

screenshot of a post in Visual Studio Code with the text to be deleted highlighted

Post in Visual Studio Code with text to be deleted highlighted

Stage Your Changes

Not shown here, but you should ‘stage’ the changes you want to commit.

Add a Commit Message

screenshot of adding a commit message in Visual Studio Code

screenshot of adding a commit message in Visual Studio Code

Commit

screenshot after pressing 'Ctrl-Enter' to create the commit

screenshot after pressing ‘Ctrl-Enter’ to create the commit

Create a Pull Request

Push the Commit to GitHub

screenshot showing push on popup menu

screenshot showing push on popup menu

If Applicable Select the GitHub ‘Remote’

For most beginners this will be ‘origin’.

screenshot of selecting a remote

screenshot of selecting a remote

From the Branch Create a Pull Request

Go to GitHub and Select Compare & Pull Request

screenshot of creating a pull request

screenshot of creating a pull request

Update the Pull Request Title (If More than One Commit)

screenshot of setting the pull request title

screenshot of setting the pull request title

Actually Create the Pull Request

Screenshot is from another PR

screenshot creating the pull request

screenshot of creating a pull request

Wait for CI Checks to Complete

screenshot of unfinished CI checks

screenshot of unfinished CI checks

Make sure the Continuous Integration Tests Succeeded

Review the Test Results in GitHub

screenshot of completed CI checks

screenshot of completed CI checks

Review the Preview Deploy (Netlify)

Sample preview is from a different PR

screenshot of a preview deploy with Netlify

reviewing a preview deploy on Netlify — note the URL

Take the Changes Live

Merge the Pull Request

screenshot of merging pull request

screenshot of merging pull request

Verify (Once CI Tests Complete) The Site Has Been Updated

screenshot of new post blurb on front page of live site

screenshot of new post blurb on front page of live site

Cleanup on GitHub

Delete the PR Branch

screenshot of deleting PR branch

screenshot of deleting PR branch

Merge the Changes Back to Your Local Repository

Pull the Changes from GitHub

Screenshot from another PR

screenshot of pull from remote git

screenshot of pulling from remote git

Fetch with Prune (Cleans Copy of the GitHub Branches)

Screenshot from another PR

screenshot of fetch with prune from remote git

screenshot of fetch with prune from remote git

Cleanup

Delete Your Local Copy of the PR Branch

Screenshot from another PR

screenshot of deleting local branch

screenshot of deleting local branch

Verify the Git History

Screenshot from another PR

screenshot of git history

screenshot of git history

After Website

And the final result is post is live on your website and your local repo is in sync with GitHub.

screenshot of new post blurb on front page of live site

screenshot of new post blurb on front page of live site

Table of Contents

  1. Tools Used
  2. Before Website
  3. Creating a Commit
    1. Create a Branch
    2. Edit the Post
    3. Stage Your Changes
    4. Add a Commit Message
    5. Commit
  4. Create a Pull Request
    1. Push the Commit to GitHub
      1. If Applicable Select the GitHub ‘Remote’
    2. From the Branch Create a Pull Request
      1. Go to GitHub and Select Compare & Pull Request
      2. Update the Pull Request Title (If More than One Commit)
      3. Actually Create the Pull Request
      4. Wait for CI Checks to Complete
  5. Make sure the Continuous Integration Tests Succeeded
    1. Review the Test Results in GitHub
    2. Review the Preview Deploy (Netlify)
  6. Take the Changes Live
    1. Merge the Pull Request
    2. Verify (Once CI Tests Complete) The Site Has Been Updated
  7. Cleanup on GitHub
    1. Delete the PR Branch
  8. Merge the Changes Back to Your Local Repository
    1. Pull the Changes from GitHub
    2. Fetch with Prune (Cleans Copy of the GitHub Branches)
  9. Cleanup
    1. Delete Your Local Copy of the PR Branch
    2. Verify the Git History
  10. After Website
  11. Table of Contents