In this chapter of the Zero To Maker Workshop, we'll be documenting our projects, making a free website with GitHub pages, and I'll be giving you a quick introduction to Git to back up our projects, all key parts of completing and maintaining your projects. If you're new to this workshop, Jared and myself will be taking you on a fast-paced and practical journey to learn a wide variety of maker skills so that you have the tools and knowledge to make anything. Follow along as we develop our own projects and share insights into the process.

Now let's start with a way to save your projects. You may have heard of something called Git or GitHub. And Git, the base of it, allows us to save versions of our projects and GitHub allows us to upload these files to the internet so that we can access them elsewhere and have them saved on the cloud. Now let's begin by creating a GitHub account. Let's head over to the sign-up page, enter your email and password and follow through with the rest of the form.

Git or GitHub usually uses a command line to interact with your project. And if we don't want to remember all of our commands, we can use a program called GitHub Desktop. So let's Google GitHub Desktop and we'll click on this top link here. We're using a Windows machine, so let's download for Windows. Wait for that to install and click on the setup here. Once that's installed, we'll get this page here. So now we're here on the landing page of GitHub Desktop. So let's sign in with github.com. Okay it's asking us for some email information here. It's already pre-filled this using our GitHub account, so let's just click finish. Here we are, this is the starting screen for GitHub Desktop. We've got a getting started here, we've got a tutorial repository button, we can clone something from the internet, or we can create a new repo on our hard drive. You could create the local repo first and push that to the web, or we can create the web version first and clone that onto our local machine. So I'm going to go back to the GitHub website and I'm going to click create repository.

Here on the create repository screen, we only really need a few things to be able to save files to our project. So our repository name, I'll call this starting project, our GitHub starter project. If you've got any repos that are the same name, it'll flag an error here. The description's optional and you might want to add a little bit about what your project does, but you can always come back and add to this later. We want a public repo so that everyone on the internet can see, and be wary when you have a public repo. You don't want to put any private information like Wi-Fi details or even your address, like latitude and longitude from a GPS project. Clicking create on the repo. Now here we are. This is the homepage for our GitHub repo, and this is the version that's stored up in the cloud. Now to be able to make any changes down in our local computer, we need to do something called cloning. Back on GitHub desktop, we will clone a repository from the internet, the second button here, and out of the three tabs up the top, we'll be using GitHub. We don't have an enterprise account, and we're not copying from someone else's URL. If you don't see your repo appear, just click the refresh button here. Now we can click clone. So now we've got our folder from the internet and it's on our local machine, but what's inside of it so far? Let's click on this show in Explorer button and we can take a look.

Now let's create a quick test file just to see that we can push changes all the way up to the internet. So I'm going to right click and create a new text document. We'll call this one test.txt. Let's open this up and write some text. Perfect. Let's save that and close the file. If we click back in GitHub desktop now, we can see that there are some changes. We've added this new test.txt file and it's shown us the contents. Now let's create a commit. So in the commit title here, we want to be very descriptive about what we've done. And then description, we can add a little bit more context around what it is we're actually doing. Now that we've got that all filled out, let's commit it to main and it's still only on our computer. So clicking this publish branch, that'll send that up to the internet. Now it's fetching and refreshing. Perfect. No local changes. Refresh the page. Hey, we've got some content. Let's have a look at this text.txt. Perfect. We can see that all of the content has come across from our original file. But what happens if we're working on a project with some other people or we've just cloned someone else's project and then they make some changes? We won't have the latest version on our computer. So let's emulate that by adding a new file. In the GitHub repo, click on add file here and create new file. Let's call this one test2.txt. And the file extensions here do matter, so make sure you add.txt. For the contents, we'll add more content and we'll just commit those changes. And this skips all of the commit and pushing since we're doing this all on the website. For this commit message, we're emulating another person working on the project. So we'll call it exactly that. And we want to commit directly to the main branch. So we've got two files here in our GitHub repo. But what about the local version on our computer? Let's take a look back at GitHub desktop. So we can see that there's still no local changes, but at the top in GitHub desktop, we can see that we last fetched from the origin or the GitHub repo about six minutes ago. So let's click on that and see what happens. So there is some new content on the GitHub repo. Let's pull that onto our local computer and then check out what happened in the files. And that test2.txt has arrived on our local computer with all the content. Great, so we've made some changes both on the GitHub repo and in our local repo. But how can we see all of these changes? So let's minimize these two and we can see that there's a history button here. Let's click on that and take a look. So we can see we've got our two commits here. Here's our initial one that we made on GitHub desktop. And here's our second commit that we made on the GitHub website. So Git, it's a great way to save and backup your projects. And these commits are like checkpoints in a video game. So you know that your work has been saved from before. And it might be a little time investment throughout your project, but it will save you tenfold when things go wrong.

Documenting is such a key part in completing our projects. It not only gives back to the maker community, but it's also a way of keeping a list of what you've made. You'll build a portfolio for jobs or for uni and it helps you keep track of your projects. Finding the right service for publishing your project is hard. And since we already have all of our project files on GitHub, let's use their website service. GitHub Pages allows us to create a basic and free website so you can share your projects. So let's check out the process on how to do that. So from our main GitHub repo, we need to enable Pages. So let's head to the Settings tab and then on the left nav bar, click on Pages.

Here we are, GitHub Pages. We can see here that it's currently disabled and we need to select a source to enable GitHub Pages. So let's take a look at this first drop down box and we've got a couple options for branches here. We've got None, which keeps it disabled and we've got the main branch. So we'll select that and we've got a couple of options here for a folder. Now if you want to organize your project.GitHub Pages should be enabled now and we can see that we're currently building from the main branch. That's perfect. But how do we get content from our GitHub repo onto a website that we can use? And that's where we need to use Markdown. That's a language that we can use to build our website and it's a lot more human-readable than HTML. Here we're using GitHub's own Markdown cheat sheet and this will give us tips on how to use things like headings, links, and images.

So now we'll create a Markdown file and you'll notice here in the Create File option there isn't an option for Markdown. Now a text document is very similar in that there's no contents of the file to begin with and it's human-readable text. So we'll click Create here and we need to rename even the file extension. So let's click Control A. GitHub Pages is expecting one of two file names, either README.MD in all capitals or INDEX.MD. We'll use README since that also presents on the GitHub repo page. We need to authorize that we do want to change the file extension. That is important.

Perfect. So we've got our README file installed here and it's not giving us a program to open with. So let's just right-click and click Edit with Notepad++. We'll be using Notepad++ to write our Markdown and this gives us access to a preview window which will be very helpful for designing our website. The default installation of Notepad++ doesn't include a Markdown preview. So let's have a look at the Plugins option and click on this Plugins Admin here. I've already pre-searched for Markdown so let's find and we'll click Install on that. Here we are. We've got the plugin installed now and if we go to the Markdown preview we can click on this Toggle Markdown panel and we'll be able to see all of the changes that we make live to our Markdown file.

To get started on our Markdown file we'll get a heading and some example text. So let's head back to our Markdown cheat sheet to see what those look like. Okay, so here we've got Headings. It looks like the first level heading just uses a hash and then a space followed by our text. And normal text will follow the same format just with no pre-pending or appending characters. So let's head back to our Notepad++. Perfect, we've got our Markdown formatted and we can see the preview here in the right-hand window. But how do we view it on the web?

So we'll push our Markdown file up to the GitHub repo and we'll have a look at where we can find it on the internet. We'll open up GitHub Desktop again and we'll go Create, Readme, we'll commit that to the main branch and then push to origin. We've pushed our local repo onto the GitHub repo. So let's have a look and see if there's anything in our Pages tab that might be able to find our website.

Awesome, so we've had our page deployed and it's currently on the internet. Let's have a look. Sweet. So anyone on the internet will be able to access this link. The example we've worked through is more than enough to get started. But say your project has a fun little side quest or you simply want to document a different feature in depth more.

So let's add a second page. Let's head back to our File Explorer and let's make a new Markdown file. We'll call this one page2.md. Let's open that one up with Notepad++. So let's add a heading and some example text. We've got our second page set up, but how do we navigate there? So let's take a look at the GitHub cheat sheet to see if there's any clues on how to do that. The link text is in brackets followed by the round brackets with the URL. We've got some section links and relative links. That looks like it could be promising.

So here we've got a simple folder name followed by the file that we need to link to. So we need to add a forward slash and that should link to our second page. So let's add that to our homepage and our second page. So here we'll add the link text followed by a page URL. Remember, we do have to put a forward slash before this followed by the file name. And close in that bracket. And you can see that our preview window has rendered all of this. But the link won't work because it's not behaving like a web browser would.

Let's head back to our readme file and add a link to our second page. Perfect. Making sure to include that forward bracket and we've got that rendering here as well. So let's push that to the repo and observe those changes. Making sure we've got nice descriptions, commit to main and push. So let's take a look back at our GitHub repo, back into settings, pages, and see that we're still waiting for a new deploy to happen. So let's refresh the page until we can see that it's updated recently.

Perfect. Now it's updated. So let's click on this link and investigate the latest changes. Awesome. We've got a link here. So this is our homepage and this is our second page. How good. Next step, we'll be adding an image to our page. I've got an image copied. So let's head back to our project folder and I'll add that to its own folder. Best practice is to create a new folder for all of your media. So I'm going to create this IMG folder. Head into the IMG folder and I'll paste in my image. This is just the sketch that I uploaded in week one. Make sure that you've got the correct rights for all of the content you use.

So we've got that image in our repo now, but we haven't committed it. But since we can use relative links like before, we know exactly what the link will be. So let's open up the readme again and we'll add the image. We've got our image saved in an IMG folder and it's called liam-sketch.jpg. So let's write that down and we'll head back to the GitHub cheat sheet and we'll take a look at how to add an image. Here in the image section, we need to pre-pend the line with an exclamation mark. The alt text will be in square brackets and then the link for the image will be in parentheses. So let's add that to our readme.

Perfect, now I've got our image rendering here. So let's save and commit all of that. Let's commit to main and push. So we've updated our readme and we should have an image now. Let's take a look. Perfect, that image is displayed and this is pretty much everything that you'll want to put on a website for your projects. Thanks for coming along and learning how to document your projects with me. Jared and I have been using GitLab to publish our projects for Fab Academy and you can find links to our websites below. Tune in next week to learn all of your favourite maker skills.