<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<link href="https://git.code-maven.com/atom" rel="self" />
<title>Git Maven</title>
<id>https://git.code-maven.com</id>
<updated>2026-08-04T10:00:03</updated>

  <entry>
    <title>Workshop: Create your own web site on GitHub pages</title>
    <summary type="html"><![CDATA[]]></summary>
    <updated>2026-08-04T10:00:03Z</updated>
    <pubDate>2026-08-04T10:00:03Z</pubDate>
    <link rel="alternate" type="text/html" href="https://git.code-maven.com/workshop-2026-08-02" />
    <id>https://git.code-maven.com/workshop-2026-08-02</id>
    <content type="html"><![CDATA[<ul>
<li>Demo a few sites
<ul>
<li><a href="https://github.szabgab.com/">GitHub Page of Gábor Szabó</a> - <a href="https://github.com/szabgab/real-szabgab.github.io">source</a></li>
<li><a href="https://live.code-maven.com/">Code Maven live</a> - <a href="https://github.com/szabgab/live.code-maven.com/">source</a></li>
<li><a href="https://clock.code-maven.com/">Clock</a> - <a href="https://github.com/szabgab/clock.code-maven.com">source</a></li>
<li><a href="https://kantoniko.com/">Kantoniko</a> - <a href="https://github.com/kantoniko/">Kantoniko</a></li>
<li><a href="https://perl.theplanetarium.org/">Planet Perl</a> - <a href="https://github.com/PerlToolsTeam/planetperl">source</a></li>
<li><a href="https://git.code-maven.com/">Git Maven</a> - <a href="https://github.com/szabgab/git.code-maven.com/">source</a></li>
</ul>
</li>
<li>Register on GitHub.</li>
<li>Create repository. <code>USERNAME.github.io</code> with README.md file. Observe the generation of the web site.</li>
<li>Create another file called index.md and add some content to that file.</li>
<li>Learn about <a href="https://daringfireball.net/projects/markdown/syntax">Markdown</a> and <a href="https://github.github.com/gfm/">GitHub Flavored Markdown</a>.</li>
<li>Use GitHub Co-Pilot to improve the page.</li>
<li>Use ChatGPT to create a nice layout.</li>
<li>CNAME file, DNS name resolving on <a href="https://iwantmyname.com/">iwantmyname</a></li>
<li>Configure the page where it is served from.</li>
</ul>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TXO360cHsaU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<ul>
<li>
<p><a href="https://mdperry.github.io">Marc Perry</a> - <a href="https://github.com/mdperry/mdperry.github.io/">source</a></p>
</li>
<li>
<p><a href="https://vak.me">Leon Vak</a> - <a href="https://walruscraft.github.io">GitHub</a> - <a href="https://github.com/walruscraft/walruscraft.github.io">source</a></p>
</li>
<li>
<p><a href="https://moshe-stein24.github.io">Moshe Stein</a> - <a href="https://github.com/moshe-stein24/moshe-stein24.github.io">source</a></p>
</li>
</ul>
<h2 class="title is-4">Transcript</h2>
<p>1
00:00:02.650 --&gt; 00:00:08.929
Gabor Szabo: So, hello, and welcome to this session of the GitHub Maven</p>
<p>2
00:00:10.400 --&gt; 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…</p>
<p>3
00:00:23.750 --&gt; 00:00:29.459
Gabor Szabo: teach stuff, programming and Git and all of these things, and I help companies</p>
<p>4
00:00:30.190 --&gt; 00:00:33.949
Gabor Szabo: There's also contract development, and</p>
<p>5
00:00:34.270 --&gt; 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.</p>
<p>6
00:00:52.320 --&gt; 00:00:56.600
Gabor Szabo: Some of them are mine, some of them are related, and…</p>
<p>7
00:00:57.010 --&gt; 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,</p>
<p>8
00:01:05.960 --&gt; 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</p>
<p>9
00:01:16.950 --&gt; 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.</p>
<p>10
00:01:24.670 --&gt; 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</p>
<p>11
00:01:46.080 --&gt; 00:01:54.429
Gabor Szabo: calendars that I have now, and Telegram channels for the various things, and the events,</p>
<p>12
00:01:54.620 --&gt; 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.</p>
<p>13
00:02:09.660 --&gt; 00:02:12.250
Gabor Szabo: But if we,</p>
<p>14
00:02:12.470 --&gt; 00:02:20.739
Gabor Szabo: the source of this website is basically some HTML, and then the content is, is just Markdown files.</p>
<p>15
00:02:21.250 --&gt; 00:02:26.569
Gabor Szabo: We'll take a look at the source as well later on.</p>
<p>16
00:02:26.680 --&gt; 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</p>
<p>17
00:02:42.920 --&gt; 00:02:44.370
Gabor Szabo: design.</p>
<p>18
00:02:44.690 --&gt; 00:02:46.300
Gabor Szabo: Then there is the clock.</p>
<p>19
00:02:46.490 --&gt; 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.</p>
<p>20
00:03:04.850 --&gt; 00:03:12.539
Gabor Szabo: I generated this, actually, using AI, but the point is that I can store it on,</p>
<p>21
00:03:13.560 --&gt; 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.</p>
<p>22
00:03:29.310 --&gt; 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</p>
<p>23
00:03:43.260 --&gt; 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.</p>
<p>24
00:03:52.850 --&gt; 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</p>
<p>25
00:04:11.030 --&gt; 00:04:13.899
Gabor Szabo: To various other languages, and vice versa.</p>
<p>26
00:04:15.010 --&gt; 00:04:18.470
Gabor Szabo: So this one, this level, we are not…</p>
<p>27
00:04:19.610 --&gt; 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</p>
<p>28
00:04:44.760 --&gt; 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.</p>
<p>29
00:04:55.550 --&gt; 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,</p>
<p>30
00:05:04.200 --&gt; 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.</p>
<p>31
00:05:19.780 --&gt; 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.</p>
<p>32
00:05:37.050 --&gt; 00:05:44.739
Gabor Szabo: So all of these are hosted on GitHub pages, they don't cost us any money,</p>
<p>33
00:05:45.510 --&gt; 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.</p>
<p>34
00:06:03.500 --&gt; 00:06:11.720
Gabor Szabo: All the rest are built with MDBook, which is a command line tool written in Rust.</p>
<p>35
00:06:11.730 --&gt; 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.</p>
<p>36
00:06:31.550 --&gt; 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.</p>
<p>37
00:06:49.050 --&gt; 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.</p>
<p>38
00:07:00.690 --&gt; 00:07:07.749
Gabor Szabo: So, all of these utilize some hostname of a domain I own.</p>
<p>39
00:07:07.760 --&gt; 00:07:10.210
Gabor Szabo: Or, in the case of Planet Pearl.</p>
<p>40
00:07:10.440 --&gt; 00:07:11.759
Gabor Szabo: They, of course, owns.</p>
<p>41
00:07:12.390 --&gt; 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.</p>
<p>42
00:07:22.840 --&gt; 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…</p>
<p>43
00:07:39.530 --&gt; 00:07:41.490
Gabor Szabo: Let me try to…</p>
<p>44
00:07:42.120 --&gt; 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.</p>
<p>45
00:07:48.690 --&gt; 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.</p>
<p>46
00:08:00.850 --&gt; 00:08:02.969
Gabor Szabo: And click on my profile.</p>
<p>47
00:08:04.090 --&gt; 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…</p>
<p>48
00:08:15.460 --&gt; 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,</p>
<p>49
00:08:27.010 --&gt; 00:08:32.810
Gabor Szabo: username, my website is going to be subgob.com.</p>
<p>50
00:08:33.010 --&gt; 00:08:35.230
Gabor Szabo: github.io.</p>
<p>51
00:08:35.740 --&gt; 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.</p>
<p>52
00:08:46.820 --&gt; 00:08:52.359
Gabor Szabo: In order to create this website, GitHub has a special</p>
<p>53
00:08:52.770 --&gt; 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.</p>
<p>54
00:09:09.280 --&gt; 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.</p>
<p>55
00:09:26.960 --&gt; 00:09:33.230
Gabor Szabo: So this is the, the name, and, here, in order to</p>
<p>56
00:09:34.500 --&gt; 00:09:38.189
Gabor Szabo: make it easier for me now. I…</p>
<p>57
00:09:38.340 --&gt; 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.</p>
<p>58
00:09:47.320 --&gt; 00:09:51.420
Gabor Szabo: And that's it, basically. I don't need anything else from this.</p>
<p>59
00:09:51.530 --&gt; 00:09:54.050
Gabor Szabo: And now I clicked on Create Repository.</p>
<p>60
00:09:54.740 --&gt; 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.</p>
<p>61
00:10:12.600 --&gt; 00:10:13.970
Gabor Szabo: Or GitHub Action.</p>
<p>62
00:10:14.140 --&gt; 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.</p>
<p>63
00:10:29.370 --&gt; 00:10:37.960
Gabor Szabo: But with this repository, the default config… by default, it configured it, to have a static,</p>
<p>64
00:10:38.580 --&gt; 00:10:43.650
Gabor Szabo: GitHub page, and using a default</p>
<p>65
00:10:43.710 --&gt; 00:10:47.180
Gabor Szabo: GitHub workflow, which is not even configured in your</p>
<p>66
00:10:47.180 --&gt; 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,</p>
<p>67
00:11:10.730 --&gt; 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.</p>
<p>68
00:11:18.420 --&gt; 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.</p>
<p>69
00:11:32.250 --&gt; 00:11:36.050
Gabor Szabo: And… Here it is. I have the website.</p>
<p>70
00:11:36.150 --&gt; 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.</p>
<p>71
00:11:45.710 --&gt; 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.</p>
<p>72
00:11:58.790 --&gt; 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,</p>
<p>73
00:12:06.660 --&gt; 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</p>
<p>74
00:12:29.420 --&gt; 00:12:34.430
Gabor Szabo: Ask questions in the break, and that won't be in the recording, and…</p>
<p>75
00:12:34.510 --&gt; 00:12:44.320
Gabor Szabo: And, let me know once, you are done, with this, task, or if you have any,</p>
<p>76
00:12:44.490 --&gt; 00:12:45.839
Gabor Szabo: Any questions?</p>
<p>77
00:12:47.740 --&gt; 00:12:54.150
Gabor Szabo: Okay, so… you… hopefully all of you, or some of you, built your own…</p>
<p>78
00:12:54.240 --&gt; 00:13:01.980
Gabor Szabo: web presence already. It's very simple, just a README file, nothing in there.</p>
<p>79
00:13:01.980 --&gt; 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,</p>
<p>80
00:13:24.770 --&gt; 00:13:26.810
Gabor Szabo: there. Now…</p>
<p>81
00:13:26.940 --&gt; 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</p>
<p>82
00:13:37.660 --&gt; 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.</p>
<p>83
00:13:55.690 --&gt; 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</p>
<p>84
00:14:09.940 --&gt; 00:14:15.329
Gabor Szabo: And… and here. Okay, and the plus button, I can create a new file.</p>
<p>85
00:14:19.960 --&gt; 00:14:23.440
Gabor Szabo: And this F go to file? No?</p>
<p>86
00:14:28.970 --&gt; 00:14:30.220
Gabor Szabo: Add file.</p>
<p>87
00:14:31.720 --&gt; 00:14:35.850
Gabor Szabo: index. Index.md…</p>
<p>88
00:14:42.570 --&gt; 00:14:44.670
Gabor Szabo: What is your problem?</p>
<p>89
00:14:46.840 --&gt; 00:14:50.830
Gabor Szabo: It's every ti- every time different… every time it's different.</p>
<p>90
00:14:52.640 --&gt; 00:14:54.180
Gabor Szabo: Here, add file.</p>
<p>91
00:14:54.520 --&gt; 00:14:55.610
Gabor Szabo: Okay.</p>
<p>92
00:14:55.970 --&gt; 00:14:57.890
Gabor Szabo: I'm clicking on Add File.</p>
<p>93
00:14:58.640 --&gt; 00:15:08.729
Gabor Szabo: Here now, okay, sorry. Index.md, index.md, and then let's put some markdowns here.</p>
<p>94
00:15:08.840 --&gt; 00:15:20.750
Gabor Szabo: Welcome to… my demo… And this is going to be the main title, then some…</p>
<p>95
00:15:21.310 --&gt; 00:15:33.790
Gabor Szabo: subtitle, then I can put, CAIC and, fruits and, wine?</p>
<p>96
00:15:34.390 --&gt; 00:15:48.050
Gabor Szabo: And then I can put 3 rows, and then I can put here Perl, and Python, and Rust.</p>
<p>97
00:15:48.290 --&gt; 00:15:51.230
Gabor Szabo: And,</p>
<p>98
00:15:51.470 --&gt; 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?</p>
<p>99
00:16:06.970 --&gt; 00:16:13.609
Gabor Szabo: Copilot already suggested a commit message, okay, I'm not arguing with Copilot.</p>
<p>100
00:16:13.760 --&gt; 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.</p>
<p>101
00:16:27.410 --&gt; 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.</p>
<p>102
00:16:42.970 --&gt; 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.</p>
<p>103
00:16:53.080 --&gt; 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</p>
<p>104
00:17:07.480 --&gt; 00:17:09.289
Gabor Szabo: Well, it takes time.</p>
<p>105
00:17:10.980 --&gt; 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.</p>
<p>106
00:17:20.670 --&gt; 00:17:21.740
Gabor Szabo: Okay.</p>
<p>107
00:17:22.099 --&gt; 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,</p>
<p>108
00:17:41.550 --&gt; 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.</p>
<p>109
00:18:05.410 --&gt; 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</p>
<p>110
00:18:18.560 --&gt; 00:18:27.669
Gabor Szabo: generator, and we can… we're going to change that, soon. Now, this whole thing is using, Markdown.</p>
<p>111
00:18:28.680 --&gt; 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…</p>
<p>112
00:18:43.500 --&gt; 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…</p>
<p>113
00:19:00.290 --&gt; 00:19:01.659
Gabor Szabo: right?</p>
<p>114
00:19:03.070 --&gt; 00:19:10.860
Gabor Szabo: And the idea is that, because we used to write emails without any,</p>
<p>115
00:19:11.810 --&gt; 00:19:17.339
Gabor Szabo: highlighting any… any emphasis, any HTML, any design, just text.</p>
<p>116
00:19:17.400 --&gt; 00:19:20.609
Gabor Szabo: These texture and elements could be used</p>
<p>117
00:19:20.610 --&gt; 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.</p>
<p>118
00:19:41.830 --&gt; 00:19:48.299
Gabor Szabo: Or, I guess you can ask the AI to do that for you.</p>
<p>119
00:19:48.610 --&gt; 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.</p>
<p>120
00:19:58.770 --&gt; 00:20:09.319
Gabor Szabo: Let's see, add the… Let me, let me, let me find… What shall I find?</p>
<p>121
00:20:10.890 --&gt; 00:20:16.030
Gabor Szabo: I always forget to prepare the example image, so…</p>
<p>122
00:20:19.340 --&gt; 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…</p>
<p>123
00:20:38.980 --&gt; 00:20:42.730
Gabor Szabo: in the next page, hopefully it will work. Let's see.</p>
<p>124
00:20:43.800 --&gt; 00:20:49.290
Gabor Szabo: So I create now another file, add file, Create a new file.</p>
<p>125
00:20:50.410 --&gt; 00:21:02.400
Gabor Szabo: And that's a calculator.md, it's going to be called, and… My first…</p>
<p>126
00:21:04.260 --&gt; 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.</p>
<p>127
00:21:15.090 --&gt; 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.</p>
<p>128
00:21:31.830 --&gt; 00:21:38.510
Gabor Szabo: Okay, so this will create a… Another page called Calculator.</p>
<p>129
00:21:40.550 --&gt; 00:21:48.029
Gabor Szabo: And, well, now it's building already, but I think here I'm going to add another link</p>
<p>130
00:21:48.320 --&gt; 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</p>
<p>131
00:21:59.550 --&gt; 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.</p>
<p>132
00:22:10.950 --&gt; 00:22:15.290
Gabor Szabo: Okay? So now I've… I committed two changes.</p>
<p>133
00:22:15.340 --&gt; 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.</p>
<p>134
00:22:35.140 --&gt; 00:22:36.160
Gabor Szabo: running?</p>
<p>135
00:22:36.790 --&gt; 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.</p>
<p>136
00:22:46.070 --&gt; 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.</p>
<p>137
00:23:01.260 --&gt; 00:23:09.340
Gabor Szabo: And they don't write the content in Markdown, because it's very too complex for some people.</p>
<p>138
00:23:09.600 --&gt; 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…</p>
<p>139
00:23:20.720 --&gt; 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</p>
<p>140
00:23:34.660 --&gt; 00:23:39.000
Gabor Szabo: changes happened to our source code, so now if I go to the</p>
<p>141
00:23:39.020 --&gt; 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.</p>
<p>142
00:23:49.720 --&gt; 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.</p>
<p>143
00:24:08.590 --&gt; 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.</p>
<p>144
00:24:18.760 --&gt; 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.</p>
<p>145
00:24:30.080 --&gt; 00:24:32.729
Gabor Szabo: I don't know which is worse.</p>
<p>146
00:24:32.930 --&gt; 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.</p>
<p>147
00:24:50.320 --&gt; 00:24:51.610
Leon.Vak: I have a question.</p>
<p>148
00:24:52.020 --&gt; 00:24:54.660
Gabor Szabo: Okay, go ahead.</p>
<p>149
00:24:54.940 --&gt; 00:25:04.609
Leon.Vak: You're saying that we can embed different objects by uploading them to GitHub?</p>
<p>150
00:25:04.710 --&gt; 00:25:11.019
Leon.Vak: But, you know, this is not ideal to upload</p>
<p>151
00:25:11.470 --&gt; 00:25:15.180
Leon.Vak: things like images into Git REPL.</p>
<p>152
00:25:15.860 --&gt; 00:25:21.920
Leon.Vak: So, because Git repositories are not meant to be used for binary data.</p>
<p>153
00:25:22.480 --&gt; 00:25:24.299
Gabor Szabo: So it's… yeah.</p>
<p>154
00:25:24.300 --&gt; 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?</p>
<p>155
00:25:38.860 --&gt; 00:25:40.830
Gabor Szabo: Yeah, so, so…</p>
<p>156
00:25:40.990 --&gt; 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…</p>
<p>157
00:25:53.100 --&gt; 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.</p>
<p>158
00:26:05.600 --&gt; 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.</p>
<p>159
00:26:16.750 --&gt; 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.</p>
<p>160
00:26:25.630 --&gt; 00:26:33.609
Gabor Szabo: But, what you are asking here is actually… maybe it's not that you are asking.</p>
<p>161
00:26:36.300 --&gt; 00:26:42.969
Gabor Szabo: Right now, what we are doing is, creating, basically, a static website.</p>
<p>162
00:26:42.970 --&gt; 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…</p>
<p>163
00:26:56.790 --&gt; 00:27:02.270
Gabor Szabo: Front-end will be dynamic, even though behind the scenes you don't have any back-end.</p>
<p>164
00:27:02.450 --&gt; 00:27:08.380
Gabor Szabo: But, nothing is generated on the fly</p>
<p>165
00:27:08.380 --&gt; 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.</p>
<p>166
00:27:24.450 --&gt; 00:27:30.869
Gabor Szabo: It's called Jekyll, which is one of the static side generators, and this is what</p>
<p>167
00:27:30.870 --&gt; 00:27:35.419
Gabor Szabo: GitHub picked, I don't know, 20 years ago.</p>
<p>168
00:27:36.240 --&gt; 00:27:37.710
Gabor Szabo: And, and that's it.</p>
<p>169
00:27:37.840 --&gt; 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.</p>
<p>170
00:27:52.110 --&gt; 00:27:53.340
Gabor Szabo: Let's in!</p>
<p>171
00:28:00.020 --&gt; 00:28:03.790
Gabor Szabo: I'm sorry if my voice is…</p>
<p>172
00:28:04.230 --&gt; 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</p>
<p>173
00:28:15.050 --&gt; 00:28:17.390
Gabor Szabo: configure your GitHub actions.</p>
<p>174
00:28:17.520 --&gt; 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.</p>
<p>175
00:28:35.970 --&gt; 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</p>
<p>176
00:28:51.740 --&gt; 00:28:54.230
Gabor Szabo: to the… website.</p>
<p>177
00:28:54.620 --&gt; 00:28:55.630
Gabor Szabo: Okay?</p>
<p>178
00:28:56.850 --&gt; 00:29:02.759
Gabor Szabo: So, that, that way you can, you can,</p>
<p>179
00:29:04.480 --&gt; 00:29:07.379
Gabor Szabo: You can use other files as well, okay?</p>
<p>180
00:29:07.470 --&gt; 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.</p>
<p>181
00:29:26.750 --&gt; 00:29:29.299
Gabor Szabo: And I do want it to be in a…</p>
<p>182
00:29:29.320 --&gt; 00:29:34.050
Gabor Szabo: safe place, and a GitHub repository is a very safe place.</p>
<p>183
00:29:34.120 --&gt; 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…</p>
<p>184
00:29:49.350 --&gt; 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</p>
<p>185
00:30:01.050 --&gt; 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</p>
<p>186
00:30:15.080 --&gt; 00:30:18.390
Gabor Szabo: whatever, what subgroup.</p>
<p>187
00:30:18.400 --&gt; 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.</p>
<p>188
00:30:36.560 --&gt; 00:30:39.120
Gabor Szabo: Okay, let's go on with the work.</p>
<p>189
00:30:39.390 --&gt; 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.</p>
<p>190
00:30:59.580 --&gt; 00:31:05.629
Gabor Szabo: I would like you, no, actually, no, no problem. It's good enough.</p>
<p>191
00:31:05.630 --&gt; 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</p>
<p>192
00:31:15.510 --&gt; 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.</p>
<p>193
00:31:23.690 --&gt; 00:31:31.990
Gabor Szabo: that's a good way that I can… I can help, that that's the reason. Having,</p>
<p>194
00:31:32.230 --&gt; 00:31:35.200
Gabor Szabo: Workshop, and, and you being here,</p>
<p>195
00:31:35.560 --&gt; 00:31:39.710
Gabor Szabo: You have the advantage that you can ask questions, and I can help you.</p>
<p>196
00:31:39.840 --&gt; 00:31:45.159
Gabor Szabo: So, let's, stop the recording and start the clock.</p>
<p>197
00:31:47.860 --&gt; 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.</p>
<p>198
00:32:11.840 --&gt; 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.</p>
<p>199
00:32:31.050 --&gt; 00:32:33.369
Gabor Szabo: Or, you can,</p>
<p>200
00:32:33.740 --&gt; 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…</p>
<p>201
00:32:53.800 --&gt; 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.</p>
<p>202
00:33:06.010 --&gt; 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…</p>
<p>203
00:33:25.830 --&gt; 00:33:29.300
Gabor Szabo: Create a different name, then,</p>
<p>204
00:33:29.730 --&gt; 00:33:37.259
Gabor Szabo: it won't generate GitHub pages automatically out of them, by default, and</p>
<p>205
00:33:37.930 --&gt; 00:33:45.010
Gabor Szabo: And then you might need to turn the generation on, and we'll see how to do that.</p>
<p>206
00:33:45.190 --&gt; 00:33:52.939
Gabor Szabo: Okay, it's still not the same. You need 24 at the end, right? It's Moshe-1024.</p>
<p>207
00:33:54.870 --&gt; 00:33:58.439
Gabor Szabo: That's… that's how it works, that's how GitHub works, okay?</p>
<p>208
00:34:11.280 --&gt; 00:34:13.390
Gabor Szabo: And, for everyone.</p>
<p>209
00:34:14.710 --&gt; 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.</p>
<p>210
00:34:27.630 --&gt; 00:34:32.739
Gabor Szabo: Okay, let me… Check… no, it's not there yet.</p>
<p>211
00:34:40.460 --&gt; 00:34:44.169
Gabor Szabo: Okay, you still need to change it to… is the 24.</p>
<p>212
00:34:50.040 --&gt; 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?</p>
<p>213
00:35:05.720 --&gt; 00:35:11.960
Gabor Szabo: Let me check… Moshe, please, change, changes.</p>
<p>214
00:35:12.180 --&gt; 00:35:13.839
Gabor Szabo: So we can continue.</p>
<p>215
00:35:20.840 --&gt; 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.</p>
<p>216
00:35:33.890 --&gt; 00:35:36.020
Gabor Szabo: That's the 24, right?</p>
<p>217
00:35:36.160 --&gt; 00:35:39.389
Gabor Szabo: The username, your username has the 24 at the end.</p>
<p>218
00:35:41.170 --&gt; 00:35:47.669
Gabor Szabo: Oh, now it's there, and now if we visit the website…</p>
<p>219
00:35:48.820 --&gt; 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…</p>
<p>220
00:35:57.940 --&gt; 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.</p>
<p>221
00:36:07.000 --&gt; 00:36:10.579
Gabor Szabo: Probably it's not building. Okay, so let's see,</p>
<p>222
00:36:11.430 --&gt; 00:36:15.999
Gabor Szabo: Let me get to this one. Okay, so I go to Settings.</p>
<p>223
00:36:16.380 --&gt; 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.</p>
<p>224
00:36:34.440 --&gt; 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.</p>
<p>225
00:36:42.770 --&gt; 00:36:50.079
Gabor Szabo: Then, here you pick the branch name, which is probably main for you as well. Let me check.</p>
<p>226
00:36:53.330 --&gt; 00:36:55.829
Gabor Szabo: Yeah, your branch is called main?</p>
<p>227
00:36:57.770 --&gt; 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.</p>
<p>228
00:37:17.200 --&gt; 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</p>
<p>229
00:37:28.670 --&gt; 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</p>
<p>230
00:37:37.440 --&gt; 00:37:40.940
Gabor Szabo: But it didn't have back then.</p>
<p>231
00:37:41.060 --&gt; 00:37:43.330
Gabor Szabo: And, so…</p>
<p>232
00:37:44.110 --&gt; 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.</p>
<p>233
00:37:55.130 --&gt; 00:37:57.559
Gabor Szabo: You go to the settings.</p>
<p>234
00:37:58.490 --&gt; 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.</p>
<p>235
00:38:30.700 --&gt; 00:38:31.930
Moshe Stein: Can you let me know?</p>
<p>236
00:38:32.550 --&gt; 00:38:33.320
Gabor Szabo: Sorry?</p>
<p>237
00:38:41.650 --&gt; 00:38:46.090
Gabor Szabo: Do you want to share your screen and shall we look at it, or is it fine?</p>
<p>238
00:38:50.020 --&gt; 00:38:53.859
Gabor Szabo: Or shall we postpone it and do it in the break later on?</p>
<p>239
00:39:05.750 --&gt; 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.</p>
<p>240
00:39:14.760 --&gt; 00:39:23.270
Moshe Stein: I did… I entered the… In the custom dom… I chose roots.</p>
<p>241
00:39:23.510 --&gt; 00:39:26.910
Moshe Stein: And then the save button is, not…</p>
<p>242
00:39:27.200 --&gt; 00:39:30.969
Moshe Stein: I can't select it, I can't press on it, it's grayed out.</p>
<p>243
00:39:31.050 --&gt; 00:39:35.240
Gabor Szabo: Would you like to share your screen, or that… is it okay?</p>
<p>244
00:39:36.370 --&gt; 00:39:39.700
Gabor Szabo: You don't have any private syncs on your screen, right?</p>
<p>245
00:39:40.430 --&gt; 00:39:41.639
Moshe Stein: Yes, it's possible.</p>
<p>246
00:39:41.960 --&gt; 00:39:44.239
Gabor Szabo: Okay, so wait a second, I'll, I'll…</p>
<p>247
00:39:46.520 --&gt; 00:39:50.029
Gabor Szabo: Make you co-host, so you can share the screen.</p>
<p>248
00:39:55.320 --&gt; 00:39:57.270
Gabor Szabo: I stopped sharing mine.</p>
<p>249
00:40:08.880 --&gt; 00:40:10.060
Moshe Stein: Can you sit?</p>
<p>250
00:40:12.800 --&gt; 00:40:16.130
Gabor Szabo: Okay, you don't need that custom domain there.</p>
<p>251
00:40:17.210 --&gt; 00:40:18.370
Gabor Szabo: It looks…</p>
<p>252
00:40:19.930 --&gt; 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.</p>
<p>253
00:40:31.700 --&gt; 00:40:32.410
Gabor Szabo: No, sort of.</p>
<p>254
00:40:32.410 --&gt; 00:40:32.730
Moshe Stein: capture.</p>
<p>255
00:40:32.730 --&gt; 00:40:36.809
Gabor Szabo: At the top of the page, at the top of the page, you have actions.</p>
<p>256
00:40:37.500 --&gt; 00:40:38.420
Gabor Szabo: Yeah.</p>
<p>257
00:40:40.360 --&gt; 00:40:44.459
Gabor Szabo: Okay, so you might need to make a change. Okay, go ahead, go…</p>
<p>258
00:40:47.060 --&gt; 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.</p>
<p>259
00:40:54.250 --&gt; 00:40:58.290
Gabor Szabo: Go… just go to the code part of the repository.</p>
<p>260
00:40:58.810 --&gt; 00:41:05.420
Gabor Szabo: and make it… basically make a commit. So here, edit, click on the pencil there, yeah?</p>
<p>261
00:41:06.260 --&gt; 00:41:08.910
Gabor Szabo: And just type in hello, or whatever.</p>
<p>262
00:41:09.230 --&gt; 00:41:11.329
Gabor Szabo: And, commit.</p>
<p>263
00:41:19.160 --&gt; 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…</p>
<p>264
00:41:26.460 --&gt; 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?</p>
<p>265
00:41:37.060 --&gt; 00:41:37.770
Moshe Stein: Okay.</p>
<p>266
00:41:53.410 --&gt; 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.</p>
<p>267
00:42:12.350 --&gt; 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</p>
<p>268
00:42:31.640 --&gt; 00:42:35.380
Gabor Szabo: If I visit my website now, so subgob.</p>
<p>269
00:42:35.820 --&gt; 00:42:37.690
Gabor Szabo: github.io.</p>
<p>270
00:42:38.170 --&gt; 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,</p>
<p>271
00:42:50.590 --&gt; 00:42:56.150
Gabor Szabo: GitHub, GitHub pages. But I can go to my repository.</p>
<p>272
00:42:56.960 --&gt; 00:43:01.650
Gabor Szabo: Okay? Go to the code, create a new file.</p>
<p>273
00:43:05.880 --&gt; 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.</p>
<p>274
00:43:20.670 --&gt; 00:43:22.090
Gabor Szabo: Okay…</p>
<p>275
00:43:26.240 --&gt; 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?</p>
<p>276
00:43:49.210 --&gt; 00:43:54.080
Gabor Szabo: In the meantime, I'm reloading this one, and here you have your website, Moshe.</p>
<p>277
00:43:54.360 --&gt; 00:44:01.950
Gabor Szabo: Okay? So now that you configured GitHub Act, the pages part.</p>
<p>278
00:44:02.000 --&gt; 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.</p>
<p>279
00:44:18.200 --&gt; 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.</p>
<p>280
00:44:46.540 --&gt; 00:44:47.790
Gabor Szabo: Okay.</p>
<p>281
00:44:52.610 --&gt; 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…</p>
<p>282
00:45:06.740 --&gt; 00:45:13.710
Gabor Szabo: the DNS part, right? So, in order for, for…</p>
<p>283
00:45:14.510 --&gt; 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.</p>
<p>284
00:45:25.290 --&gt; 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.</p>
<p>285
00:45:38.350 --&gt; 00:45:44.049
Gabor Szabo: So the world, everyone from the world, will, when visiting your</p>
<p>286
00:45:44.530 --&gt; 00:45:48.140
Gabor Szabo: URL, they will arrive to GitHub pages.</p>
<p>287
00:45:48.290 --&gt; 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</p>
<p>288
00:46:01.770 --&gt; 00:46:06.350
Gabor Szabo: websites on GitHub pages, so millions of people</p>
<p>289
00:46:06.410 --&gt; 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…</p>
<p>290
00:46:22.850 --&gt; 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,</p>
<p>291
00:46:33.450 --&gt; 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.</p>
<p>292
00:46:41.740 --&gt; 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.</p>
<p>293
00:46:58.330 --&gt; 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.</p>
<p>294
00:47:15.050 --&gt; 00:47:23.250
Gabor Szabo: Right? So, the clock hostname, clock.codemaven.com.</p>
<p>295
00:47:23.300 --&gt; 00:47:27.180
Gabor Szabo: It's a CNAME which is mapped to my…</p>
<p>296
00:47:27.700 --&gt; 00:47:34.689
Gabor Szabo: actual website, subgroup.github.io. And because this is on GitHub.</p>
<p>297
00:47:35.070 --&gt; 00:47:45.190
Gabor Szabo: Now, everyone who is visiting clock.code-maven.com will arrive to… To the GitHub pages.</p>
<p>298
00:47:45.280 --&gt; 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.</p>
<p>299
00:47:57.340 --&gt; 00:48:06.510
Gabor Szabo: The… If you want to have the www mapped to it, that's the same idea here.</p>
<p>300
00:48:07.300 --&gt; 00:48:09.049
Gabor Szabo: I just have to find it.</p>
<p>301
00:48:10.530 --&gt; 00:48:17.370
Gabor Szabo: <a href="http://www">www</a>. It's also a CNAME, okay, mapping here. But if you want your main</p>
<p>302
00:48:17.600 --&gt; 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.</p>
<p>303
00:48:34.060 --&gt; 00:48:39.060
Gabor Szabo: So, someone is writing to the chat, I think.</p>
<p>304
00:48:41.790 --&gt; 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.</p>
<p>305
00:49:00.250 --&gt; 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.</p>
<p>306
00:49:20.090 --&gt; 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…</p>
<p>307
00:49:37.010 --&gt; 00:49:41.630
Gabor Szabo: on some other place, and a couple of things are hosted on GitLab pages, but…</p>
<p>308
00:49:41.630 --&gt; 00:49:47.640
Gabor Szabo: That's a separate story. So, it's walk.me, that's the website.</p>
<p>309
00:49:48.930 --&gt; 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.</p>
<p>310
00:49:59.800 --&gt; 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</p>
<p>311
00:50:09.800 --&gt; 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</p>
<p>312
00:50:27.380 --&gt; 00:50:28.880
Gabor Szabo: repository.</p>
<p>313
00:50:29.100 --&gt; 00:50:35.309
Gabor Szabo: In the settings, You go to the pages.</p>
<p>314
00:50:36.210 --&gt; 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.</p>
<p>315
00:50:55.190 --&gt; 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</p>
<p>316
00:51:12.850 --&gt; 00:51:19.790
Gabor Szabo: repository. So this is the repository of that clock that you saw. This is the settings.</p>
<p>317
00:51:19.940 --&gt; 00:51:24.220
Gabor Szabo: And in the settings, Pages.</p>
<p>318
00:51:27.120 --&gt; 00:51:28.190
Gabor Szabo: pages.</p>
<p>319
00:51:28.320 --&gt; 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.</p>
<p>320
00:51:38.340 --&gt; 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…</p>
<p>321
00:51:54.100 --&gt; 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.</p>
<p>322
00:52:07.480 --&gt; 00:52:17.630
Gabor Szabo: When I added this information, it created a file, and then I can show you that file.</p>
<p>323
00:52:29.060 --&gt; 00:52:31.820
Gabor Szabo: It created a file called CNAME,</p>
<p>324
00:52:32.160 --&gt; 00:52:34.490
Gabor Szabo: And in that file, it wrote.</p>
<p>325
00:52:34.700 --&gt; 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,</p>
<p>326
00:52:44.140 --&gt; 00:52:50.669
Gabor Szabo: And put the hostname there, and push it out, or save it in the repository, okay?</p>
<p>327
00:52:51.650 --&gt; 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.</p>
<p>328
00:53:04.270 --&gt; 00:53:06.169
Gabor Szabo: And the same thing will happen.</p>
<p>329
00:53:06.180 --&gt; 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.</p>
<p>330
00:53:26.380 --&gt; 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,</p>
<p>331
00:53:46.080 --&gt; 00:53:47.570
Gabor Szabo: signature, I guess.</p>
<p>332
00:53:48.460 --&gt; 00:53:52.609
Gabor Szabo: And, and that's it.</p>
<p>333
00:53:54.470 --&gt; 00:53:55.500
Gabor Szabo: Okay.</p>
<p>334
00:53:57.090 --&gt; 00:53:58.880
Gabor Szabo: I can close this one.</p>
<p>335
00:53:59.640 --&gt; 00:54:01.800
Gabor Szabo: I don't need this one, I think.</p>
<p>336
00:54:06.060 --&gt; 00:54:08.380
Gabor Szabo: That was actually my website, okay.</p>
<p>337
00:54:24.180 --&gt; 00:54:29.489
Gabor Szabo: Actually, okay, we have now this website. Okay, what else?</p>
<p>338
00:54:31.030 --&gt; 00:54:39.180
Gabor Szabo: So you have… okay, so now let's, do something else. Now, actually…</p>
<p>339
00:54:39.310 --&gt; 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.</p>
<p>340
00:54:51.170 --&gt; 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</p>
<p>341
00:55:06.260 --&gt; 00:55:11.479
Gabor Szabo: now, manually. So how does this, happen?</p>
<p>342
00:55:11.510 --&gt; 00:55:14.270
Gabor Szabo: First of all,</p>
<p>343
00:55:15.040 --&gt; 00:55:24.220
Gabor Szabo: because I keep using, keep deleting and reusing my default site, because of that, this one.</p>
<p>344
00:55:24.430 --&gt; 00:55:35.680
Gabor Szabo: which is called github.subgab.com. It's mapped my hostname, GitHub hostname, from my subgroup.com domain.</p>
<p>345
00:55:35.790 --&gt; 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.</p>
<p>346
00:55:46.590 --&gt; 00:55:48.680
Gabor Szabo: Hello, show me, please.</p>
<p>347
00:55:48.910 --&gt; 00:55:57.389
Gabor Szabo: Okay, this is the CNAME, okay, exactly as we had. But it has… also has a configuration file.</p>
<p>348
00:55:57.660 --&gt; 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,</p>
<p>349
00:56:08.690 --&gt; 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.</p>
<p>350
00:56:25.920 --&gt; 00:56:30.139
Gabor Szabo: You can use just, say, theme and the name of the theme.</p>
<p>351
00:56:30.340 --&gt; 00:56:35.979
Gabor Szabo: And for some of them, you have to use this plugin called…</p>
<p>352
00:56:36.720 --&gt; 00:56:49.530
Gabor Szabo: plugin called Jackie Remote Theme, and then use that. So we can come here, To our repository now.</p>
<p>353
00:56:49.860 --&gt; 00:56:53.560
Gabor Szabo: This is not… not the one that I wanted to show you.</p>
<p>354
00:56:55.640 --&gt; 00:56:59.209
Gabor Szabo: Let's go to the subgroup.github.io.</p>
<p>355
00:56:59.410 --&gt; 00:57:01.300
Gabor Szabo: And,</p>
<p>356
00:57:09.890 --&gt; 00:57:12.560
Gabor Szabo: chat with Copilot? Okay.</p>
<p>357
00:57:15.050 --&gt; 00:57:20.980
Gabor Szabo: Actually, no, maybe I need to create an issue, Maybe that's the way?</p>
<p>358
00:57:25.110 --&gt; 00:57:28.239
Gabor Szabo: Improve the design.</p>
<p>359
00:57:29.620 --&gt; 00:57:36.790
Gabor Szabo: of the site… Configure and nice theme.</p>
<p>360
00:57:37.030 --&gt; 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.</p>
<p>361
00:57:51.800 --&gt; 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…</p>
<p>362
00:58:03.180 --&gt; 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.</p>
<p>363
00:58:15.450 --&gt; 00:58:16.700
Gabor Szabo: What else?</p>
<p>364
00:58:16.850 --&gt; 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.</p>
<p>365
00:58:30.220 --&gt; 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.</p>
<p>366
00:58:42.230 --&gt; 00:58:44.940
Gabor Szabo: And, back to the pages.</p>
<p>367
00:58:45.810 --&gt; 00:58:53.509
Gabor Szabo: You could hear… Pick a different branch, if you had… if you created one.</p>
<p>368
00:58:53.670 --&gt; 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.</p>
<p>369
00:59:03.450 --&gt; 00:59:08.360
Gabor Szabo: The idea is that, I think, historically, so the reason with the branches.</p>
<p>370
00:59:08.610 --&gt; 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.</p>
<p>371
00:59:17.010 --&gt; 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…</p>
<p>372
00:59:31.030 --&gt; 00:59:35.439
Gabor Szabo: I'm not sure if it was a good idea or not. Okay, let's see. Because…</p>
<p>373
00:59:35.820 --&gt; 00:59:43.239
Gabor Szabo: Maybe the website should go hand-in-hand with the… Changes in the project.</p>
<p>374
00:59:43.430 --&gt; 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</p>
<p>375
00:59:59.880 --&gt; 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.</p>
<p>376
01:00:15.420 --&gt; 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.</p>
<p>377
01:00:34.330 --&gt; 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</p>
<p>378
01:00:45.550 --&gt; 01:00:50.880
Gabor Szabo: project, a code-based code project, then you want to have all the…</p>
<p>379
01:00:51.070 --&gt; 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…</p>
<p>380
01:01:05.290 --&gt; 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</p>
<p>381
01:01:20.650 --&gt; 01:01:26.139
Gabor Szabo: The website won't show your source code and anything like that.</p>
<p>382
01:01:26.660 --&gt; 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.</p>
<p>383
01:01:31.920 --&gt; 01:01:39.340
Gabor Szabo: This is the… what we saw earlier a couple of times when we had these sessions, okay.</p>
<p>384
01:01:39.980 --&gt; 01:01:42.840
Gabor Szabo: Yeah, someone else had to go. Okay.</p>
<p>385
01:01:43.200 --&gt; 01:01:44.470
Gabor Szabo: You're welcome.</p>
<p>386
01:01:44.860 --&gt; 01:01:52.300
Gabor Szabo: Okay, I think we can finish now, with this.</p>
<p>387
01:01:54.170 --&gt; 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,</p>
<p>388
01:02:05.440 --&gt; 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…</p>
<p>389
01:02:25.180 --&gt; 01:02:27.540
Gabor Szabo: What is this called? Live?</p>
<p>390
01:02:29.140 --&gt; 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.</p>
<p>391
01:02:44.370 --&gt; 01:02:46.470
Gabor Szabo: We are going to have a few.</p>
<p>392
01:02:46.650 --&gt; 01:02:48.340
Gabor Szabo: Thank you, bye-bye.</p>
<p>393
01:02:48.340 --&gt; 01:02:49.110
Leon.Vak: governor.</p>
]]></content>
    <author>
      <name></name>
    </author>
  </entry>

  <entry>
    <title>Git Maven</title>
    <summary type="html"><![CDATA[]]></summary>
    <updated>2025-09-01T12:00:03Z</updated>
    <pubDate>2025-09-01T12:00:03Z</pubDate>
    <link rel="alternate" type="text/html" href="https://git.code-maven.com/" />
    <id>https://git.code-maven.com/</id>
    <content type="html"><![CDATA[<h2 class="title is-4">Welcome to the Git Maven!</h2>
<ul>
<li><a href="/git-maven/">Git Maven</a></li>
<li><a href="/git/">Git</a></li>
<li><a href="/github-actions/">GitHub Actions / GitHub Workflows</a></li>
<li><a href="/github-pages/">GitHub Pages</a></li>
<li><a href="/gitlab/">GitLab</a></li>
</ul>
]]></content>
    <author>
      <name></name>
    </author>
  </entry>

</feed>

