Edit-test-website CI/CD lifecycle demo

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
screenshot of a post in Visual Studio Code with the 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 creating the 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 pull 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