Workshop: Create your own web site on GitHub pages

Transcript

1 00:00:02.650 --> 00:00:08.929 Gabor Szabo: So, hello, and welcome to this session of the GitHub Maven

2 00:00:10.400 --> 00:00:23.580 Gabor Szabo: new calendar we have, a new series of presentations, and then we are celebrating it with the creation of a website on GitHub pages. My name is Gabor Szabo, I…

3 00:00:23.750 --> 00:00:29.459 Gabor Szabo: teach stuff, programming and Git and all of these things, and I help companies

4 00:00:30.190 --> 00:00:33.949 Gabor Szabo: There's also contract development, and

5 00:00:34.270 --> 00:00:51.959 Gabor Szabo: Again, this time we are going to create… it's a workshop, so you will have to do most of the work. I'll just try to explain something. So, here is sort of the outline that we have. First, I'm going to show you a couple of the examples of sites.

6 00:00:52.320 --> 00:00:56.600 Gabor Szabo: Some of them are mine, some of them are related, and…

7 00:00:57.010 --> 00:01:05.230 Gabor Szabo: And, and then we go on from there. So I'll show a couple of sites what you can build with GitHub pages, and,

8 00:01:05.960 --> 00:01:16.890 Gabor Szabo: And then we go from there. So, for example, there is the Code Maven live website that you might have seen. I promoted it. It is one of the simplest

9 00:01:16.950 --> 00:01:24.669 Gabor Szabo: things that you, you can, actually build. It doesn't have any, really, it doesn't have a lot of extras.

10 00:01:24.670 --> 00:01:46.080 Gabor Szabo: So you will probably be able to do this, with a little help of some AI tool to do the design, because I wouldn't be able to do even that level of design. But it's just a static page, and here on this one, you can actually have the links, you have the links to the various

11 00:01:46.080 --> 00:01:54.429 Gabor Szabo: calendars that I have now, and Telegram channels for the various things, and the events,

12 00:01:54.620 --> 00:02:09.229 Gabor Szabo: we have scheduled an earlier events, and the videos from there, and so on, and some are missing. I'm going to update them. So that's one of the examples that you can build. It's just a static website.

13 00:02:09.660 --> 00:02:12.250 Gabor Szabo: But if we,

14 00:02:12.470 --> 00:02:20.739 Gabor Szabo: the source of this website is basically some HTML, and then the content is, is just Markdown files.

15 00:02:21.250 --> 00:02:26.569 Gabor Szabo: We'll take a look at the source as well later on.

16 00:02:26.680 --> 00:02:42.600 Gabor Szabo: Then there is the GitHub page of myself, which is actually even simpler in a way. Maybe I should have shown this one earlier, before. It's just a bunch of pages, each one of them is a Markdown file, and some very, very basic

17 00:02:42.920 --> 00:02:44.370 Gabor Szabo: design.

18 00:02:44.690 --> 00:02:46.300 Gabor Szabo: Then there is the clock.

19 00:02:46.490 --> 00:03:04.800 Gabor Szabo: So here, this is basically the clock I'm going to use to set you some time. This is a JavaScript-based application, so no server-side part, it has no server-side part, it's just a static HTML file.

20 00:03:04.850 --> 00:03:12.539 Gabor Szabo: I generated this, actually, using AI, but the point is that I can store it on,

21 00:03:13.560 --> 00:03:29.289 Gabor Szabo: GitHub pages, and you can see each one of them has a hostname, so this is clock.codem, and the other one had some different one. So, we'll get to that, how to do that. First, we are going to do it without any domain name, just on GitHub.

22 00:03:29.310 --> 00:03:43.229 Gabor Szabo: Then there is the Cantonico website, which is actually way more complex than what we had seen so far. It's also a static website, but it is actually generated

23 00:03:43.260 --> 00:03:52.820 Gabor Szabo: using a Python program, or script, or whatever you would like to call it, it has, I think, 7 or 8 repositories.

24 00:03:52.850 --> 00:04:11.029 Gabor Szabo: And it collects the data from the various repositories, so some have data files, some have sound files, and then this is going to be… this is basically a dictionary and all kinds of other things where you can translate from the Ladino language

25 00:04:11.030 --> 00:04:13.899 Gabor Szabo: To various other languages, and vice versa.

26 00:04:15.010 --> 00:04:18.470 Gabor Szabo: So this one, this level, we are not…

27 00:04:19.610 --> 00:04:44.489 Gabor Szabo: aiming at our current session, maybe going to have a separate session, because this already requires us to build some program that will generate the website. While we are… what we are going to do now is just writing Markdown files and creating HTML and CSS, but not writing the program yet. Even though, with AI, it's

28 00:04:44.760 --> 00:04:55.370 Gabor Szabo: pretty easy to also ask it to build a program, Python or Perlm, or whatever language you prefer, to build it.

29 00:04:55.550 --> 00:05:04.200 Gabor Szabo: Then there is the Planet Pearl, which is not my site, but it's an interesting, one. It's,

30 00:05:04.200 --> 00:05:19.419 Gabor Szabo: they've cross, runs it. It basically collects RSS feeds, so it's… and then builds this website. So here, it utilizes the GitHub Actions.

31 00:05:19.780 --> 00:05:37.049 Gabor Szabo: basically CI system, if you think about it, similar, but it has a scheduler, and it doesn't run tests. Instead of that, it collects data from various places, RSS feeds, and then builds an HTML file, and then displays that on GitHub pages.

32 00:05:37.050 --> 00:05:44.739 Gabor Szabo: So all of these are hosted on GitHub pages, they don't cost us any money,

33 00:05:45.510 --> 00:06:03.500 Gabor Szabo: And they are fun. And then the Git Maven site, which is actually… we are on the Git Maven site here, this page is on there. If I visit it, it only has a bunch of entries on the main page. It's actually, except of the main page.

34 00:06:03.500 --> 00:06:11.720 Gabor Szabo: All the rest are built with MDBook, which is a command line tool written in Rust.

35 00:06:11.730 --> 00:06:31.370 Gabor Szabo: that generates, basically, websites, or PDF files, or e-books from your Margon files, so it's basically a book generator. And for each one of them, the source is also here, so we might be able to look at the source code later on, if we have the time for that.

36 00:06:31.550 --> 00:06:49.049 Gabor Szabo: The first thing we have to do in order to have a website on GitHub pages is, of course, having an account on GitHub, and I wrote it as a prerequisite to this session, so I assume that all of you have already registered and you have an account on GitHub.

37 00:06:49.050 --> 00:07:00.690 Gabor Szabo: And I'm going to collect, actually, your pages, or you are going to submit your pages into our project once we are… as you are making progress.

38 00:07:00.690 --> 00:07:07.749 Gabor Szabo: So, all of these utilize some hostname of a domain I own.

39 00:07:07.760 --> 00:07:10.210 Gabor Szabo: Or, in the case of Planet Pearl.

40 00:07:10.440 --> 00:07:11.759 Gabor Szabo: They, of course, owns.

41 00:07:12.390 --> 00:07:22.569 Gabor Szabo: But we don't need to have a domain name, which costs money, of course. We can use the GitHub I.O. domain to host our websites.

42 00:07:22.840 --> 00:07:37.250 Gabor Szabo: one or more, and the default it creates is the website, which is using your usernames, or your GitHub username, and then .github.io. This is going to be the website. So if I open…

43 00:07:39.530 --> 00:07:41.490 Gabor Szabo: Let me try to…

44 00:07:42.120 --> 00:07:48.429 Gabor Szabo: pin this tab, and then more of… we'll have… actually, I don't need this one, I can close this one.

45 00:07:48.690 --> 00:07:59.669 Gabor Szabo: I can close this one, I can close this one, the clock I'm going to need, and I don't need this one, don't need… actually, I can just open this one. So, if I go to github.com.

46 00:08:00.850 --> 00:08:02.969 Gabor Szabo: And click on my profile.

47 00:08:04.090 --> 00:08:15.219 Gabor Szabo: then you can see that my username is SabGob, which you probably don't know how to pronounce, but it's okay, it's my name, and this is my nickname I have from my…

48 00:08:15.460 --> 00:08:26.730 Gabor Szabo: teenage years. It's basically my family name and my personal name put together in Hungarian. So, because this is my,

49 00:08:27.010 --> 00:08:32.810 Gabor Szabo: username, my website is going to be subgob.com.

50 00:08:33.010 --> 00:08:35.230 Gabor Szabo: github.io.

51 00:08:35.740 --> 00:08:46.510 Gabor Szabo: Now, if I'm trying to visit this, it doesn't exist, because I removed from the previous sessions we had… I had, so I can create the whole thing now with you.

52 00:08:46.820 --> 00:08:52.359 Gabor Szabo: In order to create this website, GitHub has a special

53 00:08:52.770 --> 00:09:09.120 Gabor Szabo: requirement, the special repository you need to create, so here I click on this plus one, create new repository, and the name of the repository is exactly the same, so my username, and then github.io.

54 00:09:09.280 --> 00:09:26.940 Gabor Szabo: So this is a special repository specifically for your main GitHub page. You can create GitHub pages from any repository, okay? Any name, doesn't matter, but this is the default, and so this is going to be the one that you are going to create for now.

55 00:09:26.960 --> 00:09:33.230 Gabor Szabo: So this is the, the name, and, here, in order to

56 00:09:34.500 --> 00:09:38.189 Gabor Szabo: make it easier for me now. I…

57 00:09:38.340 --> 00:09:47.200 Gabor Szabo: make it public, of course, that's the default, and I also ask it to create a README file, just so it will have some content.

58 00:09:47.320 --> 00:09:51.420 Gabor Szabo: And that's it, basically. I don't need anything else from this.

59 00:09:51.530 --> 00:09:54.050 Gabor Szabo: And now I clicked on Create Repository.

60 00:09:54.740 --> 00:10:12.449 Gabor Szabo: And it created the repository with a basic README file, and now I can go to the Actions folder, or whatever it is tab, and here I can already see that it's building… it created, it started to run a workflow.

61 00:10:12.600 --> 00:10:13.970 Gabor Szabo: Or GitHub Action.

62 00:10:14.140 --> 00:10:29.270 Gabor Szabo: Whatever way you want to call it. And this is happening because of the specific name of this repository. With other repositories, this wouldn't work. You would have to configure them.

63 00:10:29.370 --> 00:10:37.960 Gabor Szabo: But with this repository, the default config… by default, it configured it, to have a static,

64 00:10:38.580 --> 00:10:43.650 Gabor Szabo: GitHub page, and using a default

65 00:10:43.710 --> 00:10:47.180 Gabor Szabo: GitHub workflow, which is not even configured in your

66 00:10:47.180 --> 00:11:10.729 Gabor Szabo: repository, it's building it. Now, it's queued now, as you can see on the right-hand side. Maybe if I reload the… yeah, so the thing is that I don't know if it's a bug in GitHub, or I configured something in my browser, but it doesn't refresh the page… doesn't always refresh this page, so now I just clicked on CTRL-R,

67 00:11:10.730 --> 00:11:18.389 Gabor Szabo: to refresh the page, and now I see that it's green, it already finished building. So, this is basically some program that runs.

68 00:11:18.420 --> 00:11:32.149 Gabor Szabo: that took the content of my repository, which is just that readme.md file now, and built a website. So I can go back to this rep… to the site, which was 404, and reload this one.

69 00:11:32.250 --> 00:11:36.050 Gabor Szabo: And… Here it is. I have the website.

70 00:11:36.150 --> 00:11:45.269 Gabor Szabo: So, just by this, I created a website, which is generated from that README file. I can click here on View Source.

71 00:11:45.710 --> 00:11:57.860 Gabor Szabo: So you can see that it has a bunch of HTML stuff, not just that markdown. The markdowns just have the content of this. This is basically the content.

72 00:11:58.790 --> 00:12:06.660 Gabor Szabo: And that's it. I don't need anything else from it. So… I think that's, that's,

73 00:12:06.660 --> 00:12:29.419 Gabor Szabo: far enough, I went ahead, and now it's your turn. I'm going to turn off the video recording, and I'm going to give you some time, so here we're going to set up the clock. I think, hopefully, I don't know, 5 minutes is going to be enough for you, so I'm going to start it, and I stopped the video recording. Feel free to

74 00:12:29.420 --> 00:12:34.430 Gabor Szabo: Ask questions in the break, and that won't be in the recording, and…

75 00:12:34.510 --> 00:12:44.320 Gabor Szabo: And, let me know once, you are done, with this, task, or if you have any,

76 00:12:44.490 --> 00:12:45.839 Gabor Szabo: Any questions?

77 00:12:47.740 --> 00:12:54.150 Gabor Szabo: Okay, so… you… hopefully all of you, or some of you, built your own…

78 00:12:54.240 --> 00:13:01.980 Gabor Szabo: web presence already. It's very simple, just a README file, nothing in there.

79 00:13:01.980 --> 00:13:24.769 Gabor Szabo: Now we go on, and we are going to create another file, which is called IndexMD, and maybe another one, just to show you. So the thing is that, where is the repository? Here is the repository, okay? So this is the repository on GitHub, I go to Code, and we have the README file, and this is the content of the README file, already,

80 00:13:24.770 --> 00:13:26.810 Gabor Szabo: there. Now…

81 00:13:26.940 --> 00:13:37.659 Gabor Szabo: you probably don't want to have your README file as the main page of your website, because in the README, you will probably want to add some text

82 00:13:37.660 --> 00:13:55.099 Gabor Szabo: that describes for yourself as the developer of that web page, okay? So you probably want to have a separate page, and by default, if there is no other page, no other file, then GitHub will pick up the README file.

83 00:13:55.690 --> 00:14:08.120 Gabor Szabo: and use that, but if we create a file called index.md, then, as far as I know, it will prefer that one. So let's create that file, and

84 00:14:09.940 --> 00:14:15.329 Gabor Szabo: And… and here. Okay, and the plus button, I can create a new file.

85 00:14:19.960 --> 00:14:23.440 Gabor Szabo: And this F go to file? No?

86 00:14:28.970 --> 00:14:30.220 Gabor Szabo: Add file.

87 00:14:31.720 --> 00:14:35.850 Gabor Szabo: index. Index.md…

88 00:14:42.570 --> 00:14:44.670 Gabor Szabo: What is your problem?

89 00:14:46.840 --> 00:14:50.830 Gabor Szabo: It's every ti- every time different… every time it's different.

90 00:14:52.640 --> 00:14:54.180 Gabor Szabo: Here, add file.

91 00:14:54.520 --> 00:14:55.610 Gabor Szabo: Okay.

92 00:14:55.970 --> 00:14:57.890 Gabor Szabo: I'm clicking on Add File.

93 00:14:58.640 --> 00:15:08.729 Gabor Szabo: Here now, okay, sorry. Index.md, index.md, and then let's put some markdowns here.

94 00:15:08.840 --> 00:15:20.750 Gabor Szabo: Welcome to… my demo… And this is going to be the main title, then some…

95 00:15:21.310 --> 00:15:33.790 Gabor Szabo: subtitle, then I can put, CAIC and, fruits and, wine?

96 00:15:34.390 --> 00:15:48.050 Gabor Szabo: And then I can put 3 rows, and then I can put here Perl, and Python, and Rust.

97 00:15:48.290 --> 00:15:51.230 Gabor Szabo: And,

98 00:15:51.470 --> 00:16:06.670 Gabor Szabo: you could see that it automatically added the numbers, which on one hand, nice, on the other hand, it's a bit annoying, so I'm going to change them to 111, and I'm going to commit the changes in this file, okay?

99 00:16:06.970 --> 00:16:13.609 Gabor Szabo: Copilot already suggested a commit message, okay, I'm not arguing with Copilot.

100 00:16:13.760 --> 00:16:27.340 Gabor Szabo: And now I have, hopefully, two files. Okay, let's see, it only shows the README. Let's refresh the page. Okay, now I have both. I can go to the, actions.

101 00:16:27.410 --> 00:16:42.120 Gabor Szabo: And you can see that it immediately triggered the building of the web page, and hopefully it will work. It's in progress now, so it will work soon.

102 00:16:42.970 --> 00:16:53.080 Gabor Szabo: It takes a couple of seconds. In the old days, a couple of years ago, this wasn't exposed to the general public. It was running behind the scenes.

103 00:16:53.080 --> 00:17:06.400 Gabor Szabo: And so we didn't know if it had any… when it finished, okay, if it crashed in the middle, or had some issues. Nowadays it's much better, even though

104 00:17:07.480 --> 00:17:09.289 Gabor Szabo: Well, it takes time.

105 00:17:10.980 --> 00:17:19.010 Gabor Szabo: I think it's usually up to 50 seconds or so. Here, it was 54 seconds, till this whole process, runs.

106 00:17:20.670 --> 00:17:21.740 Gabor Szabo: Okay.

107 00:17:22.099 --> 00:17:41.269 Gabor Szabo: Now, if I go and reload this page… so here, now you can see is the content, is the content from the indexMD file, and the READMD file is left alone. And, we are using Markdown there. You can see that these are,

108 00:17:41.550 --> 00:18:05.410 Gabor Szabo: This is an unordered list, this is an ordered list, so if you recall, I put there 111, but in the display, you can actually see the numbers increasing. I prefer them 111, because then, if I need to remove one from the middle, or add another one, it doesn't matter, for me, for the person who edits the file, but when the page is generated.

109 00:18:05.410 --> 00:18:18.560 Gabor Szabo: you will see them growing 1, 2, 3, as needed. You can see the main title, the subtitle, and the fact that it shows me that my name here is the default layout of the default

110 00:18:18.560 --> 00:18:27.669 Gabor Szabo: generator, and we can… we're going to change that, soon. Now, this whole thing is using, Markdown.

111 00:18:28.680 --> 00:18:42.200 Gabor Szabo: And more specifically, it's using the GitHub-flavored Markdown. So you can see here, if you visit this page, and I shared it in the chat at the beginning, Markdown is the…

112 00:18:43.500 --> 00:19:00.009 Gabor Szabo: idea that you can write some very, very simple text, and it can be converted into HTML or some other nicer display. It was invented, like, 20, 25 years ago, I don't… if I…

113 00:19:00.290 --> 00:19:01.659 Gabor Szabo: right?

114 00:19:03.070 --> 00:19:10.860 Gabor Szabo: And the idea is that, because we used to write emails without any,

115 00:19:11.810 --> 00:19:17.339 Gabor Szabo: highlighting any… any emphasis, any HTML, any design, just text.

116 00:19:17.400 --> 00:19:20.609 Gabor Szabo: These texture and elements could be used

117 00:19:20.610 --> 00:19:41.810 Gabor Szabo: to emphasize some text, or to put in list items, and so on. And then, nowadays, there are tons of these programs that can convert that into nice-looking HTML, and GitHub has a special flavor of Markdown, there are many other flavors as well, so here you can read the documentation.

118 00:19:41.830 --> 00:19:48.299 Gabor Szabo: Or, I guess you can ask the AI to do that for you.

119 00:19:48.610 --> 00:19:58.309 Gabor Szabo: So this is… this is the… the mark now. Now, I go ahead and I create one more, file, so you can see here.

120 00:19:58.770 --> 00:20:09.319 Gabor Szabo: Let's see, add the… Let me, let me, let me find… What shall I find?

121 00:20:10.890 --> 00:20:16.030 Gabor Szabo: I always forget to prepare the example image, so…

122 00:20:19.340 --> 00:20:37.880 Gabor Szabo: This is the about page of my website. Let's pick this image. So this was my… the first programmable calculator I had. Copy image link, okay? And I'm going to embed that image in the…

123 00:20:38.980 --> 00:20:42.730 Gabor Szabo: in the next page, hopefully it will work. Let's see.

124 00:20:43.800 --> 00:20:49.290 Gabor Szabo: So I create now another file, add file, Create a new file.

125 00:20:50.410 --> 00:21:02.400 Gabor Szabo: And that's a calculator.md, it's going to be called, and… My first…

126 00:21:04.260 --> 00:21:14.380 Gabor Szabo: computer, okay, I'll put it in code, even though it's programmable. And then I think that this is what is needed.

127 00:21:15.090 --> 00:21:31.649 Gabor Szabo: Casio, it was a Casio. So an exclamation mark, let me enlarge the font, an exclamation mark, then in square brackets, I can put some text, and then in parentheses, I put in the link to the image, which can be on some other site.

128 00:21:31.830 --> 00:21:38.510 Gabor Szabo: Okay, so this will create a… Another page called Calculator.

129 00:21:40.550 --> 00:21:48.029 Gabor Szabo: And, well, now it's building already, but I think here I'm going to add another link

130 00:21:48.320 --> 00:21:58.409 Gabor Szabo: a link to the calculator, and here I can put various things, I think, here. For example, I can

131 00:21:59.550 --> 00:22:07.700 Gabor Szabo: I think I can put here the name of the MD file, and it will create the link properly. Let's see.

132 00:22:10.950 --> 00:22:15.290 Gabor Szabo: Okay? So now I've… I committed two changes.

133 00:22:15.340 --> 00:22:34.810 Gabor Szabo: And you can see that this was the… after the first commit, it started to build it, but because it couldn't finish it, and I already committed a new one, so it basically abandoned that job. It said, okay, there's a newer one, this one I won't finish.

134 00:22:35.140 --> 00:22:36.160 Gabor Szabo: running?

135 00:22:36.790 --> 00:22:46.070 Gabor Szabo: And now it's running the new one. And hopefully, now we're going to have two pages, and the main page will have a link to the other one.

136 00:22:46.070 --> 00:23:01.189 Gabor Szabo: Now, I know when I'm teaching this at the Weissman Institute, most of my students immediately go and ask ChatGPT to build a nice page for them. And we can do that, and we might be going to do this.

137 00:23:01.260 --> 00:23:09.340 Gabor Szabo: And they don't write the content in Markdown, because it's very too complex for some people.

138 00:23:09.600 --> 00:23:20.719 Gabor Szabo: The point here, or that's what they sing, that's basically… it's really not that complex. The main reason I would stick to Markdown is…

139 00:23:20.720 --> 00:23:34.510 Gabor Szabo: a couple of reasons. One of them is to separate the content from the layout, from how it looks, and then to… because we are on version control, we would like to be able to see how

140 00:23:34.660 --> 00:23:39.000 Gabor Szabo: changes happened to our source code, so now if I go to the

141 00:23:39.020 --> 00:23:49.719 Gabor Szabo: code, and the page is going to be ready, I can look at the comments and then see what changes did I make, for example, here.

142 00:23:49.720 --> 00:24:08.589 Gabor Szabo: I added this line. So it's rather useful, I think. It can be useful in the longer run. So I reload this page, and now I have this link here, and you can… you might be able to see that it links to this calculator.html.

143 00:24:08.590 --> 00:24:18.650 Gabor Szabo: And here it is, and embedded, there is the image. Now, of course, this is… it might be not ideal, because I'm embedding an image from another site.

144 00:24:18.760 --> 00:24:29.430 Gabor Szabo: And now, if the other site removes that image, or replaces it with something else, then suddenly my site will have that other image, or no image.

145 00:24:30.080 --> 00:24:32.729 Gabor Szabo: I don't know which is worse.

146 00:24:32.930 --> 00:24:49.379 Gabor Szabo: But you can, of course, download these images, upload them into your Git repository, and then embed them locally. So you don't need to embed from the image from some other site.

147 00:24:50.320 --> 00:24:51.610 Leon.Vak: I have a question.

148 00:24:52.020 --> 00:24:54.660 Gabor Szabo: Okay, go ahead.

149 00:24:54.940 --> 00:25:04.609 Leon.Vak: You're saying that we can embed different objects by uploading them to GitHub?

150 00:25:04.710 --> 00:25:11.019 Leon.Vak: But, you know, this is not ideal to upload

151 00:25:11.470 --> 00:25:15.180 Leon.Vak: things like images into Git REPL.

152 00:25:15.860 --> 00:25:21.920 Leon.Vak: So, because Git repositories are not meant to be used for binary data.

153 00:25:22.480 --> 00:25:24.299 Gabor Szabo: So it's… yeah.

154 00:25:24.300 --> 00:25:38.409 Leon.Vak: So, the question was, does GitHub give you the… somewhere in GitHub Actions, or somewhere over there, some sort of artifact storage that we can use for that?

155 00:25:38.860 --> 00:25:40.830 Gabor Szabo: Yeah, so, so…

156 00:25:40.990 --> 00:25:52.849 Gabor Szabo: the simple sites, as long as you're building, simple… I mean, first of all, the notion, the idea that, not to put binaries in a…

157 00:25:53.100 --> 00:26:05.600 Gabor Szabo: Git repository that's mostly about generated data, that we wouldn't want to put generated data. The problem with binaries is only just that, like, images.

158 00:26:05.600 --> 00:26:16.489 Gabor Szabo: is only that Git doesn't know how to div them, so you won't feel that value. But it's not a problem to put images there, or other binaries.

159 00:26:16.750 --> 00:26:25.480 Gabor Szabo: The main issue we usually have is that you don't want to put anything that is generated, whether that's binary or textual, doesn't matter.

160 00:26:25.630 --> 00:26:33.609 Gabor Szabo: But, what you are asking here is actually… maybe it's not that you are asking.

161 00:26:36.300 --> 00:26:42.969 Gabor Szabo: Right now, what we are doing is, creating, basically, a static website.

162 00:26:42.970 --> 00:26:56.610 Gabor Szabo: from static data. So we have Markdown, we can put images there, we might put JavaScript code, and then the…

163 00:26:56.790 --> 00:27:02.270 Gabor Szabo: Front-end will be dynamic, even though behind the scenes you don't have any back-end.

164 00:27:02.450 --> 00:27:08.380 Gabor Szabo: But, nothing is generated on the fly

165 00:27:08.380 --> 00:27:24.450 Gabor Szabo: by… it's not Rogay. So, no. So, that site which is… which we… which, GitHub pages is generated by a tool that is not under our control. That's not… we wrote it.

166 00:27:24.450 --> 00:27:30.869 Gabor Szabo: It's called Jekyll, which is one of the static side generators, and this is what

167 00:27:30.870 --> 00:27:35.419 Gabor Szabo: GitHub picked, I don't know, 20 years ago.

168 00:27:36.240 --> 00:27:37.710 Gabor Szabo: And, and that's it.

169 00:27:37.840 --> 00:27:51.969 Gabor Szabo: what's beyond, actually, the scope of this session today is what some of the demos that you saw at the beginning uses. When you actually write your own program.

170 00:27:52.110 --> 00:27:53.340 Gabor Szabo: Let's in!

171 00:28:00.020 --> 00:28:03.790 Gabor Szabo: I'm sorry if my voice is…

172 00:28:04.230 --> 00:28:14.759 Gabor Szabo: fluctuating a bit. So, you can write a program in whatever backend programming language you want to use, and

173 00:28:15.050 --> 00:28:17.390 Gabor Szabo: configure your GitHub actions.

174 00:28:17.520 --> 00:28:35.899 Gabor Szabo: To run that code whenever you push out some changes, and that code will pick up your source code and maybe other things, maybe generate images, maybe do whatever, and then, generate the website in a folder.

175 00:28:35.970 --> 00:28:51.630 Gabor Szabo: it doesn't even need to upload into… maybe it does upload now? I think now, nowadays, you do upload to the artifactory of GitHub, and then from there, there is an action that deploys it

176 00:28:51.740 --> 00:28:54.230 Gabor Szabo: to the… website.

177 00:28:54.620 --> 00:28:55.630 Gabor Szabo: Okay?

178 00:28:56.850 --> 00:29:02.759 Gabor Szabo: So, that, that way you can, you can,

179 00:29:04.480 --> 00:29:07.379 Gabor Szabo: You can use other files as well, okay?

180 00:29:07.470 --> 00:29:26.750 Gabor Szabo: That's actually the website, the Cantonico website, that Ladino Dictionary and so on. The reason that we have several repositories there is because one of them stores all the sound files, for example. We have a lot of sound files that I downloaded and received from people and so on.

181 00:29:26.750 --> 00:29:29.299 Gabor Szabo: And I do want it to be in a…

182 00:29:29.320 --> 00:29:34.050 Gabor Szabo: safe place, and a GitHub repository is a very safe place.

183 00:29:34.120 --> 00:29:48.949 Gabor Szabo: place, but I don't want it, for example, to be in the same repository their old text context is, and I don't want… and I want the code that generates the website in a third repository, because they…

184 00:29:49.350 --> 00:30:01.050 Gabor Szabo: make… they change at a different pace, and when I look at the history of, let's say, my source code there, I don't want to see the changes

185 00:30:01.050 --> 00:30:14.410 Gabor Szabo: that I added a new sound file, for example, and vice versa. So, there is someone, a person who is generating the content, for example, and I download from their

186 00:30:15.080 --> 00:30:18.390 Gabor Szabo: whatever, what subgroup.

187 00:30:18.400 --> 00:30:35.269 Gabor Szabo: and put in the repository. They could have done it by themselves if they knew how to use GitHub, but that's not the point, so I'm doing it. But it's separate, so the content is separate from the code that generates it.

188 00:30:36.560 --> 00:30:39.120 Gabor Szabo: Okay, let's go on with the work.

189 00:30:39.390 --> 00:30:59.580 Gabor Szabo: So you saw how to create an index HTML and another page, and use some markdown. Now, I'll give you another 10 minutes, let's say, so you can build something your own. Well, actually, before that, before I give the time.

190 00:30:59.580 --> 00:31:05.629 Gabor Szabo: I would like you, no, actually, no, no problem. It's good enough.

191 00:31:05.630 --> 00:31:14.760 Gabor Szabo: I'll give you the 10 minutes. You do this. I'm going to turn off the recording for that time, and

192 00:31:15.510 --> 00:31:23.180 Gabor Szabo: Please let me know as you make the progress, so we can see what you do, and if you have any questions.

193 00:31:23.690 --> 00:31:31.990 Gabor Szabo: that's a good way that I can… I can help, that that's the reason. Having,

194 00:31:32.230 --> 00:31:35.200 Gabor Szabo: Workshop, and, and you being here,

195 00:31:35.560 --> 00:31:39.710 Gabor Szabo: You have the advantage that you can ask questions, and I can help you.

196 00:31:39.840 --> 00:31:45.159 Gabor Szabo: So, let's, stop the recording and start the clock.

197 00:31:47.860 --> 00:32:11.799 Gabor Szabo: Okay, so let's continue. I'll close the chat for now. So here is one of the bugs that people… there are two things that I… at least two things that I would like to show now. One is one of the bugs that people often, often make, I noticed that, and the other one is the 404 that I saw here in this other page.

198 00:32:11.840 --> 00:32:31.049 Gabor Szabo: Okay, so that's Moshe- Stein 24 is the username, but what you created is a repository which has your name, but it's not exactly your username. So what you need to do here, either you remove this and create a new one.

199 00:32:31.050 --> 00:32:33.369 Gabor Szabo: Or, you can,

200 00:32:33.740 --> 00:32:53.729 Gabor Szabo: you can rename this, but if you rename this, so go ahead and rename this to this name. So, Moshe Stein 24, so exactly your username.github.io. That should be the one that you rename it. So, if you do it, let me…

201 00:32:53.800 --> 00:33:05.759 Gabor Szabo: do it now, and then we'll see if that makes it work, or if we need to do the manual intervention that I'm, I think I mentioned.

202 00:33:06.010 --> 00:33:25.580 Gabor Szabo: that, by default, so if you're creating a repository which is the default name, so your username.github.io, then it will automatically… GitHub will automatically configure that way, but if you are, have a…

203 00:33:25.830 --> 00:33:29.300 Gabor Szabo: Create a different name, then,

204 00:33:29.730 --> 00:33:37.259 Gabor Szabo: it won't generate GitHub pages automatically out of them, by default, and

205 00:33:37.930 --> 00:33:45.010 Gabor Szabo: And then you might need to turn the generation on, and we'll see how to do that.

206 00:33:45.190 --> 00:33:52.939 Gabor Szabo: Okay, it's still not the same. You need 24 at the end, right? It's Moshe-1024.

207 00:33:54.870 --> 00:33:58.439 Gabor Szabo: That's… that's how it works, that's how GitHub works, okay?

208 00:34:11.280 --> 00:34:13.390 Gabor Szabo: And, for everyone.

209 00:34:14.710 --> 00:34:26.570 Gabor Szabo: You can do the changes if you go to your repository, I can't do it on his settings, and then here you can change the name of the repository.

210 00:34:27.630 --> 00:34:32.739 Gabor Szabo: Okay, let me… Check… no, it's not there yet.

211 00:34:40.460 --> 00:34:44.169 Gabor Szabo: Okay, you still need to change it to… is the 24.

212 00:34:50.040 --> 00:35:05.060 Gabor Szabo: So if I visit, again, my repository, that's where you can change this, and then we might need to come here to the pages and enable the GitHub pages there. Okay?

213 00:35:05.720 --> 00:35:11.960 Gabor Szabo: Let me check… Moshe, please, change, changes.

214 00:35:12.180 --> 00:35:13.839 Gabor Szabo: So we can continue.

215 00:35:20.840 --> 00:35:32.249 Gabor Szabo: No, no, it's 404. Now, I know it doesn't work, because you need to create… change the name here, the repository name, to include the 24.

216 00:35:33.890 --> 00:35:36.020 Gabor Szabo: That's the 24, right?

217 00:35:36.160 --> 00:35:39.389 Gabor Szabo: The username, your username has the 24 at the end.

218 00:35:41.170 --> 00:35:47.669 Gabor Szabo: Oh, now it's there, and now if we visit the website…

219 00:35:48.820 --> 00:35:57.729 Gabor Szabo: Then it's still not working, let's see. So, let me look at… show what I have here. So…

220 00:35:57.940 --> 00:36:03.709 Gabor Szabo: I went to the settings of my website. Well, maybe it's still building yours, so I don't know.

221 00:36:07.000 --> 00:36:10.579 Gabor Szabo: Probably it's not building. Okay, so let's see,

222 00:36:11.430 --> 00:36:15.999 Gabor Szabo: Let me get to this one. Okay, so I go to Settings.

223 00:36:16.380 --> 00:36:34.380 Gabor Szabo: of the repository. You can also go to your repository. And here, on the left-hand side, you have pages. And because I created this, the right name, it automatically configured the creation of the website.

224 00:36:34.440 --> 00:36:42.239 Gabor Szabo: But you might need… you will need to do this here. So here you come, and you pick the deploy from branch, from a branch.

225 00:36:42.770 --> 00:36:50.079 Gabor Szabo: Then, here you pick the branch name, which is probably main for you as well. Let me check.

226 00:36:53.330 --> 00:36:55.829 Gabor Szabo: Yeah, your branch is called main?

227 00:36:57.770 --> 00:37:17.200 Gabor Szabo: This is the default, and here you can pick from which folder it serves, and basically the two options are either the root folder or the docs folder. I explained it later why, but you need to select the root folder. And then once you did that and save it, then it will build.

228 00:37:17.200 --> 00:37:28.639 Gabor Szabo: build it. Let's… let's see what happens here. If I go to the actions, actually, you see, it doesn't show me the actions on your repository, and that's because

229 00:37:28.670 --> 00:37:37.350 Gabor Szabo: When you created the repository, it didn't have the magic name, which is the one that it has now, but

230 00:37:37.440 --> 00:37:40.940 Gabor Szabo: But it didn't have back then.

231 00:37:41.060 --> 00:37:43.330 Gabor Szabo: And, so…

232 00:37:44.110 --> 00:37:54.700 Gabor Szabo: when GitHub created the repository, it didn't add… it didn't configure it this way. So now you have to do this manually. I'll show it again.

233 00:37:55.130 --> 00:37:57.559 Gabor Szabo: You go to the settings.

234 00:37:58.490 --> 00:38:06.959 Gabor Szabo: On the left-hand side here, pages, and then you select Deploy from a branch, and the main branch, and root.

235 00:38:30.700 --> 00:38:31.930 Moshe Stein: Can you let me know?

236 00:38:32.550 --> 00:38:33.320 Gabor Szabo: Sorry?

237 00:38:41.650 --> 00:38:46.090 Gabor Szabo: Do you want to share your screen and shall we look at it, or is it fine?

238 00:38:50.020 --> 00:38:53.859 Gabor Szabo: Or shall we postpone it and do it in the break later on?

239 00:39:05.750 --> 00:39:12.219 Gabor Szabo: I'm looking at the… whether it's running the agent, because I can't see your settings, of course. That's private.

240 00:39:14.760 --> 00:39:23.270 Moshe Stein: I did… I entered the… In the custom dom… I chose roots.

241 00:39:23.510 --> 00:39:26.910 Moshe Stein: And then the save button is, not…

242 00:39:27.200 --> 00:39:30.969 Moshe Stein: I can't select it, I can't press on it, it's grayed out.

243 00:39:31.050 --> 00:39:35.240 Gabor Szabo: Would you like to share your screen, or that… is it okay?

244 00:39:36.370 --> 00:39:39.700 Gabor Szabo: You don't have any private syncs on your screen, right?

245 00:39:40.430 --> 00:39:41.639 Moshe Stein: Yes, it's possible.

246 00:39:41.960 --> 00:39:44.239 Gabor Szabo: Okay, so wait a second, I'll, I'll…

247 00:39:46.520 --> 00:39:50.029 Gabor Szabo: Make you co-host, so you can share the screen.

248 00:39:55.320 --> 00:39:57.270 Gabor Szabo: I stopped sharing mine.

249 00:40:08.880 --> 00:40:10.060 Moshe Stein: Can you sit?

250 00:40:12.800 --> 00:40:16.130 Gabor Szabo: Okay, you don't need that custom domain there.

251 00:40:17.210 --> 00:40:18.370 Gabor Szabo: It looks…

252 00:40:19.930 --> 00:40:30.380 Gabor Szabo: Main, okay, so go now to the actions at the top. You don't need anything there, you don't need anything there. At the top, go to the agents.

253 00:40:31.700 --> 00:40:32.410 Gabor Szabo: No, sort of.

254 00:40:32.410 --> 00:40:32.730 Moshe Stein: capture.

255 00:40:32.730 --> 00:40:36.809 Gabor Szabo: At the top of the page, at the top of the page, you have actions.

256 00:40:37.500 --> 00:40:38.420 Gabor Szabo: Yeah.

257 00:40:40.360 --> 00:40:44.459 Gabor Szabo: Okay, so you might need to make a change. Okay, go ahead, go…

258 00:40:47.060 --> 00:40:53.330 Gabor Szabo: just change something in the repository. I'm not sure what is going on right now, let's see if that works.

259 00:40:54.250 --> 00:40:58.290 Gabor Szabo: Go… just go to the code part of the repository.

260 00:40:58.810 --> 00:41:05.420 Gabor Szabo: and make it… basically make a commit. So here, edit, click on the pencil there, yeah?

261 00:41:06.260 --> 00:41:08.910 Gabor Szabo: And just type in hello, or whatever.

262 00:41:09.230 --> 00:41:11.329 Gabor Szabo: And, commit.

263 00:41:19.160 --> 00:41:26.100 Gabor Szabo: Okay, and then go to the actions again. Let's see if it picked it up. Yes, okay, so…

264 00:41:26.460 --> 00:41:35.349 Gabor Szabo: GitHub didn't, notice, so it will take a couple of… maybe a minute, and then you will have this, okay?

265 00:41:37.060 --> 00:41:37.770 Moshe Stein: Okay.

266 00:41:53.410 --> 00:42:12.039 Gabor Szabo: Okay, so we are back, and we'll see his, thing. Now, website in a bit. Let me, show this one then. So, here, Leon created a website, and it says VAC not found, that's 404. Let me reload it, because maybe it has changed since then. Node, it's still there.

267 00:42:12.350 --> 00:42:29.120 Gabor Szabo: So, if you really want to create a 404 page, a real 404 page, then you can create a file called 404.md, and that's gonna be the page. So, if I visit my

268 00:42:31.640 --> 00:42:35.380 Gabor Szabo: If I visit my website now, so subgob.

269 00:42:35.820 --> 00:42:37.690 Gabor Szabo: github.io.

270 00:42:38.170 --> 00:42:50.269 Gabor Szabo: I have this page, and I type in Kukuriku here, just to go to some page that doesn't exist. And it's just the final regular 404 page, of,

271 00:42:50.590 --> 00:42:56.150 Gabor Szabo: GitHub, GitHub pages. But I can go to my repository.

272 00:42:56.960 --> 00:43:01.650 Gabor Szabo: Okay? Go to the code, create a new file.

273 00:43:05.880 --> 00:43:18.410 Gabor Szabo: And I think it's because of the, yeah, 404MD, and VOC is not here. I created because WAC is not here.

274 00:43:20.670 --> 00:43:22.090 Gabor Szabo: Okay…

275 00:43:26.240 --> 00:43:38.160 Gabor Szabo: And I'll have to wait till it rebuilds it, but then it will, for every page that doesn't exist, it will show this one. And I can design it the way I want, or whatever, okay?

276 00:43:49.210 --> 00:43:54.080 Gabor Szabo: In the meantime, I'm reloading this one, and here you have your website, Moshe.

277 00:43:54.360 --> 00:44:01.950 Gabor Szabo: Okay? So now that you configured GitHub Act, the pages part.

278 00:44:02.000 --> 00:44:15.270 Gabor Szabo: it, started to build it. And now you can make… create more files in that, more MD files, you can create an indexMD if you want to have the separation, and the upload images, and so on.

279 00:44:18.200 --> 00:44:34.959 Gabor Szabo: Okay, so what comes here? Okay, so I reloaded this page, the Kukuriku page, and you can see what is not here. So if you create a file called 404.md, then that's gonna be the default file not found page.

280 00:44:46.540 --> 00:44:47.790 Gabor Szabo: Okay.

281 00:44:52.610 --> 00:45:05.680 Gabor Szabo: What next? So we learned about this. Okay, now we can… Before I go… before going there, let me show you the…

282 00:45:06.740 --> 00:45:13.710 Gabor Szabo: the DNS part, right? So, in order for, for…

283 00:45:14.510 --> 00:45:25.289 Gabor Szabo: Okay, so you have now the website, okay, on github.io, and you might be happy with this, and everything okay. But if you have a domain name, and you would like to use that domain name.

284 00:45:25.290 --> 00:45:38.279 Gabor Szabo: for your website, then you can do this. You can… you need to do two things. On one hand, in your DNS records, you have to point them to GitHub pages.

285 00:45:38.350 --> 00:45:44.049 Gabor Szabo: So the world, everyone from the world, will, when visiting your

286 00:45:44.530 --> 00:45:48.140 Gabor Szabo: URL, they will arrive to GitHub pages.

287 00:45:48.290 --> 00:46:01.710 Gabor Szabo: And then, inside GitHub Pages, you need to tell GitHub Pages that this repository is serving that particular domain, because there are millions of

288 00:46:01.770 --> 00:46:06.350 Gabor Szabo: websites on GitHub pages, so millions of people

289 00:46:06.410 --> 00:46:22.379 Gabor Szabo: arrive with various URLs to GitHub pages to the same place, and then GitHub has to decide which website to show. So you have to configure both of them. Configuring the DNS is not really…

290 00:46:22.850 --> 00:46:32.979 Gabor Szabo: in the scope of the… of the session, but I can show you, I'm using… because it's different for every,

291 00:46:33.450 --> 00:46:40.999 Gabor Szabo: DNS provider. So I'm using, for my international domains, I'm using this company called I Want My Name.

292 00:46:41.740 --> 00:46:58.280 Gabor Szabo: And I need some promotional money now from them. You can go… I can go to my domains, you can buy their domains. They are not the cheapest, but they're really nice. Let's go to CodeMaven.com.

293 00:46:58.330 --> 00:47:15.019 Gabor Szabo: And then the manager records. So, if you want to map just a hostname, for example, you have the clock, right? I just added it. Clock. Clock.

294 00:47:15.050 --> 00:47:23.250 Gabor Szabo: Right? So, the clock hostname, clock.codemaven.com.

295 00:47:23.300 --> 00:47:27.180 Gabor Szabo: It's a CNAME which is mapped to my…

296 00:47:27.700 --> 00:47:34.689 Gabor Szabo: actual website, subgroup.github.io. And because this is on GitHub.

297 00:47:35.070 --> 00:47:45.190 Gabor Szabo: Now, everyone who is visiting clock.code-maven.com will arrive to… To the GitHub pages.

298 00:47:45.280 --> 00:47:57.199 Gabor Szabo: It doesn't actually need to be mine, it doesn't really matter, but that was sort of the origin of the recommendation, so I stick to it, okay? It doesn't… it's the same for everyone, so it doesn't really matter.

299 00:47:57.340 --> 00:48:06.510 Gabor Szabo: The… If you want to have the www mapped to it, that's the same idea here.

300 00:48:07.300 --> 00:48:09.049 Gabor Szabo: I just have to find it.

301 00:48:10.530 --> 00:48:17.370 Gabor Szabo: www. It's also a CNAME, okay, mapping here. But if you want your main

302 00:48:17.600 --> 00:48:33.849 Gabor Szabo: domain to map to GitHub pages, that's different, because the domain name itself, so in that case, code-maven.com, it cannot be used… cannot be set up as a CNAME record. It needs to have an A record.

303 00:48:34.060 --> 00:48:39.060 Gabor Szabo: So, someone is writing to the chat, I think.

304 00:48:41.790 --> 00:48:59.680 Gabor Szabo: WalkMe works again. Okay, we'll check it. Okay, so if you want to map the DNS, then the website, and maybe that's what you are referring to, then you need to map the air records to 4 different IP addresses.

305 00:49:00.250 --> 00:49:19.460 Gabor Szabo: because GitHub pages are using this for one, and the AAA records to also four different addresses. You can look for that in the documentation of GitHub, what are these addresses exactly, so IPv4 and IPv6 addresses, and then if you set up all of them.

306 00:49:20.090 --> 00:49:37.009 Gabor Szabo: then your site, so in this case, code-maven.com, is also hosted on GitHub pages. You can understand from this. Like, basically, all of my sites are hosted there. I think there's only one that is… it's now hosted on a…

307 00:49:37.010 --> 00:49:41.630 Gabor Szabo: on some other place, and a couple of things are hosted on GitLab pages, but…

308 00:49:41.630 --> 00:49:47.640 Gabor Szabo: That's a separate story. So, it's walk.me, that's the website.

309 00:49:48.930 --> 00:49:58.689 Gabor Szabo: Okay, so you mapped your website to your 404 page. Okay, nice. But it's working, that's also something.

310 00:49:59.800 --> 00:50:08.850 Gabor Szabo: Okay, so this is one side, what you saw. The mapping of the DNS records, so the world will find the

311 00:50:09.800 --> 00:50:27.199 Gabor Szabo: it's the people from the world visiting your domain name or host name will arrive to GitHub pages. But now, once they arrive, we have to map on GitHub pages. And the way you do this is that you go to your

312 00:50:27.380 --> 00:50:28.880 Gabor Szabo: repository.

313 00:50:29.100 --> 00:50:35.309 Gabor Szabo: In the settings, You go to the pages.

314 00:50:36.210 --> 00:50:54.909 Gabor Szabo: And then here, you type in the name of the host name or domain that you want it to serve. And then you click on save, and then you save… wait a few minutes, reload the page, and then you click on this checkbox here.

315 00:50:55.190 --> 00:51:12.749 Gabor Szabo: That way, it will enforce the HTTPS for everyone, so your site is always going to show as HTTPS. I can show you… I don't want to configure this one, but I can show you, for example, the clock

316 00:51:12.850 --> 00:51:19.790 Gabor Szabo: repository. So this is the repository of that clock that you saw. This is the settings.

317 00:51:19.940 --> 00:51:24.220 Gabor Szabo: And in the settings, Pages.

318 00:51:27.120 --> 00:51:28.190 Gabor Szabo: pages.

319 00:51:28.320 --> 00:51:38.340 Gabor Szabo: you see that I have the same configuration here, and it has the custom domain, and here it says clock.code-maven.com.

320 00:51:38.340 --> 00:51:53.020 Gabor Szabo: So, I both set up the DNS mapping to come here, and then also told here to generate it. Now, depending on the type of the… okay, no, not… because my…

321 00:51:54.100 --> 00:52:07.439 Gabor Szabo: GitHub pages, this repository, specifically, is just using the regular Jekyll generator, and not my own, so because I'm using deploy from branch.

322 00:52:07.480 --> 00:52:17.630 Gabor Szabo: When I added this information, it created a file, and then I can show you that file.

323 00:52:29.060 --> 00:52:31.820 Gabor Szabo: It created a file called CNAME,

324 00:52:32.160 --> 00:52:34.490 Gabor Szabo: And in that file, it wrote.

325 00:52:34.700 --> 00:52:44.010 Gabor Szabo: the hostname. So you don't actually need to do this here. You could also just create a file called CNAME,

326 00:52:44.140 --> 00:52:50.669 Gabor Szabo: And put the hostname there, and push it out, or save it in the repository, okay?

327 00:52:51.650 --> 00:53:04.210 Gabor Szabo: as you could see, up till now, basically, we didn't use the local Git client. I could have used it, okay? I could use the local Git client, edit my files, push out the changes.

328 00:53:04.270 --> 00:53:06.169 Gabor Szabo: And the same thing will happen.

329 00:53:06.180 --> 00:53:25.009 Gabor Szabo: The reason I didn't want to use, because I didn't want to spend any time, or think or assume that you have Git installed and configured properly on your computer. We don't need that. We can use everything, you can do everything on the website of GitHub pages.

330 00:53:26.380 --> 00:53:44.649 Gabor Szabo: So, here you can see that it's also written here, and then I checked this one, this checkbox. You can't check it immediately, you have to wait some time and reload the page, because it has to generate the HTTPS,

331 00:53:46.080 --> 00:53:47.570 Gabor Szabo: signature, I guess.

332 00:53:48.460 --> 00:53:52.609 Gabor Szabo: And, and that's it.

333 00:53:54.470 --> 00:53:55.500 Gabor Szabo: Okay.

334 00:53:57.090 --> 00:53:58.880 Gabor Szabo: I can close this one.

335 00:53:59.640 --> 00:54:01.800 Gabor Szabo: I don't need this one, I think.

336 00:54:06.060 --> 00:54:08.380 Gabor Szabo: That was actually my website, okay.

337 00:54:24.180 --> 00:54:29.489 Gabor Szabo: Actually, okay, we have now this website. Okay, what else?

338 00:54:31.030 --> 00:54:39.180 Gabor Szabo: So you have… okay, so now let's, do something else. Now, actually…

339 00:54:39.310 --> 00:54:49.109 Gabor Szabo: I can… let me show you this one. So here, this is… let's throw the source code of this one first. Okay, so I go to this website.

340 00:54:51.170 --> 00:55:06.259 Gabor Szabo: the GitHub pages, you can see that it has some design, not a lot, some design. Okay, whatever it is, Hamburger doesn't do anything here. But it looks slightly better than what I had created

341 00:55:06.260 --> 00:55:11.479 Gabor Szabo: now, manually. So how does this, happen?

342 00:55:11.510 --> 00:55:14.270 Gabor Szabo: First of all,

343 00:55:15.040 --> 00:55:24.220 Gabor Szabo: because I keep using, keep deleting and reusing my default site, because of that, this one.

344 00:55:24.430 --> 00:55:35.680 Gabor Szabo: which is called github.subgab.com. It's mapped my hostname, GitHub hostname, from my subgroup.com domain.

345 00:55:35.790 --> 00:55:45.939 Gabor Szabo: to a repository called RealSubGov GitHub Hylo, okay? Doesn't really matter. You can see the CNAME file here. Let's see it.

346 00:55:46.590 --> 00:55:48.680 Gabor Szabo: Hello, show me, please.

347 00:55:48.910 --> 00:55:57.389 Gabor Szabo: Okay, this is the CNAME, okay, exactly as we had. But it has… also has a configuration file.

348 00:55:57.660 --> 00:56:08.689 Gabor Szabo: Okay? And in this configuration file, these are just commented things when I was playing with various themes. You can,

349 00:56:08.690 --> 00:56:25.829 Gabor Szabo: configure various themes. So the default theme is very basic, but this one is using this plugin, and then uses this remote theme. So you'd… for some of the themes, here, here.

350 00:56:25.920 --> 00:56:30.139 Gabor Szabo: You can use just, say, theme and the name of the theme.

351 00:56:30.340 --> 00:56:35.979 Gabor Szabo: And for some of them, you have to use this plugin called…

352 00:56:36.720 --> 00:56:49.530 Gabor Szabo: plugin called Jackie Remote Theme, and then use that. So we can come here, To our repository now.

353 00:56:49.860 --> 00:56:53.560 Gabor Szabo: This is not… not the one that I wanted to show you.

354 00:56:55.640 --> 00:56:59.209 Gabor Szabo: Let's go to the subgroup.github.io.

355 00:56:59.410 --> 00:57:01.300 Gabor Szabo: And,

356 00:57:09.890 --> 00:57:12.560 Gabor Szabo: chat with Copilot? Okay.

357 00:57:15.050 --> 00:57:20.980 Gabor Szabo: Actually, no, maybe I need to create an issue, Maybe that's the way?

358 00:57:25.110 --> 00:57:28.239 Gabor Szabo: Improve the design.

359 00:57:29.620 --> 00:57:36.790 Gabor Szabo: of the site… Configure and nice theme.

360 00:57:37.030 --> 00:57:51.330 Gabor Szabo: Okay? So, I just created an issue here. Maybe I don't need the issue, I could do it without, but let's see. And now I can assign it to, to… to Copilot.

361 00:57:51.800 --> 00:58:02.870 Gabor Szabo: Okay? I don't need anything out of my additional, I assign it. So now, hopefully, Copilot will think a little bit, and…

362 00:58:03.180 --> 00:58:12.559 Gabor Szabo: send me a pull request with the appropriate changes. I don't know, I haven't tried it for quite some time, so we'll see how it works.

363 00:58:15.450 --> 00:58:16.700 Gabor Szabo: What else?

364 00:58:16.850 --> 00:58:27.309 Gabor Szabo: This is basically it. So this one, we can ask. You can ask, also talk to ChatGPT and ask for help there.

365 00:58:30.220 --> 00:58:38.540 Gabor Szabo: Yeah, let me… the last point here, let me explain this a little bit more while it's working. So, if I go to the settings.

366 00:58:42.230 --> 00:58:44.940 Gabor Szabo: And, back to the pages.

367 00:58:45.810 --> 00:58:53.509 Gabor Szabo: You could hear… Pick a different branch, if you had… if you created one.

368 00:58:53.670 --> 00:59:03.250 Gabor Szabo: And you create… you can use… and or you can use a separate subfolder, specifically docs, and that's it.

369 00:59:03.450 --> 00:59:08.360 Gabor Szabo: The idea is that, I think, historically, so the reason with the branches.

370 00:59:08.610 --> 00:59:17.010 Gabor Szabo: Is that, historically, they thought that you will have your… that you will have a website for your project.

371 00:59:17.010 --> 00:59:29.490 Gabor Szabo: and your source code will be in your main branch, or back then it was your master branch, and then you would have a separate branch for your website. I don't think that it was…

372 00:59:31.030 --> 00:59:35.439 Gabor Szabo: I'm not sure if it was a good idea or not. Okay, let's see. Because…

373 00:59:35.820 --> 00:59:43.239 Gabor Szabo: Maybe the website should go hand-in-hand with the… Changes in the project.

374 00:59:43.430 --> 00:59:59.199 Gabor Szabo: But maybe not, okay? So maybe it's right to have it in a separate branch. So that was one of the ideas, that you would have a development bench for your code, and then in a separate branch, you would maintain your

375 00:59:59.880 --> 01:00:15.329 Gabor Szabo: documentation or website, but you will never really merge them, I'm not sure. So, I'm not sure I like that idea, but that's the reason you can here pick a different branch.

376 01:00:15.420 --> 01:00:34.139 Gabor Szabo: The other idea is probably better, is that you would want to have your website to not be… if this is not just a website, okay? If it's just a website, like what we have now, then it does… then the whole repository is just the content of the website, maybe with the exception of the README MD.

377 01:00:34.330 --> 01:00:44.939 Gabor Szabo: And maybe with the exception of the agent, and whatever, so a couple of exemptions. But especially if your web… if your website is part of a

378 01:00:45.550 --> 01:00:50.880 Gabor Szabo: project, a code-based code project, then you want to have all the…

379 01:00:51.070 --> 01:01:05.169 Gabor Szabo: website-related stuff be in a folder, in a separate folder. And the designated folder is the docs folder, and that's it, so you can't pick anything else. And that's… that's what you… that's the reason you can pick here a…

380 01:01:05.290 --> 01:01:20.569 Gabor Szabo: subfolder, so if this is a real project in terms of a project with some source code and so… and it has a website, then it can be in a folder, and you don't have

381 01:01:20.650 --> 01:01:26.139 Gabor Szabo: The website won't show your source code and anything like that.

382 01:01:26.660 --> 01:01:30.870 Gabor Szabo: Now I can't open the chat. I saw that someone wrote, but I can't open the chat.

383 01:01:31.920 --> 01:01:39.340 Gabor Szabo: This is the… what we saw earlier a couple of times when we had these sessions, okay.

384 01:01:39.980 --> 01:01:42.840 Gabor Szabo: Yeah, someone else had to go. Okay.

385 01:01:43.200 --> 01:01:44.470 Gabor Szabo: You're welcome.

386 01:01:44.860 --> 01:01:52.300 Gabor Szabo: Okay, I think we can finish now, with this.

387 01:01:54.170 --> 01:02:04.800 Gabor Szabo: you can check out the other websites that I referred to in the main slide, and then you can see,

388 01:02:05.440 --> 01:02:23.690 Gabor Szabo: what other improvements you might be able to do. So, thank you for participating, and I'm now finishing the recording. If you're watching the video, then please like the video, follow the channel, visit the…

389 01:02:25.180 --> 01:02:27.540 Gabor Szabo: What is this called? Live?

390 01:02:29.140 --> 01:02:43.819 Gabor Szabo: live.codemaven, and follow the various calendars, the topics that are interesting for you, so we'll be… you will be notified when we have a live event again.

391 01:02:44.370 --> 01:02:46.470 Gabor Szabo: We are going to have a few.

392 01:02:46.650 --> 01:02:48.340 Gabor Szabo: Thank you, bye-bye.

393 01:02:48.340 --> 01:02:49.110 Leon.Vak: governor.