Hacktoberfest 2019:

Git, GitHub, and WordPress

By: Chandler Weiner

Link to slides: ChandlerWeiner.com

Whois - Chandler Weiner

  • Owner - ObsessiveWP.com
  • Blogger - ChandlerWeiner.com
  • Traveler - InfrequentFlyer.blog (WIP 👍)
  • Swag collector - HacktoberfestSwagList.com
  • Tweeter - @C_Dubbs
  • GitHub 1337 Haxor - @crweiner

This talk will cover the following topics:

  • Git
    Learn the basics of Git and why you need version control.
  • GitHub
    A place to collaborate and store your code for free
  • WordPress
    How does Git and GitHub fit into your WordPress world?
  • Hacktoberfest!

What To Cover

How many of you know what Git is?

How many of you use Git on a regular basis?

Let’s Git Down To Business

  • Version control tracker
  • Allows you to have iterative “backups” of your code
  • Fosters collaboration

Git Logo by Jason Long is licensed under the Creative Commons Attribution 3.0 Unported License.

https://git-scm.com/downloads/logos

Let’s Git Down To Business

  • Files are worked on locally
  • You mark which changes you wish to keep and which to ignore
  • You do a commit those changes you made to the repo and it stores it forever

Let’s Git Down To Business

Git is a command-line tool and many people stick to the CLI. However, there are also visual ways to use Git:

  • Sourcetree
  • GitHub Desktop
  • GitKraken
  • Plugins for IDEs like VisualStudio Code and Atom

Let’s Git Down To Business

Popular places to host your Git repository (repo) include:

  • GitHub
  • GitLab
  • Bitbucket

Setting Up Git

From: git-scm.com/downloads

Setting Up Git

Atom

atom.io

GitHub Desktop

desktop.github.com

So What is GitHub?

“GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.”

Source: https://guides.github.com/activities/hello-world/

So What is GitHub?

Get to know the lingo:

  • Repository (repo) - Your public or private bucket of code.
  • Branch - A splitting of your “main” code; used to work on a feature.
  • Fork - A copy of another repo.
  • Pull Request (PR) - A way to merge changes from other branches (yours or a fork).
  • Merge - Combine code from a PR to one of your branches.

Git from the command line

Time to break out the Git Cheat Sheet

Basic Git Commands

  • git config --global user.name "[name]"
    • Sets the name attached to your commits.
  • git config --global user.email "[email address]"
    • Sets the email attached to your commits.
  • git init [name of project]
    • Initializes a brand new Git repository locally and begins tracking the directory you are in.
    • Creates a hidden subfolder within the existing directory that houses the internal data structure required for version control.

Source: https://guides.github.com/introduction/git-handbook/

Basic Git Commands

  • git remote add origin [URL.git]
    • Sets the location (on GitHub) for where your repo is
  • git add .
    • Stage all of the changes in your local environment
  • git rm [file]
    • Remove files from the local environment and git tracking
  • git checkout -b [branch-name]
    • Create a new branch and change to it
  • git commit -m "[descriptive message]"
    • Commit (save) your staged changes

Source: https://guides.github.com/introduction/git-handbook/

Basic Git Commands

  • git push
    • Upload your local code to GitHub
  • git pull
    • Download changes from GitHub and merge locally
  • git merge [branch name]
    • Merge the named branch into your current branch

Source: https://guides.github.com/introduction/git-handbook/

Git from a GUI

GitHub Desktop from https://desktop.github.com

GitHub For Atom, from https://github.atom.io/

GitHub Workflow

Create A Branch

Source: https://guides.github.com/introduction/flow/

Commit Your Changes

Source: https://guides.github.com/introduction/flow/

Open a Pull Request

Source: https://guides.github.com/introduction/flow/

Talk About Changes

Source: https://guides.github.com/introduction/flow/

Deploy for Testing

Source: https://guides.github.com/introduction/flow/

Merge The Code

Source: https://guides.github.com/introduction/flow/

How Do I Do All Of That?

1. On GitHub.com (or the desktop app), create a new branch (or first fork another existing repo)

Source: https://guides.github.com/activities/hello-world/

How Do I Do All Of That?

2. Make your changes and commit them

Source: https://guides.github.com/activities/hello-world/

How Do I Do All Of That?

3. Open a pull request (PR).

Source: https://guides.github.com/activities/hello-world/

How Do I Do All Of That?

4. Merge the PR

Source: https://guides.github.com/activities/hello-world/

The Best Way To Learn GitHub

GitHub Learning Lab - https://lab.github.com/

https://lab.github.com/githubtraining/introduction-to-github

How Does This Apply To WordPress?

Git for WordPress

Helpful Plugins

  • VersionPress
    • Some features only accessible via WP-CLI
  • Gitium
  • Revisr
  • WP Pusher
  • WP Migrate DB Pro
    • Does not use git, but helpful to keep databases in sync

Demo Time

57.245.247.92/wp-admin

GitHub for WordPress

More Helpful Plugins

  • Simply Static
  • WP2Static
  • Netlify Deploy
  • WP JAMstack Deployments

Things you can do with GitHub and WordPress

  • Have your local/testing copy of WordPress “backed up” to another service
    • Local by Flywheel -> stored in a git tracked folder -> GitHub Desktop app pushes your changes to GitHub automatically
  • Host a theme and make changes in a text editor, then push those changes to GitHub and watch the theme change live on the client site
  • Create a static version of your WordPress page and host it for free!
    • GitHub Pages or the Netlify free tier

Git for WordPress Resources

premium.wpmudev.org/blog/git-for-wordpress-development

premium.wpmudev.org/blog/improve-wordpress-development-workflow-local-server/

pantheon.io/easiest-way-use-git-wordpress

45royale.com/blog/wordpress-github/

hywel.me/static/site/wordpress/2016/07/17/fast-free-static-website-with-wordpress-and-github-pages.html

Static Hosting for WordPress

Great tools to use for a static WP site:

strattic.com/static-tools/

  • Shifter
  • Strattic
  • HardyPress
  • Netlify
  • GitHub Pages
  • Firebase
  • S3 Bucket + CDN
  • Simply Static
  • WP2Static
  • Netlify Deploy
  • WP JAMstack Deployments

Recall these plugins:

Future

Talk?

https://www.freecodecamp.org/news/off-with-their-heads-building-a-headless-wordpress-to-manage-content-bb04e6b2a792/

Questions?

On Another Note….

What is Hacktoberfest?

Hacktoberfest is a month-long celebration of open-source code all October, sponsored by DigitalOcean and other companies (for 2019 it’s Dev.to).

“Whether you’re a developer, student learning to code, event host, or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.”

How do I participate?

Submit at least 4 PRs to public repos on GitHub making meaningful contributions to the repos. Writing docs, fixing bugs, adding features, it all counts!

Happy Hacktoberfest!

That’s cool! What do I get?

Sweet, sweet swag, of course! That’s what you get! DigitalOcean/Dev.to are giving out 50,000 t-shirts this year to people who submit 4 PRs during Hacktoberfest!

How do I sign up?

Make sure you have an account on GitHub and then register on the Hacktoberfest website: https://hacktoberfest.digitalocean.com/

Find more details here: https://hacktoberfest.digitalocean.com/details

Happy Hacktoberfest!

Are there any other companies offering swag besides just DigitalOcean and Dev.to?

Glad you asked! :-)

[Time for a shameless self plug]

I have an open-source Jekyll site at HacktoberfestSwagList.com that tracks just that. Anyone can contribute to make the site better and add companies to the list!

It’s a Jekyll site so don’t hate me too much...

Happy Hacktoberfest!

Let’s Start Hacking Together!

Post your swag to Twitter and share in the love!

#Hacktoberfest

@Hacktoberfest

@DigitalOcean

@ThePracticalDev

Hacktoberfest 2019: Git, GitHub, and WordPress - Google Slides