{"id":19261991,"url":"https://github.com/hacksu/github-sourcetree","last_synced_at":"2026-01-31T07:01:54.359Z","repository":{"id":149141430,"uuid":"246147347","full_name":"hacksu/GitHub-SourceTree","owner":"hacksu","description":"GitHub vs. SourceTree","archived":false,"fork":false,"pushed_at":"2020-09-08T22:38:07.000Z","size":117,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-20T22:53:34.446Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hacksu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-09T21:38:15.000Z","updated_at":"2020-09-08T22:38:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"07af472f-7dee-463c-bb52-3ba9b5d98c73","html_url":"https://github.com/hacksu/GitHub-SourceTree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hacksu/GitHub-SourceTree","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FGitHub-SourceTree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FGitHub-SourceTree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FGitHub-SourceTree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FGitHub-SourceTree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacksu","download_url":"https://codeload.github.com/hacksu/GitHub-SourceTree/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FGitHub-SourceTree/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28932547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T04:05:25.756Z","status":"ssl_error","status_checked_at":"2026-01-31T04:02:35.005Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T19:29:18.220Z","updated_at":"2026-01-31T07:01:54.342Z","avatar_url":"https://github.com/hacksu.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e Tutorial on using GitHub and Sourcetree(source control GUI)\u003c/h2\u003e\n\u003ch2\u003eGithub - What Is It, and Why Use It?\u003c/h2\u003e\n\nIf you already know what github is, skip this section.\n\nGithub is for project management! Here's some reasons to use Github:\n\u003cul\u003e\u003cli\u003eIt allows you to share projects, either with a team or with the whole world, and set permissions on who can and can't contribute.\u003c/li\u003e\n\u003cli\u003eIf you don't have permission to edit a project, you can 'fork' it -- make a copy of it -- and edit it all you want\nGithub uses Git, a version control system (like SVN, if you've used that) that lets you work on your projects from any computer, and lets you go between different saved versions anytime you want.\u003c/li\u003e\n\u003cli\u003eWhen you have multiple people working on a project, Git also helps handle \"merge conflicts\" -- when two different users submit two different, conflicting submissions.\u003c/li\u003e\n\u003cli\u003eA bunch of other neat organization tools, like issues, wikis, and readme files like this one!!\u003c/li\u003e\n\u003c/ul\u003e\n\n \u003ch2\u003e Github Glossary\u003c/h2\u003e\nSome Github terms you might be confused by:\n\u003cul\u003e\n\u003cli\u003e\u003cb\u003eGit\u003c/b\u003e Version control system. You install this on your computer to let you easily move things to and from Github \u003c/li\u003e\n\u003cli\u003e\u003cb\u003eGithub\u003c/b\u003e The website hosting everything submitted by Git.\u003c/li\u003e\n\u003cli\u003e\u003cb\u003eRepository (or repo)\u003c/b\u003e Any github project. Basically just a set of files hosted on GitHub.\u003c/li\u003e\n\u003cli\u003e\u003cb\u003eClone\u003c/b\u003e You can take a Github repo and clone it to your local computer so you can work on it.\u003c/li\u003e\n\u003cli\u003e\u003cb\u003eCommit\u003c/b\u003e Once you have a local clone of a repo, you can submit a commit of your changes back to the parent repo. Each commit is basically a 'version', when we talk about version control.\u003c/li\u003e\n \u003c/ul\u003e\n(Note that git commit won't submit your code to Github on its own. The full process for committing code is git add [whatever files were changed], git commit -m \"your commit message\", git push. We'll go over this later.)\n\n\u003ch2\u003eGithub Setup\u003c/h2\u003e\nThe first thing we need is to set up a GitHub account. \u003cem\u003eIf you already have a GitHub account, skip this portion.\u003c/em\u003e\n\u003col\u003e\n\u003cli\u003eGo to github.com and sign up with a unique username, and an email you can access.\u003c/li\u003e\n\u003cli\u003eSelect the free account option and press continue. \u003c/li\u003e\n\u003cli\u003eYou'll now need to confirm your email.\u003c/li\u003e\n \u003c/ol\u003e\n\u003c/p\u003e\n\n\u003ch2\u003eMac/linux Git Install instructions:\u003c/h2\u003e\nIf you're using a Mac or Linux OS, open up the terminal. On a mac, you should be able to find it by searching for \"terminal\", or looking in your Applications folder. To see if you have git, type \u003c/p\u003e\n\n```git --version```\n\n\u003cp\u003eand press enter. If you don't have it yet, follow these instructions, and then restart your terminal to see if it worked.\u003c/p\u003e\n \n\u003ch2\u003eWindows Git Install Instructions:\u003c/h2\u003e\nIf you're using a Windows computer, open up Windows Powershell. You should be able to find it by searching for it. (Command Prompt would also work.) To see if you have git, type: \u003c/p\u003e \n\n```git --version ```\n\n\u003cp\u003eand press enter. \n\u003cbr\u003e\nIf not, follow the install wizard here: https://git-scm.com/downloads\n \nIt's a suggestion to \"use Git and optional Unix tools from the Windows Command Prompt.\" The rest of the options, the default settings will work.\n![](https://miro.medium.com/max/1232/1*eo_lqm7iG8TxgZ_FqmPMzg.png)\n \n \n If you don't have it yet, follow these instructions, and then restart your powershell to see if it worked.\nFor either setup, remember to do these commands too:\u003c/p\u003e\n\n```git config --global user.name \"Your name\" ``` OR \n\n```git config --global user.email \"your@email.com\"```\n\n\n\u003ch2\u003eRepo Setup through GitHub\u003c/h2\u003e\n\u003cp\u003eOnce you have a confirmed Github account, click on the + icon in the upper lefthand corner of GitHub, and select \"New Repository\".\nName your repository whatever you want -- \"My first site\" or something. Add a description, decide whether you want it to be public or not, and check the box that says \"initialize this repository with a README\".\nCongrats, you just made your first Github repo!\u003c/p\u003e\n\n\n\u003ch2\u003eCloning the Repo\u003c/h2\u003e\n\u003cp\u003eNow that you have Git installed, we can finally clone our repo! But first, we need to learn how to use our terminal.\n\nYour terminal always points to somewhere on your computer, and we can type different commands to navigate through our computer and interact with files. (Tip: Pressing 'tab' in the terminal will try to autocomplete whatever you're typing.)\n\nHere are the terminal commands we'll be using:\n```cd [somewhere]``` stands for \"change directory\". Replace [somewhere] with an existing folder. \u003cbr\u003e\n```cd ../``` will take you back one folder (ex: if you're in ~/Files/myfolder/, cd .. takes you to ~/Files/) \u003cbr\u003e\n```ls```  is an abbreviation for \"list\", which doesn't make sense but whatever. It lists all the files and folders in your current directory. \u003cbr\u003e\n```mkdir [folder name]``` stands for \"make directory\". Will make a folder named [folder name] in the current directory. \u003cbr\u003e\n\nType ```cd Desktop``` you'll navigate straight to your desktop. From there, navigate to wherever you want to keep your project on your folder. You can also type: \n```mkdir hacksuProjects ```\nor something to make a folder named \"hacksuProjects\" on your desktop (You would then type cd hacksuProjects/ to go inside of that folder.)\n\nOnce you're in the folder you want to store your projects, go back to your github repo, and click the green\nGo to your repo page on Github and find the green button that says 'Clone or download', and copy the URL it shows. Go back to the terminal and the following command, replacing [ur] with the URL you copied:\u003c/p\u003e\n```\ngit clone [url]\n```\nYou just cloned your repo to your computer! You can now enter ```cd [repo name]``` to go into your repo.\n\n------------------\n\u003c/p\u003e\n\u003ch2\u003eMaking Our Website\u003c/h2\u003e\n\u003cp\u003e\nOpen a text editor like VS Code, Atom or even notepad. \n \n\u003ch3\u003e Create a new branch \u003c/h3\u003e\nLet's create and checkout a new branch. \n```git checkout -b [branch name]```\nSee if it created your new branch by doing\n```git branch```\nWe'll make the changes just on this branch.\n \nIn your local clone of your repo, make a new file and name it with the extension .html, like \"index.html\" or \"website.html\". In this file, we'll be writing HTML, our first language! Then, go to the file and double click it. It should open up in your browser, just like a normal website would!\n\u003c/p\u003e\n\n ```\n \u003chtml\u003e\n  \u003chead\u003e\n  \n  \u003ctitle\u003eMy first website, yo !\u003c/title\u003e\n  \n  \u003c/head\u003e\n  \u003cbody\u003e\n \n   \u003ch1\u003eBest website ever\u003c/h2\u003e\n  \n   \u003cp\u003eHere's some text in a 'paragraph' tag\u003c/p\u003e\n   \u003cp\u003eHere's some more text, with a \u003ca href=\"https://youtu.be/zbc2LUAP6G4\"\u003elink!\u003c/a\u003e\n   \u003cimg src=\"https://i.kym-cdn.com/entries/icons/mobile/000/025/999/Screen_Shot_2018-04-24_at_1.33.44_PM.jpg\" height=\"200px\" width=\"400px\"\u003e\n \n  \u003cdiv class=\"myDiv\"\u003e This is a special divider.\u003c/div\u003e\n  \n   \u003cbutton onclick=\"alert('hello world')\"\u003eHere's a button \u003c/button\u003e \n  \n   \u003c!-- This is an HTML comment. It won't affect the actual content of the page --\u003e\n  \n  \u003c/body\u003e\n \u003c/html\u003e\n```\nSave these changes. If we do, ```git status```, we'll see the file was changed.\n\nGo to the file location in your file explorer/finder and double click it. It should open up in your browser and you can see the HTML code!\n\n\u003cbr\u003e\n\u003cp\u003e\nNote: HTML is used to format text, and tell the browser what each text is for. It works by surrounding text opening tags, like \u003cbody\u003e, and closing tags, like \u003c/body\u003e. The head tags surround information about the website, while the body tags show the actual content of the website. If any of these tags confuse you, turn to google to learn about them!\n\u003c/p\u003e\n\u003ch2\u003ePushing to our Github Repo with Git\u003c/h2\u003e\n\u003cp\u003e\nSo, now we have a website! Let's save it to our Github repo, so the whole world can see it!\nGo back to your terminal and navigate to your repo folder. There's three steps to saving to Github:\nAdd your files by typing: \u003c/p\u003e\n\n```git add [filename] ```\n\n\u003cp\u003e\nThe astrisk is used to mean \"everything in this folder.\" Alternatively, we could type git add index.html to only submit a single files.\n\nCommit your files with: \u003c/p\u003e\n\n```git commit -m \"initialized index\"```\n\n\u003cp\u003e\nNote that commiting your code creates a log of what has been added, and gets it ready to put onto Github, but it doesn't actually transfer it yet!\n\nEnter```git push ```to \"push\" all your local commits to your github repo.\n\nIf you didn't get any errors, go to Github and see if your code is all there! \u003c/p\u003e\n\n\u003c!--\u003ch3\u003e Pull Request \u003c/h3\u003e \nA pull request is a way to get the code we committed in the newly created branch to the master branch of the repo. \nIn GitHub:\n\u003col\u003e\n\u003cli\u003eCheck for a notice on the \"Code\" page that you can pull changes. If it's not there, go to the \"pull requests\" tab. \u003c/li\u003e\n\u003cli\u003e New pull request \u003c/li\u003e\n\u003cli\u003e Compare the new branch to the base. ie base:master \u003c- compare:[mybranchname]\u003c/li\u003e\n\u003cli\u003e If you're certain of the changes, select \"merge pull request.\"\n\u003c/ol\u003e\n--\u003e\n------------------\n\u003ch1\u003e Source Control GUIs\u003c/h1\u003e\n\u003cp\u003eIf working within the command line is not your preference, there are some great GUIs out there. Check out an extensive list per OS here: https://git-scm.com/downloads/guis\n\n\u003ch2\u003eSourceTree Demo \u003c/h2\u003e\nSourceTree is one of the options in that list and it comes from the Atlassian family (owners of Trello, Jira, BitBucker and more).\n\u003cbr\u003e\nDownloading SourceTree:\n\u003col\u003e\n\u003cli\u003eDownload at https://www.sourcetreeapp.com/ or just follow along with the lesson\u003c/li\u003e\n\u003cli\u003eSelect Bit Bucket option (not Bit Bucket server)\u003c/li\u003e\n\u003cli\u003eThere should be a pop-up prepopulated with GitHub credentials. If that’s not there, enter your GitHub credentials.\u003c/li\u003e\n\u003cli\u003eIf asked if you need a SSH key, say “no.”\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch2\u003eIn Sourcetree\u003c/h2\u003e\nGo to “+” at the top. Since we're working in the same repo, we can just add. Browse the the repo's file location.\nWe're going to add a new file named \"style.css\". Copy and paste the below code.\n\n```\nbody {\n  background: cyan;\n}\n\np {\n  color: red;\n  font-family: Courier;\n}\n\n.myDiv {\n  width: 400px;\n  height: 300px;\n  border: solid 2px black;\n  border-radius: 25%;\n  background: yellow;\n  \n  animation: myAnimation 10s infinite;\n}\n\n@keyframes myAnimation {\n  from {\n    filter: hue-rotate(0deg);\n  }\n  to { \n    filter: hue-rotate(360deg);\n  }\n}\n\n```\n\u003c!--\u003cp\u003eIt’s a good habit that when you are not working with a brand-new repository to fetch for changes. If someone else had pushed to the same repository, we’d need to pull their changes locally. Let’s hit “fetch” on Sourcetree. We'll see there is a change and then we'll hit \"pull.\" When we open up the editor, we should see the new changes from us pulling.--\u003e\n\nLet’s make our index.html connect with the styling.css file that is now in our editor.\n\n Now, to link it to our HTML file, we need to add this in our head tags in our html file:\u003c/p\u003e\n```\n\u003chead\u003e\n \n \u003ctitle\u003eBest website ever\u003c/title\u003e\n \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n \n \u003c/head\u003e\n```\n\u003cp\u003eSave your HTML and see if the styles were applied! Make sure that in href=\"style.css\", \"style.css\" is the exact same name as your css file. Also make sure your css file is in the same folder as your .html file!\n\nIn Sourcetree, go to “File Status” and we should grey box showing the changes made to the files. We should see whatever changes we made to index.html shown in there. If we want to commit those changes, select the file name, hit “stage selected.” It should move into the “staged files” box. This is taking place of the ```git add *``` command we did earlier.\n\nWe are ready to write our commit message. Do this in the bottom-most box (underneath your username). This is taking place of the ```git commit -m \"message\"``` command we did earlier.\n\nThe “push” feature at the top should now have a blue oval with the number of files to commit. Select “master” branch under “Branches.” Notice that to the right, it shows the changes by denoting green for additions, yellow for modifications and red for anything removed. Hit “push.” This is taking place of the ```git push``` command we did earlier.\n\n\nVerify that changes were pushed in GitHub. Then try opening ```index.html``` locally to see the new styling! \u003c/p\u003e\n\n\u003cem\u003eCredit to Ben Holland for writing the GitHub portion of this lesson! Thanks, Ben! :D \u003c/em\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fgithub-sourcetree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacksu%2Fgithub-sourcetree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fgithub-sourcetree/lists"}