Edit-Test-Website CI/CD Lifecycle Demonstration

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 titl

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

reviewing a preview deploy on Netlify — note the URL 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