Dev Elements & Preferred Dev -> Test -> Production Workflow?

Hello Everyone,

I am preparing some private notes to help me understand how to set up a "modern" development environment that involves a development workstation, a test/staging server and a production server, and I need some help.

For decades now, I have simply logged into and coded directly on my production server using vi.  This approach has caused me many undesired troubles over the years (WSOD, Notice/Warning/Error messages) so I would like to transition to a safer approach. 

I would also like to align better with how things are done today, which will enable me to work more easily with the Backdrop CMS Project people in terms of code creation, review and maintenance.  What I *think* the Backdrop CMS Project is using is an approach more akin to the commercial development environments I encountered at various points in the past.

To further my understanding, I'd like to confirm that the following elements are needed:

1) A development workstation (Ex:  Windows machine)
2) A development code repository (Ex:  local hard drive and/or GitHub)
3) A private development/test/staging server (Ex:  physical or virtual)
4) A public production server (Ex:  physical or virtual)

Is the above correct?  Am I missing anything?

In terms of the production workflow, I am also wondering about code deployment pattern:

Does it work like this:

Or this:

Thanks.