Transcript
Hey guys. So in the previous episode, we created a new GitHub repository and deployed it, uh, on a, uh, separate website, uh, on its own domain using GitHub pages for free. So here are the send of the GitHub pages. And now, so we just have a one page H TM L website. We are going to use GitHub pages to turn this one page website into a real blog. So here's again, a wonderful example of using GitHub pages. Here's my blog with lots of blog posts with a different static pages. You can navigate by, uh, tags. You can open a single blog post, see images, uh, potentially embed the videos. I think I have some videos embedded the, um, somewhere like here. So you can just own the whole website. Let's try adding the JL to our existing repository where we just currently have this index, HTML and, uh, CNAME file. So I'm gonna do the JE L homepage. I'm going to run GEM install bundle JE L. But, uh, first I checked out this repository locally. So I have run, uh, this repository locally here. If I go to the code, I see I have the CNAME and index H TM L file. So I will say Gem install, bundler jl, uh, jl, uh, my new awesome site, whatever. Uh, now I run this kind, uh, inside my repository, so I don't want to like nest it even deeper. I'll just move everything out of, uh, uh, the file, the folder that I have just generated for it to be in the root folder. And I'm going to delete this, my awesome site, uh, folder. And, uh, I can also delete this index html file that I have previously created. So I replace everything in this, uh, uh, repository except the cname. It stays with the, what I have generated with the je. Let's have a look in the GI changes. So here we have the GEM file, where we have Jekyll Gem and we also have the GEM Mini. It is, uh, front and template for, uh, rubbing the styling of your, uh, blog. Uh, the is a plugin will come, uh, to the plugins later, but fun plugin that is installed by default and some other gems to just make the full thin work. When you run like rail generate, uh, create new rails application, you have a gem file with like maybe 20 gems installed. Here. There are, uh, fewer gems, uh, at least in the gem file. You have, uh, this index markdown. So it's kind of the, uh, home, uh, page, I assume, uh, an about page that you can populate with what you want. And, uh, we have a posts, uh, folder, uh, the most important folder where you're going to keep all your posts. So all my posts, each, uh, file for this is kept in the post folder. And you see they're all in markdown. And the, uh, config file where you can set the defaults, uh, around your application, like the, uh, title of your app, for example. Anyway, we have generated this, uh, new app. Let's, uh, try run it on local host. So going back to the JE l docs, I'm going to say, uh, bundle execute je l serve. I'll just run bundle on scan, and, uh, by default it is going to serve on local host, uh, 4,000. So let's visit local host, uh, uh, 4,000. And here we have our basic block. Now, uh, we have the title that is, uh, again defined here in config. You see, you can over write the title. So, uh, today I learned blog by YA o. We can update the title. It'll not get updated straight away because whenever you change something in config, you need to restart the server to see the changes. So you see now I restart the server and I see the, uh, changes. I have, uh, an about page where you would usually put, uh, like, uh, information about your services, about yourself, maybe your email address. Also, by the default, there is an example link to a GitHub page at Vita page, uh, your email. So let's make it, uh, more personal. Now, in that video username, I would put my, uh, username, GitHub username, uh, email, uh, description. You can, uh, edit later. But, uh, I think it would be, yeah, here's a description, this, see it, uh, on the bottom again, you can say like, again, a couple of words about yourself or why you are actually writing this blog. Um, let's try adding something in this index markdown. Yes, you see, so this is, uh, kind of the layout file. And whatever you put, uh, here is going to be rendered above, uh, the list of your post. And you see we have this subscribed via RS button. Uh, so I think it is provided by this JL feed, the, I think it's the JLRS feed, the, uh, plugin. You see, we have this JL feed plugin, and we have the theme set to be minimal from the GEM mini. Okay, so we have the basic installation of jl and we have a blog running. Let's, uh, save our changes. Um, I'll, uh, just not be committing this, uh, small node that I just did, uh, create JL blog, and I will push and, uh, now I think whenever I push it is going to trigger a new deployment. So here you see, I just, uh, pushed to GitHub and, uh, it triggered. And action. So there's the action, uh, page build and deployment. And, uh, we don't have a folder of like, uh, GitHub, uh, actions, uh, set in the application, but it still has this workflow because we have it in our settings pages. Uh, uh, here we say build and deployment, deploy from a branch. Uh, we could manually have a GitHub actions, uh, uh, deployment I ml file if you have our own setup. But if you don't have like anything non-standard, you can just have this deployed from a branch. Okay, so it should have deployed. Let's try, uh, refreshing our website. Boom. You see you have the jiggle blog running. Wonderful. Let's try at an, uh, blog post. So, um, in our posts, uh, again, we have, uh, first of all, the timestamp, uh, name of the blog, uh, post as it is going to appear in the URL. So if you visit this blog post, here, you see, uh, the timestamp, the URL, let's create a new blog post. So here, inside post, I'm just going to manually create a new file. 2024, 12, can do it in the past. So 20, uh, I want to blog or j versus WordPress, md. Then, uh, I'm going to go to another blog post, and I'm going to copy the header. So, uh, we need layout, post layout post for all the posts. Uh, should I use JL or blog post for bill? The title, uh, date, um, I don't think you actually have to set it if you have the date, uh, in the, uh, markup. But, uh, let's leave it. And categories, ZEKEL and WordPress. Uh, let's add some kind of text. Let's try adding and the image. So, uh, for adding images, I think we would need to, uh, put them somewhere. Now, uh, we can create a folder for them. Let's see how I do it in, uh, another application. So here in this circle block, I have a folder for, uh, assets. Let's create a folder for assets. Inside. I will have, uh, uh, images, or you can just have it directly in assets. Let's see how, see how I do it here? Yeah, I have some folders, but I also have, uh, some images just in the route. Let's add the assets for posts. So just a folder for all the posts. And here I'm going to input some kind of image. It can be just a screenshot or, uh, whatever. I will, uh, put it here. Let's, uh, open this in finder. I'll put it into the posts. Okay, so we have a screenshot inside our posts. Let's give it a better title. So a screenshot, okay. And we want to display this screenshot, uh, in our, uh, app. So I'm going to copy the relative path. I will put it here. And let's just pause, uh, on this. So, uh, let's go to our blog. You see, I refresh. And as the blog has been running, you see I have, uh, another post that's has been added. Uh, it has been added with today's date, not with the, uh, the date that I put here, because we have today's date, uh, and the date timestamp. Let's refresh. Okay. Not found with this date, but if I refresh here, you see I have the date. What if don't have the date set at all. Uh, it is still the 20th. Let's try changing to the 21st. Refreshing. Okay, so you see, if you don't explicitly set the date, uh, in the, the, uh, header, then it'll inherit from, uh, the date in the title. And I think, uh, it's better to inherit from the date in the title. Um, okay. And, uh, now we'll go to the post and try to display the screenshot. So this is the path, and, uh, we would need to have exclamation mark. It's already mag on, syntax, it, whatever, like, uh, screenshot. So it's the title. And, uh, he would have the path. Let's refresh. Okay. It, uh, doesn't work. Maybe we need to have slash Okay. And you see, we render an image. Let's try. Uh, yeah, you see, we still have the Jekyll and Jekyll IB in the titles here, so that's not very nice. Um, um, yeah, we can update this, uh, later, but the, oh, no, I think we don't need to update it later. I think, uh, we just needed to restart the server after making these changes. Let's, uh, try once again. I have little start server. Okay. And, uh, all these have been updated. So we have created our first, uh, blog post of our own, not one that was provided by the example. And we customized our website a tiny bit. Let's push our changes. So, uh, create a post. Okay, let's deploy again. The push it, uh, triggers, um, action to deploy the website. And now when I, uh, refresh the page after the deployment is successful, I expect to see, uh, my new blog post, uh, and, uh, well, and the image inside it. Okay, deployment finished. Let's refresh here. We have a new blog post, and the image has been rendered. Congratulations. So this is the basic of, uh, creating a blog with je. And in the next episode, I plan to go a bit deeper into markdown itself. I think you as a developer should know how to, uh, use markdown, at least for reads, uh, that are readable to your repositories. But, uh, really markdown is going to be big in 2025, believe me.
0