Tools Used
- For this demonstration we show the use of Visual Studio Code
- We also use GitHub
- And Netlify
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
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