Trying to setup Git and Github for Projects

What I have on my local Windows 10 computer:

Git, GitHub and VS Code.

Currently, I am able to login to BlueHost and go to file manager and upload one at a time, my html and css files to my public_html folder. However, I am making tons of changes constantly as I am playing around with the Responsive Web Design lessons and projects.

I am getting frustrated with the time consumption of this mundane repetitive task. From what I understand, in a real world work environment, using Git and GitHub is the solution and if set up along with VS Code. Your changes can automatically be pushed onto the public_html folder, along with adding a readme file and documenting the versions and changes which is what will make me useful in a professional environment.

I have read and YouTubed dozens of intros and how to’s on the matter. I am completely lost. It’s overwhelming me. The more I learn, the most lost I get.

I put a solid 3 weeks into trying to figure this out and I’m guessing around 40+ hours of trial and error following guides and tutorial follow along’s.

Furthermore, I don’t want to just be able to do this, I want to fully understand it to the point I could teach someone else how to do it. I don’t learn just to get things done.

I feel like I’m orbiting what I need to know and just can’t put the pieces together. With 40+ hours of research and failed trails and errors. I held a 4.0 gpa in Computer Science at UCSB and aced my Unix/Linux class (went broke and dropped out and joined the Air Force). But that was 10 years ago. I feel like this shouldn’t be this much of a struggle for me. If you can please offer suggestions. HELP!

*I am fully aware of FTP and SFTP, but that is a hack and I want to learn this the right way with version control and ability to collab etc. Thank you

2 Likes

I feel the frustration. My assumption is that you’re struggling with getting your changes onto your BlueHost server right? If you’re struggling with Git and GitHub as well, let me know and I’ll add more details to this.

I don’t think a lot of tutorials explain how to get Git setup with shared host providers like BlueHost.

My first suggestion is to look at other hosting options. If the websites you’re building don’t have any backend code I highly recommend you look into Netlify. If your website is already on GitHub it will take you less than 5 minutes to host it on Netlify, with automated deployments working and it’s free!

If you do have backend code, then I would look at Heroku. They also have a generous free option and they also manage deployments for you.

I suggest the above two options because setting all of this up on a shared host is pretty involved. Given your background I’m sure you’ll be able to figure it all out once you’re pointed in the right direction, but it’s just a lot of work for little gain in my opinion.

If you’re still set on using BlueHost for the time being the thing you want to research is called a “bare repository”.

Basically you need a special copy of your git repo to live on the server you want to deploy changes to. Once it’s living there you’ll need to add the remote on your windows machine.

In your command line it would be git remote add BlueHost user@git.yourwebsite.com:/www/public_html

The actual username and the path to where the code lives is going to depend on how your server is setup.

Also note, that you will have had to setup your windows machine to be allowed to SSH into your server. This isn’t always possible by default with shared hosts and you may have to enable it through your Cpanel, or sometimes you even have to contact your provider and ask them to enable it for you.

Looks like BlueHost has their own tutorial for that: https://www.bluehost.com/help/article/ssh-access

The other important bit to know is that you’ll need to make sure that permissions are configured properly. If your website has backend code written in Node, or PHP for example you don’t want the public to have access to those files nor any of your app configuration or basically anything that’s not considered a public asset.

Usually a website/web app will have a public directory which is configured for public read access. Everything else is one directory level higher and is locked down to the system user only.

Sounds like you might already know how to modify all of that so that’s all I’ll say.

Here’s some good info on how to actually create a bare repository and get it on your server: https://git-scm.com/book/en/v2/Git-on-the-Server-Getting-Git-on-a-Server

And here’s another great article on how to setup what’s called “Git Hooks”. They will allow you to push your code to GitHub instead of directly to your server and just have the code automatically deployed to your server via a script that executes on various hooks such as “merging code into master/main”. https://www.digitalocean.com/community/tutorials/how-to-set-up-automatic-deployment-with-git-with-a-vps

Let me know if any of that needs more explanation!

2 Likes

Really appreciate your reply. I will dig into this and see if I can’t figure it out from here. I have already setup windows to allow SSH and I have enabled SFTP and FTP on cpanel previously so it seems my efforts weren’t a complete waste lol. I am going to be doing a bit of backend coding using PHP in the near future so I will stick with BlueHost.

I think “bare repository” was the keyword I needed to move forward. I am pretty solid with GitHub, making a repository and pushing commits etc. Git is brand new to me.

One question I do have that may help. How do you commit your work to your server once you have built or updated a project? Do you use a CMS? My old work used Magento. I am dusting off the cobwebs, but I don’t have much experience in general with deployment and work flow.

I live in the middle of no where and the nearest anything that has to do with dev clubs or groups is over 2 hours drive away. So I really appreciate your time and effort.

1 Like

Your situation resonates a lot with me as I was in a similar place earlier in my journey :slight_smile:

First, the way you commit your work to the server is the same way you’d commit it to GitHub only the “remote” will be the name of your BlueHost repo.

So if you’re using a CMS there’s a few more hurdles to jump through to commit your work to your server.

First of all most CMS’s are setup to encourage changes being done live on the server. Installing and configuring plugins/packages is normally done through the UI of the CMS itself. Not ideal.

What you ideally want is for plugins to be tracked and managed by git by installing and configuring them locally on your machine. In modern PHP development packages are managed with a package manager called Composer. Packagist.org is where open source PHP packages are typically hosted and composer is a command line tool that manages pulling them into your project and keeping track of what version you’ve installed as well as letting you know when you should update.

I’m not sure about Magento but for WordPress I recommend taking a look at https://roots.io/

They have a tool called Bedrock which modernizes WordPress development and helps you make all your changes locally instead of having to log into your admin dashboard to make changes.

Ideally with any CMS you should only be logging into the admin to manage content. Content being a blog post, or a description on an about page, or new products for your store etc

Updating themes, templates, plugins etc should always be done locally and checked into Git.

And the key to enabling that is finding a tool that lets you manage your CMS extensions with a package manager like Composer.

After that you deploy your changes similar to the way you would otherwise. Simply just pushing to your bare repo on BlueHost.

The additional steps is that now you have to SSH into the server and run any commands required to keep the packages in sync. For example composer install will need to be ran everytime you deploy changes if you’re using Composer for package management.

Eventually you’ll want to automate any of the steps you have to SSH into your server for. Ideally you never have to SSH into your production server at all but that takes a lot of work and is more or less impossible to achieve on a shared host.

I should mention too, that beyond all of this the next step would be managing your database schema in Git as well. This is typically done by having scripts called “migration files” which make changes to your database. There are packages that make writing these easier but it can literally just be raw SQL as well.

A lot of CMS plugins already manage this for you but if you have anything custom you’ll want to make sure you understand how to create database migrations.

The next big hurdle will be learning how to push your changes to your server without any downtime. Commonly called “zero downtime deployments”.

This is another thing you get for free with services like Netlify and Heroku by the way. But the main concept relies on Git Hooks and symlinks.

At a glance, your server will have many copies of your app and the directory structure will look something like:

current
12-21-2020_08_09_23
12-21-2020_07_26_58
...and so on

Where each deployment pushes your code to a directory named with a timestamp, and when the deployment is finished a symlink is created between that directory and current.

This ensures visitors on you site don’t see a broken page while you’re in the middle of pushing changes.

Good luck!

1 Like

You are talking way over my head friend. I feel bad, you put a lot of time in your posts. But I don’t even understand the first thing about anything you are talking about. It just made me more overwhelmed than I was prior lol. I have used notepad++ for 10 years. I just downloaded VS Code, GitHub and Git in the last few weeks trying to play with the big boys and I’m just flat out lost. I have never used or worked with Wordpress. It was preloaded on my server when I bought the dedicated IP through bluehost and I just deleted the folder to upload my index.html file.

My take away from all this, is that I just need to do the Responsive Web Design certificate, then move on to the next, and so on. Perhaps I will be taught the big picture through one of the later courses so I can understand what all these intricate things are actually good for and why we use them and how to utilize them.

I just know I want to be able to build ecommerce websites and mobile apps. It seems like I need to learn everything to do that. I need PHP so I can make logins for any apps or ecommerce checkouts, I need HTML CSS and JS to build the front end look and layout, and I need to learn about networking, encryption and what ever else so I can securely take peoples credit payments or securely hide their sensitive info like personal info, etc.

I never liked wordpress because it does things automatic for me, I want to do things myself and I want to not have a "This site was built with ______ " at the bottom of my footers. My end goal is to be fluent in software engineering so that I can create high quality, fast, and good looking websites and apps. I run a small company and I want to build our company website and have clients be able to log in and checkout with our products (Real Estate) such as tenant’s paying rent online. I don’t understand what API’s are and it seems to me I can learn the back end and just have my own checkout system. I made the static website for a local music store and having to constantly update the website with new inventory is a huge time killer. I’m trying to learn all this stuff so I can create an app for them to take photos and set the price for their new products and be able to upload them on their own, with out having to send me 200+ pictures with random price sheets and product descriptions every week.

My end goal is I want to be valuable so I can move out of America. I’m tired of this country and Software Dev’s are pretty much a open ticket to any country of my choice. At the end of the day, I’m trying to develop a useful skill to GTFO of America. Out of all the useful skills I seem to enjoy, and have time to learn on the side software dev is pretty much it. My uncle is a hugely successful Network engineer and he said I have a knack for the trade and I do really enjoy coding, but not sure of much else beyond that. Getting straight A’s in CS school seemed like a good indicator I was onto something. But I dropped out Junior year for financial reasons. So I wasn’t very deep into the curriculum.

1 Like

have you done any studing with git and github?

have you started with something like

1 Like

I answered your questions in my original post. Thanks for the link. I have more than enough material to look into between your link and @dannyjamesfletcher. I really appreciate it.

git is a really complex piece of work

if you try to understand it wholly you will get stuck there…

as you are doing the fcc curriculum, why don’t you start with coding your projects locally, tracking them with git (committing often), and pushing them to a github repository?
maybe even add in using branches

in this way you start understanding version control.

once it’s ready you could publish them on github pages, which is maybe the less complex deployment project that exists, so I don’t think much useful for you.

1 Like

That’s actually EXACTLY what I was trying to do. I just don’t understand Git atm. I was able to walk through the online tutorials I found and do the mkdir and have git form a folder and stuff, and I was able to verify that git is listening or something. But it still doesn’t make sense to me. Ever since I downloaded Github, it took over my VS Code and I can’t even get my projects to populate in the VS Code list. I don’t know who is in charge. Git seems to be the one in charge, but so far I just have a dozen random folders and files created all over my ssd drives lol. And the original folder I use to build my projects isn’t part of any of them. I read into stuff about importing your projects, but kind of got lost at that point.

One thing that confuses me… How is git tracking anything. From what I can tell it’s just a shell command app? Is Git online keylogging me? I don’t get Git. But I haven’t read that FCC article you sent yet. I’m going to have time tomorrow evening to dig down into your posts.

Don’t know if this tells you anything, but here is the last email I got while tinkering with Git.

A first-party GitHub OAuth application (Git Credential Manager) with gist, repo, and workflow scopes was recently authorized to access your account.
Visit Sign in to GitHub · GitHub for more information.

To see this and other security events for your account, visit Sign in to GitHub · GitHub

If you run into problems, please contact support by visiting GitHub Support

Thanks,
The GitHub Team

git is a version control system, in a project tracked with git every time you make a commit, it makes a snapshot of the current state of your project.

this explains what’s git better than how I could

Hey man no worries!

It’s hard to gauge where people are at without getting to know them a bit, so I just picked a spot I thought maybe you were at and went with it. Don’t feel bad about being overwhelmed. It all overwhelmed me too!

Keep in mind that long post I shared is made of knowledge I learned while on the job. I learned that stuff at the first full-time job I landed, and not one person I was working with knew how to do any of that. So by no means is it a requirement to be a web developer. You can get pretty far just using FTP.

Apologies for overwhelming you! It was somewhat my intention though if I’m being honest. What you’re trying to do is a giant PITA on a shared host provider and it’s the reason I highly suggest looking into other hosting options like Heroku if you want to go down that road.

Sounds to me like you’re uncle is right in saying you have a knack for this sort of thing. It may all seem overwhelming now, but keep at it and give it time and this stuff will all seem basic to you one day. But you can only learn so much at once.

Just a piece of advice though.

A huge part of being a developer is knowing how to identify the parts of your idea or application that are unique and the parts that are not. Developers spend a lot of time plugging a bunch of stuff together to get them 90% of the way, and then writing custom code for the last 10%.

You don’t have to learn a ton about security and handling credit card payments to meet PCI compliance. You can just use PayPal or Stripe and they’ll take care of it for you. No need for CC’s to exist in your system at all.

You don’t have to be an expert in authentication to have secure logins either. You can use Auth0 or Okta and they’ll take care of that for you.

Need an admin screen for uploading products to a digital store? Need a shopping cart, a way to accept payments and handle shipping? Look into Shopify.

A lot of the time you just need to understand the birdseye view of a concept and you can let other services or packages take care of the rest. You don’t have to be an expert at everything.

Good luck!

So, you maybe don’t need to worry too much about it at the minute. It is a very useful tool, and very important to how software is developed, but if you use it, definitely follow what @ilenia says, just go baby steps at first.

Treat it as a way to save your code (and a save that allows you to roll back if you screw something up). Make a little change, commit it (save). Make another little change, save it. It’s a clunky version of save, sure (you can’t just press CTRL+S), but there are serious benefits.

It isn’t magic what it’s doing, and it isn’t doing anything dodgy. The message you’re getting is because you need to connect to GitHub over a network, so that’s just telling you that you’re connected.

git just listens for file changes in the folder where it’s been initialised for a given project. It’s dumb – if you initialise the project in, say, the root directory on your computer, it will try to track every file on the entire computer. If you delete the .git folder, it stops tracking anything. It doesn’t care about anything except recording the changes to files. If there isn’t a .git folder in the project you want to track, nothing gets tracked. If you accidentally create a .git folder in a subdirectory of your project, it’ll only track changes in that subdirectory.


Think of git like a business accounts ledger. With a ledger, what you do is you never delete anything – you always go forwards. You have {this} much money to start with. You sell something (+money). You have an expense (-money). You have an expense (-money). You sell a few things (+money, +money, +money) And you just keep going like that.

With git, the ledger is in a folder in your project (called .git). If you look at the project (and make sure you’ve set the file explorer to show hidden files), you’ll be able to see it. And instead of credits and debits, the git program tracks changes to files in your project. You add a file, and maybe modify some code in another file. Then you add and commit those changes. The ledger is updated, and it records the details of the change under an ID.

git is designed so that multiple people can work on the code at the same time. So they all download a copy of the project, and each copy has that ledger as well. They can freely make their own changes, and add and commit them. They can fetch other people’s changes. If they or you screw up, because each change has an ID, can just say go back to {that} ID, where you know everything worked.

In this model, GitHub is just like another person. They themselves never add or commit any code, but they have a copy of the project, and they are really easy to connect to, so they can act as the central source of truth – the place where all the code gets pushed to and synchronised.

git also lets you branch the code. Say you want to add a feature to your ecommerce application. Instead of just adding to the main path of code directly (call that main), you split off a new path (my-great-new-feature) . You can work on that without affecting the main path at all. And if it doesn’t work out, you can just discard it and go back to the main path. If it does work out, you can merge your changes back to the main path. To continue the ledger analogy, it’s as if you could temporarily create a new ledger based on the entry at a specific point in the book, record credit/debits in that, then once it was done, merge it back into the main ledger and the main entry would be updated to take into account those changes.

2 Likes

one note, github has recently changed one thing: what was before the master branch, is now named main branch in new repositories, but I think all the tutorials we have linked are older than that change

1 Like

That’s a good point, edited my reply but yeah everything uses master (as will the majority of tutorials and articles online tbh)

That’s a great analogy for Git!