Fab Classes: Welcome to the first recitation.
Fab Classes: And once again, these are supplemental, but encouraged, unpacking topics in the class. Today is a key one. Julian, who manages our IT,
Fab Classes: Covering version control and GitLab, And as a beginner, this might seem like possibly an annoying topic.
Fab Classes: But this is under the hood in a lot of other things you use, and you'll find ends up being one of the most important skills in the class.
Fab Classes: So, Julian?
Julian: Yes, thank you, Neil. Okay, so,
Julian: Let's… just briefly, I'm gonna… yeah.
Julian: You can find these slides under the 2026 schedule page.
Fab Classes: As a reminder, like the classes, this is interactive, so pipe up in the chat with any questions, comments, and if it's really burning, excuse me, raise your hand or unmute.
Julian: So I'm just briefly gonna talk about some of the platforms that we host for this academy. We've got the Fab Labs AO, which is a global network platform that all the Fab Labs, sort of sign up to, and they're shown on a map. And this also has a forum.
Julian: and a sort of a sign-on platform that we will use so, all your logging in, fields will be done through the Falvazero platform, so you only have to have one username and password, to log in to all the other platforms.
Julian: We'll be talking a lot about GitLab, which is an open-source Git repository.
Julian: And it's a big platform, a bit like GitHub, that we also self-host, that we were able to self-host. We also have a chat.academeni, where there's a special team for the 2026 Fav Academy group, where you can chat with all the other
Julian: Students and instructors and ask questions and collaborate.
Julian: So we hope you find that.
Julian: We hope you like it. And then there's, lastly, Nuaval, which is a custom-built tool that we use to, evaluate your work with the instructors and the global instructors, and your instructors will show you that later on in the course.
Julian: So, let's… first, Talk about how to log in.
Julian: when you go to the GitLab page, you will see a form with a username and password. Don't use this one. We're gonna use the Fab Labs.io button at the bottom. And when you click it.
Julian: You'll get, redirected to Fab Lab0, so if I… Use this as an example.
Julian: I'm on gitlab.fabcloud.
Julian: I'm gonna click… sign in, so I'm redirected to fablabs.io. I'm gonna fill in my,
Julian: Username…
Julian: And now I'm in. I've been logged in. So I just wanted to show you that, how that flow works.
Julian: So, what is GitLab? GitLab is a huge tool. If you've ever used GitHub or seen some source code, it's got a lot of things, like your Git, your files.
Julian: But there's also an issue tracker, there's tools for helping you work with other people in the team, like, such as the merge request and making reviews and comments.
Julian: There's also a website hosting tool called GitLab Pages, which is what we're using to host your website.
Julian: there's a CI pipeline which helps build your projects into HTML, and I'll also cover that on later on.
Julian: So it's a really huge tool. There's a lot of other things, around. They've… they… it's really,
Julian: sophisticated, and we host our… it also allows us to host our repositories on our own server, so we can keep a bit more control over that. This is why we like GitLab.
Julian: So within GitLab, we have all the student repositories.
Julian: We also have an issue tracker, which Neil showed you in the first class, where you can ask questions to the broader group.
Julian: And, and the pages, yeah.
Julian: Sort of the structure that we go for is, for every year, we have a group called Labs.
Julian: And in that labs is each of your… so, for example, Barcelona, Alto, Vox, Zoe. And then within that, there's a folder called Students, and that's where your repositories go, and there's also a site folder, which is just a generic, a website just for the labs to create if they wanted to.
Julian: And we have a lot of auxiliary stuff for, like, the class, we have also an assessment document that's hosted in this folder.
Julian: So this is just an overview of how everything's structured, and
Julian: also allows you to find other students, and you can watch their work. So sort of how you can find your link is all the… your URLs for the whole class is under Fab Academy2026 slash people. So if you go to that, you will see all the students and all their websites.
Julian: And you can find your URL from there, which sort of has this format of, like, lab slash the name of your lab.
Julian: students, and then your name. So that's the convention we go.
Julian: If you want to find yours.
Julian: It is also a good way to look at other people's work, how are they doing, sort of a… yeah.
Julian: Watch and get inspired.
Julian: If you're… stuck, or…
Julian: So, yeah, just… if you're having some problems logging in, you should have gotten an email which sort of has the Fab Academy, this is a subject, it comes from the coordination email. So usually in here, you will find the details with your links, or a link to click, which will then set
Julian: your repository up, so if you haven't done so yet, try to find this email, everyone would have gotten one.
Julian: I think most people have got it, so you're all… you're set up. I've seen a lot of people already started quite well building their websites.
Julian: So it's very, happy to see.
Julian: Yeah, just briefly, just again to show you how to log in.
Fab Classes: Julian, question in the chat about GitLab versus GitHub. GitHub is… host open source projects, but it's a commercial platform run by Microsoft.
Fab Classes: GitLab is an open source platform
Fab Classes: And we can manage the creation of accounts and the production pipelines in every aspect of it, is why we run GitLab rather than having you get accounts through GitHub.
Julian: Yeah, it was a great way to start setting up your own.
Julian: Yeah, repository in a cloud.
Julian: So this, just go through this if you have, if you really want to follow the steps how to log in. Sometimes you will get a first step to, to, approve the login for GitLab.
Julian: Let me know if you have any issues getting in.
Julian: And I will have a brief demo of GitLab, just to familiarize yourself. So when you log in, this is the new homepage.
Julian: Sometimes you'll go directly to your projects list, so on the left, I have a file, a sidebar, projects.
Julian: And here I can see the project that I… you… you should have your projects, academeni slash Favacademy.
Julian: You should see your project here, so then you can just click it, and this will open the project with your account.
Julian: So, the default view is showing you the files, there's, like, a README file, which is sort of an introduction text just for this project. On the right, I also add the link, to your website, so this is the public link that you can share with other people.
Julian: On your left, you have parts of your project, so you have the issue tracker, so you can make your own,
Julian: you could make your own issue board and sort of to-do lists from your own project if you wanted. You know, if you… you know, you can write it in paper, or you can do it in here within your project, and everything's together. You have the code submenu, which lists your repository.
Julian: and commits, these are all related to the Git, part of your project. And then there's also the build,
Julian: section, and I'll talk a bit about that a bit later. This is showing you the status of when you're publishing your website to the… publishing your repository to the website.
Julian: you got this little warning up here in yellow about, because we logged in through an external platform, sometimes they want you to set up an access token. You can ignore this, because I'm going to show you how to do with SSH keys.
Julian: So if you want, you can just dismiss this,
Julian: Or, say, remind me later. So this is sort of how it looks.
Julian: So, yeah, if, you know, probably you went into it, but just briefly, Git is a way to track your changes to files.
Julian: And we store changes in, commits, they're called commits.
Julian: And each commit together is stored in a branch, and so you're…
Julian: Your repository, which holds everything, typically has a default branch.
Julian: And inside that branch, you have a lot of commits, and that's sort of a sequential list in a row.
Julian: And you can also have a history of all your commits, so you can see all the different files that changed, when they changed, and what changed, and then Git allows you to do a lot of different…
Julian: Stuff like restoring, reverting changes.
Julian: You could have forks, and have two parallel work happening at the same time, and then you can merge together later on.
Julian: And so it's a great tool that allows collaboration, working in multiple locations, and I'm going to show you a bit how to do this through GitLab, and also a bit locally.
Julian: So, just a bit of a general summary,
Julian: when working with Git, you sort of…
Julian: when you're looking at your files and you're doing your changes, we call this the working directory. So this is, like, what you see on your computer, or what you see in GitLab.
Julian: This is what you're editing, these are the files you're editing, and sort of, it's like a working copy.
Julian: So you're making your changes, but nothing's yet saved, nothing's yet stored, it's not persisted.
Julian: So, when you make a change, usually you move a file from the working directory to a staging area, it's called staging, and this is basically a temporary, let's say, like, a bucket, a group of files that you want to commit as a single commit.
Julian: So, like, if you have a lot of different files, you can just commit some of them. So you move some of the files to the staging areas, you commit, and then you're left with a few in your working directory.
Julian: All those commits on your… is called a repository, it's also all the files that's sitting on your computer with the history is called a repository. It stores the files and also the history and settings.
Julian: It also has a connection to a remote repository. So GitLab is sort of your cloud repository, and you can also have a repository locally on your computer. So usually, like, local repository, and in the cloud, we call that the remote.
Julian: Sometimes origin is another word.
Julian: I put a link here, there's a lot of different websites to explain Git, if you, you know, get in… there's a lot… it's a lot of topics, a lot of interesting, in my view, topics, so you can explore more to have a better understanding of how Git works.
Julian: I just put a little picture here, so this is sort of like the steps that we go to, your working directory is where you start on.
Julian: you move it to staging, and then it's, like, committed permanently into the Git repository.
Julian: You'll see also here there's listed, like.git directory, so in your… on…
Julian: typically on your computer, I'll show you later, but it's actually a hidden folder on your computer where the history and all the commits are stored. So you can see all your files, but there's actually… it's just a file on your computer which has all the Git's processed. Oops.
Julian: So, I'll first gonna show you GitLab has a nice little web-based editor.
Julian: It's based like VS Code, so it's looking very similar if you've ever used the code editor.
Julian: This is a great place to start, so on your project page, you can click the code button.
Julian: there is a, at the bottom here, web ID.
Julian: So when you click it, it's gonna open a new window, it's gonna load…
Julian: All your files, and it'll just take a minute.
Julian: Do-do-do-do…
Julian: So there's sort of a welcome screen, you can, close that, read it or close it. So on the left, you have the files, just as we saw on the project page, but this is sort of my working directory, so these are all the files I can then open and edit it.
Julian: So, for example, I'm gonna click the index.html file.
Julian: And then I'm gonna see here now the contents of the file, and then I can just start typing away, so…
Julian: Just gonna make a little test edit.
Julian: But now, this is not gonna get deployed to my website, so I have to first make a commit.
Julian: On the left side, you will see a little now 1 that's telling me that there's sort of a source control tab
Julian: If I will click it I can see that
Julian: all the changes that are… that I've made, so in this case, I've only made one change.
Julian: I can click it, it's always a good idea to review the change, and it will show me the two files, the before and the after, so it's a good way to just quickly scan and to make sure you're intending for these changes, and you know.
Julian: A mistype, or accidentally deleted a file, or a line, or something.
Julian: When you're ready and happy to make these changes permanent into a commit.
Julian: There's sort of a little message box, so you can write something like, updating home page.
Julian: And then I can click Commit, and push to main. Main is the default branch in your repository.
Julian: So when I click it.
Julian: The first time, you're going to get this little pop-up saying, are you sure you want to commit a default branch? You want to click continue.
Julian: you always really want to be working in the main branch, because you're just by yourself, there's no need to create a separate fork branch, and then… because then later, you're going to have to merge that back, and you know, it's just extra clicks, so you can just always straight away push that to main. This will only ask you once, so once you're sure.
Julian: You click continue, and then that's it, it's gone. It's, committed.
Julian: So if I go back to my projects page, and I…
Julian: That's already there. Update, yeah, update home page. 12 seconds ago, so you see this box now is representing the most recent commit I did.
Julian: So I can see the last thing I did. If I click it.
Julian: it's gonna, in GitLab, show me this specific commit, so there's the message.
Julian: And below it, I can find all the files and the changes that happened in this commit.
Julian: So it's a good way to,
Julian: On the left, now you see, like, commits is selected. I can also then see the whole history of commits, so if I click it.
Julian: I can also then go through all the, you know.
Julian: back in time and see and view each… I can look at a commit I made a few days ago, last week.
Julian: Maybe something broke, maybe I thought I did something, I didn't, so this is a great way to look back in history, it's all there,
Julian: everything's sort of forever.
Julian: So, I… with that, I say some warning, be careful of what you put into your commits, because that will be,
Julian: in essence, kept there. So if you put a password in there, it's gonna be there forever.
Julian: Cool.
Julian: The repository,
Julian: Menu item just shows you all your files, so this is just showing you your repository with your files.
Julian: I have a good use case here, actually. You see that… why do I have these weird characters up here, at the top? This is sort of showing me, telling me that I'm actually still looking at the files within this commit. So each commit sort of has a…
Julian: hash ID.
Julian: But I'm not in the latest commit, I'm just viewing a specific commit. So, sometimes, if this happens, you want to quickly switch back to your default branch, which will get you back to the most latest version you have of your files.
Julian: And that usually happens when, like, what I was doing, I open a specific commit, or I'm looking at the history, going back and forth, the project remembers it, because sometimes you want to look at your files in a different way.
Julian: Okay.
Julian: Yeah,
Julian: Yeah. So, let's talk about… CI is a very, A very,
Julian: Yeah, it's a very important part of the process within GitLab, because this is a tool that, for every commit that gets pushed, you can run tasks.
Julian: In our case, we are using it to compile your website and publish it, but, you know, developers use this for a lot of different use cases, like automated testing, resizing, doing some integration testing, deploying the website automatically through different, you know, setups.
Julian: analyzing. So it's,
Julian: a bit similar to, like, in GitHub, you have actions, if you've ever used GitHub before.
Julian: And, so this is sort of the flow, what happens, that every time you push your commit.
Julian: to GitLab. It's going to start up a, it's going to read a special file with instructions.
Julian: and then send that to a special runner server, which will then sort of follow these instructions and do the things that you've asked. So these instructions are things that you've defined.
Julian: And then at the end, it's gonna have, like, a result, and it's gonna send it back to GitLab, and then you can see it back in your project. So this sort of happens asynchronously on a separate server, and then it comes back.
Julian: Yeah, so I… sort of the special file you'll see, it's in your project is sort of .gitlabci file.
Julian: And,
Julian: It sort of looks like this, it's just got some… so the first part is the image, so all your…
Julian: When you're running your pipeline, You have to tell the job.
Julian: which…
Julian: like, how to run it, and in what environment to run it. And we use a thing called Docker Containers, which is sort of a… it's a special box that you can say, well, in this, you know, this special…
Julian: container, I'm gonna have a certain software installed, I'm gonna have, like, Python, I'm gonna have Node, I'm gonna have Linux, you know, we're gonna have, like, Windows, so you can define, sort of, the base of what you're gonna run in there.
Julian: And that just makes it quicker, so you don't have to, like, install Python yourself, you can just sort of use a predefined image. So,
Julian: For your HTML files, we're just using a plain Linux image. If you're using, like, mkdocs or another tool, you might want Python installed.
Julian: And then…
Julian: you know, I'm just gonna briefly explain that there's a page, a section within this file that's basically telling GitLab, GitLab, this is a special
Julian: Task for publishing a website.
Julian: And you can tell it… the script line is to tell it some commands to do. For the HTML projects that you have for your student files, there's nothing to do, because we're just working already with HTML files, but if you're using, like, a static generator, like.
Julian: Hugo or MKDocs, you might have, like, to compile your website from Markdown or JavaScript into HTML, and this is where you would do it.
Julian: the next line, the artifacts line, is telling GitLab we want to save a special… a folder, a specific folder, tell GitLab, this is the folder that I have all my HTML files in.
Julian: So it knows to upload that file, that folder. And then the rules, the last one is just say, like, look, we only need to deploy our website if we're working on a default branch. I said earlier, you can have different branch, different forks, but you don't want to publish your website when you're experimenting with a different branch. So we only want to run
Julian: and publish the page's job when we're on the default branch. So that's the last line.
Julian: And, yeah.
Julian: This is just another example for MKDocs. It's another tool. So, as you see, I have a few more, let's say, commands to run within this
Julian: job.
Julian: I'm running from the Python image, so I already have Python installed, and I'm installing some plugins, then I'm building the project into a public folder, and just like the HTML example, I'm again telling GitLab, look, the public folder has all the HTML files now, upload it when you're done.
Julian: If you would like to try out different projects, or you've already done some research, you can see some of these links are some examples of different CI files that I just work good with our setup. I already, you know, if you want to give you some ideas, or you're stuck, have a look at these links.
Julian: And you'll find, yeah.
Julian: If you ever do change this file, keep in mind that the dot in front is very important, so it has to be .gitlabciaml file. So, like, some… some…
Julian: Operating system or editors might remove the dot, so that's important.
Julian: So, I would also like to show you in your project where you can, keep track of your pipelines. So…
Julian: One way is that you see that the last commit I made has a little check mark at the right side, and it's green. So this is showing me that this commit ran a pipeline.
Julian: So I can just click that little checkmark.
Julian: And it's gonna open me the pipeline for this specific commit. And as I can see here, there's a box which says pages. This was the job that we defined in our CI file.
Julian: And if I open it.
Julian: it's gonna show me the log. This is the log of the server doing everything that I asked it to do, so it's downloading the Linux container, it's starting up a new server, it's pulling my project files.
Julian: And then it's not doing anything, because I didn't ask it to do anything, but then it's uploading. The last line, you can see, uploading artifacts, and then it's done.
Julian: So it's very important you want to have the green checkmark on your latest commit, and you want to see jobs succeeded.
Julian: Sometimes a job can fail for a variety of reasons, so if you ever see a job failed, or you don't have a green checkmark, this is, you know, you can click it and open and try and debug why the pipeline may have not passed.
Julian: You can see a history of your pipelines. There's, on the left, build pipelines, so you see, it's like, I can see all the… every time I push, there's gonna be a pipeline. Something to remember is we only care about the last
Julian: The topmost pipeline, because, especially with a website.
Julian: You can only have one version of your website, so the last one to finish is the one that uploads the files to your website.
Julian: So, if you had in the example a few pipelines that failed.
Julian: as long as the top last commit passes, like, for example, if you fixed it, you fixed your issue, and then the pipeline passes, you don't have to worry about ones in the previous ones failing. In this ex… in my screen now, they're all passed, and…
Julian: Yeah, okay.
Julian: Any questions? I'm gonna check chat.
Julian: Yeah, I would suggest when you use, I'm gonna go into a bit, just briefly answer the question about if you use your own static site generator, or a tool to build HTML files.
Julian: I always suggest
Julian: to, commit the source files into your repository with a CI file, and have CI build your project.
Julian: you know, the alternative would be to build your projects on your computer and then only commit the HTML files. But then, you know, you have a risk of losing sometimes the original files if you ever, you know, something happens. So it's always good to keep the… and not commit the HTML files, because the… you don't have your CI.
Julian: build your projects if you can. I have some examples in the slides, if you can look. If it's something I've never tried, you can…
Julian: come into Matamos, and I can help you if you're having trouble getting CI to work.
Julian: Also, you know, we're… only dealing with HTML files, so… when I'm… In the web editor.
Julian: I cannot know what this would look like,
Julian: there's no way to render this in this editor, so I can only commit them, wait for the CI to finish deploying my website, and then I can go to my URL and see the changes.
Julian: Unfortunately. This is why we are gonna suggest in the next step, we're gonna download
Julian: the repository computer.
Julian: So that we can,
Julian: you know, then that way you can test out your HTML files, do a lot of changes, and then push. With the WebID, the thing is, you're going to be doing a lot more commits, because you don't… you can't see the changes right away, so you're… you tend to do a lot of commits for little changes, instead of…
Julian: You know, having one commit that maybe
Julian: For the last hour of work, let's say.
Julian: So, this one's, I really recommend that you try and set up locally.
Julian: Most OSes now have Git installed, but, if not, please check. There's different ways to install Git, depending on your OS.
Julian: So, yeah, I provide a link to some docs GitLab shows some recommended instructions.
Julian: And… I'm not really gonna go into it here, but yeah, I think also Windows.
Fab Classes: I would add there is Windows is a bit of outlier in many ways, so Microsoft supports the Linux subsystem for Windows.
Fab Classes: That lets you, without dual booting, install a full Linux machine in Windows, and then everything behaves much more predictably, so that's what I recommend.
Fab Classes: If you're on Windows.
Julian: Yeah, so when we're running locally, we have to talk about how are you going to Upload your changes.
Julian: from your computer into GitLab.
Julian: So with the WebID, there's… it's directly connected, through GitLab, but when we're running locally, we don't… you know, we don't have a login like the browser has, so there's a few ways we can do it.
Julian: The recommended wait is to use an SSH key.
Julian: And the other way is to use a personal access token. Some… you may see some tutorials suggest a personal access token, for example, with, like, a web editor plugin or something like that.
Julian: like, VS Code sometimes wants a personal access token, and then they can commit for you. But I like the SSH key version because that's on the, like, the system level on your OS, and it doesn't matter what tools you use, you'll always be able to commit and push your changes to,
Julian: the cloud, to GitLab.
Julian: So I'm going to quickly, show you a bit how to make an SSH key. There's two parts to an SSH key. There's a public key and a private key.
Julian: The private key is what we have to keep sort of secret, that's on our computer, we are the only one… you're the only one who knows about it. And the public key is something you can give to GitLab, or, you know, GitHub, and when the two match, then we know that they belong together, and it's actually you, and then the server will let you in.
Julian: Most, OSes will have SSH installed,
Julian: Also, like Neil says, you have the Linux subsystem you can try. There's also some docs that can tell you how to install SSH if you're an older system, maybe there's, like, PuTT on Windows.
Julian: So, once we have SSH installed, to create a key, I always suggest this is the suggested version now, so there's a special, sort of key type.
Julian: that's more secure these days. You can write in this little quotes, you can put a little message that sort of describes, this is the key on my laptop, or my phone, or sort of, this is for GitLab.
Julian: It's just a comment for you. Only for you.
Julian: And then, it's gonna ask you a bunch of questions. Where do you want to save it? Do you want to put a passphrase? I would leave this default and the passphrase empty, just to keep things simple.
Julian: And then, you should have a path something like this, like, .SSH, and then this sort of ID, ED number. So this is, this is by default the file going to be, and this automatically SSH will be able to find it when we want to connect to GitLab.
Julian: But GitLab needs to know about your public key, so we need to copy this public key, the contents of the public key. There's a lot of different ways you could try and, in your terminal, find the key, and then sort of open the contents. There's also this command on Mac and Windows where you can sort of
Julian: Automatically copied into your clipboard.
Julian: And then you go into your profile page in GitLab, and you can add an SSH key.
Julian: So that's here at the top, top right.
Julian: Preferences.
Julian: And then you will see SSH key. And so you can add in your SSH key. You can see I have a few, there's just a button, add new one.
Julian: And then you paste here the new key. Make sure it's a public key, GitLab's gonna check for you, so they won't let you upload the public one.
Julian: By default, there's an expiry date, so you can leave that or take it out. It just means you'll have to create a new one later on.
Julian: And yeah, so if all goes well uploading your public key, you could write… type in this command in your terminal, and it should say, welcome to GitLab, then you know everything's connected well, and that SSH on your computer is using this new key that you created.
Julian: If you've done this before, and you have multiple keys,
Julian: you might need to tell SSH which key to use for GitLab, FabCloud.org. I link a doc so they can tell you a bit
Julian: how you can configure SSH to tell it specifically what key. If this is the first time you've ever done anything like this,
Julian: I don't think you'll need to do it, it'll straight away should ask you to…
Julian: sort of confirm that this is the person, you know, GitLab, Fab Cloud.
Julian: Well, I typed it wrong. Is the server you want to connect to.
Julian: And then we're ready to clone our project.
Julian: Mmm…
Julian: when I go, I'm gonna go back to my… I'm gonna go back a bit to…
Julian: my page… I'm gonna go back to my student project.
Julian: And there's a… gonna be a blue code button.
Julian: And I want to copy this SSH URL.
Julian: We want the SSH one because we've done the SSH key, so this is the, sort of, the companion URL.
Julian: If you do the HTTPS version, that's where you have to use, like, the make a personal access token in your profile. Sometimes, like, editors like VS Code or other editors prefer the HTTP one. I'm first showing you to install this locally, so I'm gonna use a,
Julian: a git command to clone it onto my computer without any editor, without any plugins right now.
Julian: This is the command I'm gonna write, so I'm gonna show you here on my terminal. Gonna make the font bigger.
Julian: So, I'm gonna do git clone, and I'm gonna paste the URL.
Julian: And then I can, I can press Enter.
Julian: And it's gonna start, downloading the whole repository with all the history and all the commits.
Julian: And it's done pretty fast, because it's a new project.
Julian: I can…
Julian: look at the files, and I can see they're all here. Oh, wait, I have to move into the folder, sorry.
Julian: And now I can see that they're all here. We can see a Git, a Git folder, this was holding all our history and commits. We've got the GitLab CI file, we have a README file, and a public folder.
Julian: So this is just like what we saw on the… in the GitLab interface. I now have it on my computer.
Julian: If I do git sta- git status…
Julian: I can, it's a command just to tell me what does my repository look like, it's telling me I'm on the default branch.
Julian: I have… I have every… all the commits that are in the cloud, and I don't have any files to… to… to commit.
Julian: So, let's try and make a, commit.
Julian: The first time you've ever done this, it's a good idea to tell Git your name and your email address, because every commit is going to be associated with an author.
Julian: you know, you can think of it like in a Google Drive, you have an account, so it's sort of a… it doesn't have to mean anything, it can be anything, but I suggest you use the same name and email as you do with your GitLab accounts, so that they sort of… it's tied to your profile, it just looks nicer, but yeah.
Adrian Torres: Julian, we have, some questions in the chat about the… HTTPS and versus SHH.
Julian: Yeah. Yeah, the, the…
Julian: So, the SSH one, you need to have the SSH keys in your project, so you need to create the public-private keys, put the public key in your account. The HTTP one is going to ask you for… so…
Julian: You can clone with the HTTP, but every time you push or pull, it's gonna ask you for your password to your GitLab account.
Julian: But since…
Julian: Since we're logging in with an external tool, you can't use your password, you have to create a personal access token, so…
Julian: You know, if you go to your profile page.
Julian: You know, we did SSH keys, but there's also a personal access token.
Julian: And this is just making a special password that you can use just for, Git, you know, and it gives you a sort of a secret string, and then… the thing is, with… in the terminal, it's gonna ask you every time for this key.
Julian: Sometimes, I know programs like…
Julian: VS Code, the plugin, likes the personal aspect token because it's gonna save that key, that secret key, and then it will use it every time to connect. It has more features.
Julian: So, there's no pros and cons, it's just two different ways of working, depending also a bit of the tools you use.
Julian: I like the SSH key, because then I can use the terminal, or I can use a web… I can use a code editor, you know, it doesn't even matter which one, because they will always be able… both of them should be able to read your SSH key, because it's really in the system. That's why I like the SSH key. So it's a little bit more set up, because you have to do it locally.
Julian: But it allows this, sort of, There's no right or wrong.
Julian: Yeah, also the other question I will say that what I'm doing now, you don't have to install Git locally, or, you know, with SSKH key, you can also just work with the web editor in the browser.
Julian: You just, you know, yeah,
Julian: it's sort of your decision. I like… I suggest downloading it, because then you have everything locally, you have the files, you can open the files in your browser and test them.
Fab Classes: Robbie, hand-raised.
Fab Classes: Oh, you're muted, Robbie.
Fab Classes: Okay, go on to… Sorry.
Rabi MACHHOUT: Sorry, my question is, if a…
Rabi MACHHOUT: Hello, everyone. If the key, SSH key, is compromised, we call, we can change it.
Julian: Yep. Yep, you can just go into your.
Rabi MACHHOUT: you can go into GitLab.
Julian: click the SSH key and just delete, delete, revoke the public key. So then GitLab doesn't have your public key anymore, and it doesn't… if someone had your private key, GitLab wouldn't allow it.
Julian: So just remove the… remove the entry from here in GitLab, and then you're… I mean, it depends if you're only using it for here with GitLab in FabCloud and Fab Academy,
Julian: If you have it in another case, yeah, you know, I suggest then you create a new private key, a new key.
Julian: On your computer, you delete the old one, you create a new one, and then you upload it, the public key to wherever you've been using it.
Rabi MACHHOUT: Okay, thanks.
Rabi MACHHOUT: Thanks.
Julian: Yeah, so on your repository, set your name and your email so that all your commit… every time you make a commit, it's gonna have your name and your email attributed to it.
Julian: And then we're ready to make our first commit, so… I'm going to,
Julian: Edit the public file, so locally.
Julian: So as you see, I have the same files here. I can see the text, my first edit that I made in the web editor.
Julian: And now I'm editing locally.
Julian: So I'm gonna save this file.
Julian: And now when I do git status, I'm gonna see it's telling me I have one file that's been changed.
Julian: I can do git diff.
Julian: This is showing me the difference, so that's gonna tell me, show me all the files and show me the change. So the minus is saying this file, has… it's actually saying this file has been… this line has been deleted, and the plus is saying this line has been added.
Julian: So it's just sort of just showing you the change, and you sort of compare it together.
Julian: when I'm happy… when I wanna… I'm happy with this file, so I'm gonna now stage this file. So I'm gonna move it from my working directory into a staging area, I'm gonna do git add, and then the… the path to the file.
Julian: So I'm gonna git add. This is also a place that I can, add other files, so if I would, for example.
Julian: I'm just…
Julian: This is, like, a completely new file. Imagine you added an image, or you created a new week.
Julian: This would be called an untracked file, so this has a different section, but it still just gets saying that, I don't know about this file, so do you want to commit it?
Julian: I'm gonna add it to the staging as well. I'm gonna say, add public another file.
Julian: And now when I do git status, I'm gonna see I have two files in the staging areas. These are gonna be ready to commit.
Julian: I can review them, have a double-check them. If I don't like, I can take them out of the staging,
Julian: area, and now I'm ready to commit, so I can write git commit.
Julian: is the command, and with an M,
Julian: minus M, I can write a little message.
Julian: So I'm saying, small edit 2.
Julian: And then I press Enter.
Julian: And now it's made a new commit.
Julian: This is showing me two files, it's giving me the…
Julian: the ID to this commit, if I do git status, I'm now gonna see
Julian: It's now telling me that my branch
Julian: is ahead of the main branch in the cloud. So I have one commit that the cloud doesn't have.
Julian: So it's suggesting me that I have to push
Julian: So this is where the Git key… So…
Julian: Now, you don't have to commission… you don't have to push
Julian: After every commit, you can also commit, sort of, like.
Julian: you know, the morning's work, or at the end of the day, before you leave the lab, you can, you know, you can do a couple of commits and push. You know, every commit is gonna be running the whole CI, publishing the server, so, you know.
Julian: It's, it's on one side, you know, you're backing up your work, you're uploading your work, but, you know, if you're just making a lot of changes with an hour, you can just, do one big push
Julian: After you finish a bulk of work, it's your choice.
Julian: So this is uploading all the files to the server, and then, you should see, sort of, the last line is telling you, well, it went… on the remote cloud server, the repository went from this commit.
Julian: to this commit. So it's sort of just telling you the two changes.
Julian: If I quickly go to… My project… I'm opening my project, if I'm fast enough…
Julian: I'm not fast enough. So it's already done, I already have a checkmark, I want to show you…
Julian: I'm gonna make another little change.
Julian: I wanna show you it working.
Julian: Any questions with this?
Ahmed Abdellatif: Maybe just a note, Julian, you can remind of sizes.
Julian: Yeah. Thank you.
Fab Classes: And I would add to that, sizes and just…
Fab Classes: before you commit, check what you're going to commit. We get lots of things that don't belong as commits.
Julian: So I quickly opened up, you can see this one says it was blue for a brief moment. So I was just opening, saying, so you can see that it was first running, so usually these are very quick. If you're using a static site generator, it's probably gonna last for a minute or two to build your project.
Julian: And so you can sort of watch it building.
Julian: For HTML, it's going really fast.
Julian: So yeah,
Julian: A good one is that if you're committing a lot of images one go, you could hit our, sort of, limiter, which we don't allow commits larger than 20 megabytes, I think, now.
Julian: You really shouldn't, because, one, your images should be really small, and…
Julian: to, you know, you can break up your commits into a lot of different files, so you can, into different commits, so you can put, like, 3 or 4 images per commit, or, you know, so… Try not to do one huge commit of the whole days of work. Break down your commits into smaller chunks.
Julian: So these are my tips. I always suggest a good message, you know, you can just write, update, fix, it's also fine. I like to say I'm updating week 1, updating week 2, you know, fixing this code, just so that when you look at your history, you sort of have an indication of what's happening without opening each commit.
Julian: Commit often, you don't need to commit all the time. You don't need to push all the time, but do commit all the time, just to keep your commit small, not to hit the limit.
Julian: Another good one is… I like to use to see all the files I'm going to be changing.
Julian: Mmm…
Julian: I'm just doing random stuff now.
Julian: you know, as Neo says, you should not just do commit add. If you do this, commit add dot, it's gonna add all the files in your repository. But that's dangerous, because what happens, you may have accidentally put a file or an image you didn't intend to upload to your Git, and then that's forever there. So you either do git add, and you put the file name that you want to,
Julian: to stage, to commit, and you can copy them from the status, you know, the status shows you all the files changed. Another cool one is git add minus p.
Julian: And this is sort of,
Julian: What it's doing is it's going through each file and asking you
Julian: every change, do you want to stage this? So here I can say, it's asking me, do I want to add the two… the line that changed in the About page? And then I have a yes, no, I can break them up into smaller things. So look up… it's called the patch, Git Patch, it's quite fun.
Julian: And so I can be a bit more, you know, I don't have to select each file, I can… it's just going through each file. So for here, I can go yes.
Julian: you know, this file, final projects, I can say no, don't add this one for now. Then it's going to the next file, index, yes, okay, I can press Y.
Julian: And now it's done, and now, automatically, it's gone through all the files, and I can just do yes, no, and now I have two files in my stage to be committed, and one that's not. So I like that little,
Julian: Git patch.
Julian: Something to look at, yeah.
Julian: If you do changes in the WebID, something to keep in mind with working locally is you're gonna have to pull those changes. So, you know, if you're working in two different computers, or one computer lab, one at home.
Julian: or you're working with the WebID in GitLab, whatever you do locally, then you should just, at the beginning, before you start work, do a Git pull. So it'll download all the commits that you don't have locally on your computer, it's gonna download them so that you're in sync, synchronized with the remote cloud computer.
Julian: If you're only ever working locally, you know, You don't need to pull.
Julian: And if it ever happens that you do have a commit there before you
Julian: push, it's gonna tell… there's gonna be an error, and GitLab won't let you push until you've pulled first.
Julian: Yep.
Julian: Yeah, so, like, if… yeah, there was a question about the Git add minus p, the patch version. It's the same when you're using a graphical interface to manage Git, you know, like VS Code, when you have the plugin, or when I had the files here.
Julian: you know, in VS Code, or the web editor, actually, they're sort of, like, you see the before and after, and actually you can sort of choose which lines to take. The Git patch is sort of,
Julian: a way to do that through the command line, but if you use a web… a graphical interface for Git, it has the same idea, it's just doing it visually.
Julian: Yeah, you've got the git log, so the git log…
Julian: you can see your whole history, and I can go through it, see the who made it, the message.
Julian: Oh, so you're…
Julian: You can also look at this through GitLab. This is just the local version, so maybe before I commit.
Julian: So these are some commands.
Julian: Something that's not listed here… well, that I didn't talk about was GitInit, so you can make another folder, not in your repository, but outside your student project, and you can make your own Git repository that's just locally in your computer, make commits, and you're not really working with the cloud, so this is sort of how you start your own repository.
Julian: If you're not using, like, GitLab or GitHub.
Julian: Hmm.
Julian: if you ever run into a really wall, and just things are not working, you can't commit, you can't pull, you know, just everything's stuck, you can do this command. It's sort of just gonna clean your local Git repository on your computer, it's gonna make it,
Julian: Yeah, you're gonna delete all the changes, delete any, commits that you had locally, and it's just gonna do whatever was in the cloud.
Julian: So, git reset, hard reset, it's gonna, you know, it's quite a harsh…
Julian: thing, but it's sort of a, come to the rescue, I need help, and…
Julian: And then you do a pool after this.
Julian: And…
Fab Classes: Let me add, Julian, there's a step after that, which is, as a beginner, you can get into mystery states
Fab Classes: And if it really doesn't make sense, it's quite reasonable to, make a copy of the repo
Fab Classes: Pull a fresh copy
Fab Classes: And then, commit the new work from your old, broken repo into the new one.
Fab Classes: Once you're up to speed, you'll never need to do it, but you can get into mystery states as a beginner, and it's fine to just start over and copy your new work in.
Julian: Just to finish off, I wanted to point out,
Julian: just some tips for working with HTML. Please use relative links, and so with, like, they start with, like, a dot dot, you know, forward slash, so we're always working, so it's always relative to the file that you're working in.
Julian: This is just good not to have, like, directly a full URL, like, don't put the full URL httpfabacademy.org, or don't directly link to a file in your gitlab.fab cloud.
Julian: Just because, you know, links break, you know, if GitLab goes and we still want to keep all your documentation working for the long-term future, this is why we like to work with relative, links.
Julian: And keep an eye on, like, low case, uppercase, some…
Julian: systems don't care, but sometimes with Git and, you know, Linux systems, especially on the server, we… it does matter. And, so that's why I always suggest always work with a lowercase name for all your files.
Julian: your HTML files, your image files, you know, just keep them simple.
Julian: yeah, even, even no spaces.
Julian: It's just easier to work with in URLs and HTML files.
Julian: Same when you're working with, like, if you want to download, like, a JavaScript library or an animation library, I always suggest to just download the source files and put them into your project instead of linking to, like, a cloud repository or something like that, because those links can break.
Julian: It just slows… if everything's together, then we are preserving your documentation for the future.
Julian: File sizes was mentioned, and I think this is very important. We have a hard limit of 500MB for your website, so… you know, now it's okay, it's just your first week, but really start to keep an eye on that, that you want your images really small. You should be aiming for, like, 100 kilobytes or less.
Julian: your websites, the images don't need to really be bigger than 800 pixels, you know, in my view, phones can take, you know, 3-4 thousand pixels, so you don't need to have… you shouldn't be uploading straight from your iPhone into the website. And also, this means that
Julian: people have to download these files, and it'll take longer, you know. You know, if a website that's slow to load, it's annoying. So you have to do the same for you. You know, when you're watching on your computer, it's fast, but maybe someone else, or on their mobile phone, it's gonna be slow. So really try to keep an eye on your file size that you upload.
Julian: And, same goes for videos. There's also, you know, makes yourself a budget.
Julian: you know, try and tell you, say, well, how many weeks do I have? How much megabytes can I use each week? And sort of try and keep an eye on, sort of, you know, plan… plan for your weeks. Some weeks might have more images than others, sometimes you're gonna have a… you want to show a longer video than others, so, you know, give yourself room, otherwise you don't want to be hitting the limit halfway through or something.
Julian: There's always a way, we can always help you. These are quickly some links I just wanted to share that, you know, there's ImageMagic, that Neil shared his notes, you can try and install it, it's great for optimizing images.
Julian: usually tools like Photoshop and GIMP, they're not so good at compressing for the web, even…
Julian: you know,
Julian: is that's my experience, like, I can download a really small image, but then I will put it through a…
Julian: an image optimizer, like ImageOptimum, or even a service like TinyPNG, and, like, it's, you know, you're going from 100 kilobytes to 10 kilobytes. So, yeah, it's really impressive that they can just reduce this stuff.
Julian: I would stick to, really, JPEGs and sort of the common ones. You can use more newer file types, like WebP, but, you know, you have to think globally around the world. Not everyone's gonna have the latest, fastest computer. And so I always say stick to JPEGs, because it's the most supported long-term.
Julian: In my view.
Julian: And same for videos, you know, videos can be quite small. You'll be surprised if you just, like, compress it, choose a good width, choose a good, compressant for what you're gonna do. You can get videos that are, you know, a couple of minutes in one, two megabytes. You'll be surprised.
Julian: You don't have to… and then it makes it nice, because then you can keep them into your project, you don't have to upload them to YouTube and risk them breaking in the future, you know, in a couple of years, who knows?
Julian: Okay, yeah, and more, I'm checking if there's any questions…
Julian: Yeah, once you push something, you know, it's sort of there forever, so, I said for this week, don't worry about it, but, keep an eye out. If you really don't want that file in there, there is… there is ways to sort of,
Julian: get it… get… undo commit, and, like, you can…
Julian: But yeah, we're getting into, sort of.
Julian: dangerous territory that I don't suggest you get into.
Julian: I wanted to also briefly mention that there are alternatives, so, you know, HTML is sort of the main block of building a website, but…
Julian: you know, you have to work with different files. There's also… we used to work with Markdown. Markdown is great for, just writing your documentation, and not worrying about, you know, the HTML language and how everything's got to be properly set up.
Julian: making everything look a certain way, and there are these tools, like MKDocs is a really great, easy tool to just build yourself a website from Markdown.
Julian: with very simple files, and then it's gonna make your navigation for you, you can… there's a theme, so you can customize the colors without having to do too much work through a config file. So you can, sort of explore this. The material theme is a wonderful theme, and it… it makes works with MKDocs, you know, you can sort of make it to your own theme.
Julian: Make it to your own, you know, style.
Julian: So I really like working in Markdown,
Julian: sort of, this is sort of the structure, you have a different structure, you have sort of a docs folder instead of a Publix folder, and then your CI file will build the HTML for you after. I have some links here, you can look through them later.
Julian: You know, sort of, like, when you're using an, like, HTML, nothing really ever goes wrong when you're working with the
Julian: publishing commits, but sometimes with a stag generator, you can have some wrong value in your config file, or the version breaks, and so sometimes you get these errors, so I've listed out that some common errors with MKDocs
Julian: This is what happens sometimes,
Julian: There's another tool called DocuSaurus, which I recently found, it's quite nice. It also works with Markdown, and it makes a sort of good documentation-looking website, keeping things simple. I have a student template here as well, also for the MKDocs one, I have a student template, so you can just copy the files there.
Julian: You know, for example…
Julian: You know, you just open the link, this is a project that I have, a student template, I'm just gonna download this file, or I can do code…
Julian: Download as a zip.
Julian: And then I got all the files on my computer, and then I can upload all these files, and there's quite a few templates here for MKDocs, Hugo.
Julian: So if you want to try something different other than Markdown, other than HTML, I have some suggestions here, and… or your instructors also will have probably showed you
Julian: I've seen a few people already try.
Julian: Yeah, okay?
Julian: Where did I lost my,
Julian: I think that's everything I wanted to get into. Thank you, everybody.
Julian: Thank you, Julian. I think we have in the, in the chat, Dorian…
Adrian Torres: Yeah, because Dorian searching the old tutorials, we need to check this.
Julian: Idaho.
Adrian Torres: You can read that.
Julian: No, that's… yeah, no, yeah, this was… we used to be… we used to run Git…
Julian: Per node, and then everyone would commit together and push in one go, but now you each have your own projects, you can just do all your pushing,
Julian: individually, you don't have to wait for everyone. You're working just you and your project, it's only you, you can do whatever you want. You can delete the files, you can put a different, you know, tool in there, you can build your HTML how you want, you can download an HTML theme.
Julian: It's… it's your, you're free to do a lot of things. You can't really break it,
Julian: Yeah. The only thing is, you gotta… you need a .ca… .gitlabci file. If you delete that or break it, your website won't publish. But I have the template, so you can just go back to the template and you can copy that back in. And I suggest, you know, come ask a question in Mattermost,
Julian: I'm always there watching, you can ask me a question, or, yeah, there's also your instructors and the special open day.
Adrian Torres: Julian, you can show where is the templates, because I don't know if people know it's… I saw in the… during the global open time, there are templates for HTML, MADAM, Google…
Julian: If you go to… in your project, you see at the top, there's sort of, like, the location of your project. If you go all the way to Fab Academy.
Julian: In the Fab Academy group, there's a, templates folder.
Julian: If you open that, there's a few different projects that you can look, and when you open one of them, download the files.
Julian: You can then,
Julian: yeah, copy the files. I've also linked them into my slides, so on the schedule page, you can find my slides.
Julian: And I've, yeah. I think one of the slides about CI
Julian: It was, it was, it, it was there.
Julian: This is some examples of different… there's even some, like, Node.js, if you want to do something different, and yeah.
Julian: And I hope that helps.
Julian: Okay.
Adrian Torres: Okay, more questions?
Julian: Yeah, maybe we can stop recording, and then, have a little…
Adrian Torres: Yeah, it's… Recording…