<h3> Getting set up with GitHub </h3> <p> GitHub is a popular version control and collaborative network, usually used for writing software. For the purposes of this class, we will use GitHub as a hosting service for our websites as well as version control (backup) for our code. We'll first make sure everyone is set up with GitHub, then we'll start writing HTML and CSS. By the end of class, we'll make sure that everyone is able to save and upload their websites. Daniel Shiffman has a great tutorial series on <a href="https://www.youtube.com/watch?v=BCQHnlnPusY">using Git and GitHub</a>; the introduction video has an explanation of why GitHub is so useful. </p> <h3> Step 0: Download and Install Software </h3> <ul> <li> First, download and install <a href ="https://www.sublimetext.com/">Sublime Text</a> (unless you already have a text editor that you like).</li> <li> Next, navigate to <a href ="http://github.com">github.com</a> and create an account. </li> <li> Download <a href ="https://desktop.github.com/">GitHub Desktop</a>, open it, and link it to your account. </li> </ul> <h3> Step 1: Create a New Repository </h3> <ul> <li> Open GitHub Desktop. In the top left corner, click on "Current Repository" to reveal the "Add" button; then click "create new repository". Name the directory something descriptive like "PS70" and make sure that it saves to the GitHub folder on your computer (for Windows usually "C:\Users\your-name\Documents\GitHub\"). Click "Create Repository".</li> <!-- <img src="./github0.png" alt="github0"> --> <li> Click "Publish" and enter a description, like "Documentation for PS70: Introduction to Digital Fabrication". You should see a dialog box that says "Keep this code private" -- make sure to uncheck that box (code needs to be public in order to be published on the web). If you've signed into GitHub Desktop using your GitHub credentials, you should be able to publish this repository under your GitHub username. Click "Publish". </li> <li> Congrats, you've created a GitHub repository! You can check the "remote origin" at <code>https://github.com/your-username/PS70/</code>. But there's nothing yet in the repo, so let's add some content. </li> </ul> <h3> Step 2: Add Content to the Repository </h3> <ul> <!-- <li> Download this <a href="./simple-demo-navbar.zip" download> simple template</a> (or find another template you like). </li> --> <li> Consider finding a former student's website that appeals to you. <a href="https://c2bstewart.github.io/PS70/index.html">Clarissa Briasco-Stewart's</a> might be a good choice. You can search github.com for her username (c2bstewart), and download her repository and save its contents in your newly created repo. Then you can start to incrementally personalize the page to make it your own. Note that you don't need to make a grid layout for your landing page; <a href="https://manas-kulkarnii.github.io/PS70/">Manas' page</a> is a good example of a simpler design. Just make sure to give proper credit for any code you borrow (anywhere in your repo is fine). </li> <!-- <li> Unzip/extract the file to your /Downloads folder or wherever else, and copy the entire extracted contents of the simple-demo folder (but not the folder itself) into your newly created empty repository. (Copying over the simple-demo-navbar folder just creates a redundant level in your directory, meaning that your root url would be <code>username.github.io/PS70/simple-demo-navbar/index.html</code> instead of <code>username.github.io/PHS70/index.html</code>) </li> --> <li> Back in GitHub Desktop, clicking the "Changes" tab should show you that a bunch of new files have shown up in your repo. </li> </ul> <h3> Step 3: Save the Changes to the Remote Repository </h3> <ul> <li> In GitHub Desktop, you'll notice that the changes we made are reflected in the "Changes" tab. We ultimately want to "push" these changes to the online (remote) repository. But first, we need to "commit" those changes -- in other words, create a log of what we changed. This is a required step, and it's really useful when we're working collaboratively, or in case we ever need to go back to a particular commit. Give the commit a summary like "added files from template", and click "Commit to main". </li> <li> We've logged the changes, but we haven't yet published them to the master branch of the repository. This step is called "pushing". Next click "Push origin" in the top right corner. This will push your changes to your remote repository (the version stored on GitHub's website). If you go to the repo home page (<code>https://github.com/your-username/PS70</code>) you should see all of those files in the directory. </li> </ul> <p> You have successfully synced your local directory with your remote repository. Anytime you work on your code, make sure to not only Ctrl+S to save often, but also periodically commit your changes and push them to your repository. Making changes to your website, committing and pushing them to your repo will also be the way in which you will turn in assignments. GitHub commits have timestamps, which are used to verify timely submission of assignments. Make sure you don't forget to push your updates before class! </p> <h3> Step 4: GitHub Pages </h3> <p> So far, we've created a repository and synced it to our local drive. We know that this directory is to be the source code for our website; now we just need to publish it on the web. For that, we can use a convenient service called GitHub Pages. Since we're using GitHub for version control anyway, it's straightforward to also use it as a hosting service. It will automatically update our website every time we push to our remote repo! (that saves a time-consuming step compared to other hosting platforms). <ul> <li> Head over to <code>https://github.com/your-username/PS70</code> and click the "Settings" tab in the top right corner. Scroll down to "Pages" and select "main branch" from the "Source" dropdown.</li> <li> That's it! GitHub should tell you that your site is now published at <code>http://username.github.io/PS70</code>. Follow that link and you should see your content there. (Note that you might need to wait up to 10 minutes before the page is updated. To get a more immediate preview, just open the html file in a browser.) </li> <!-- <li> Finally, please click the "Collaborators" tab on the left sidebar (in the GitHub settings tab). Please add user "nathanmelenbrink" as well as your lab TA as collaborators, so that we can help in case you ever run into a problem with GitHub. We'll also add your webpage to the class directory. </li> --> <li> Finally, please copy your website URL and paste it in the Canvas Assignment. We'll then add your site to the class directory. </li> </ul> </p> <p> That was a lot of steps, but this is a really important workflow! You'll need to go through this process at least once a week, so it will become routine. Over the semester, as we start to use more features of GitHub, it will start to make more sense why it's useful. </p>