Host a static website on Github Pages on your own domain for free #220

24/12/2024
jekyll
  • about Github Pages
  • create new repo, deploy on Github Pages
  • verify a domain with Github
  • serve website on your own domain
Transcript
Am I even a web developer? If I don't have my own website? Am I even a programmer if I don't use Git and Markdown to write my blog posts? Well, here in front of you is my, uh, blog. I've been dragging my blog for around four years now. And, uh, I usually write in the format today I learned or, uh, knows to self. It is the easiest way to write as a developer. And, uh, it is also a great way of summarizing your recent learnings. I often use my blog to self reference and, uh, to find information that, uh, I learned the hard way sometime ago and, uh, forgot. And, uh, if you are a programmer, I hardly, I strongly recommend you to write your own blog. Now, for this blog I'm using, uh, je uh, before Jekyll, I tried WordPress. I even tried, uh, Google Blogger, and it was, uh, horrendous. As a developer, I really want to use markdown and, uh, git, uh, markdown for format in my blog posts and, uh, GI for saving, uh, all my changes and having all my change history of my blog in the, uh, readable, readable way. And, um, Jack is, uh, a wonderful tool that, uh, uh, lets you write a blog post in, uh, markdown, save the changes in Git and, uh, uh, compile them into a static site. And with the GitHub pages, uh, pages dot GitHub com, you can host your static sites, uh, for free. And, uh, they're very friendly to hosting, uh, sites with Jekyll. So in this episode, I'm going to show you how you can start your blog with, uh, GitHub pages and, uh, je. Now here is my blog. You can, uh, see the source code of my blog. Here it is, uh, open source. And if I go into settings and pages, so here I see the information about, uh, how the blog is deployed. It is deployed at this domain. I can, uh, change the domain here. It is deployed by GitHub actions, and, uh, the name of the repository is Vice GitHub io. So you, uh, also have, uh, like if you have a GitHub account, you have access to your username, do GitHub, do io, and you can, uh, uh, host something on this, um, domain, or you can, uh, host something on your own domain. So let's start by creating and new GitHub repository and, uh, uh, hosting it on a separate domain. I will create a new repository, uh, second, or today I learned blog. Uh, it'll be public create repository. And, uh, now, uh, to have at least something going, I need to have, uh, at least like one page. Uh, let's create a file. I will say index html, um, hello World by Ya, commit Change. Okay. And, uh, I will try to deploy this. So go into settings, pages, um, deploy from branch. Uh, the branch is going to be main save. And, uh, let's see what happens. So I go to actions, and you see there is this page building and the deploying going on. It can, uh, last, uh, from like a few seconds to a few minutes. Okay, so here it says that it has deployed. Let me go back to settings pages, and it says that this is the URL. So, uh, it uses block.com because I already have my, uh, domain block.com set up for my other blog slash today I learned blog, and here it, uh, renders this, uh, page that I have just created. So, uh, I have, uh, another repository that I'm serving to this year, l but, uh, I would like to serve this, uh, URL to its own, uh, website. So I'm going to try to, uh, host, uh, this, uh, repository on, uh, this, uh, certificate al.com domain that I own. Uh, how can I do it? So, uh, first of all, I'm going to, uh, try adding this, uh, domain to my GitHub account. I actually wrote a blog post, uh, where I have a link, uh, to verify an A domain on GitHub. So in your profile, in, uh, you have this add verify domain, I'm going to try to verify the domain certificate al.com. And, uh, I need to add a XT record. So going to the Advanced dns, uh, add new record D XT host, um, value. Okay, Uh, it's saving. Then it can like, take, uh, a few seconds to update or even a few minutes. Uh, let me try clicking on verify. So you say it hasn't verified ownership, but I'm going to try again in, uh, like a minute. So while we are verifying the domain here, we can, uh, uh, try to add this domain to our, uh, repository where we want to use it. So here I have this blog. I will add the custom domain here. I will click, uh, save. And, uh, uh, another thing I need to do is, uh, add a CNAME file. So here, oh yeah, it has actually generated the CNAME file, uh, itself. Then I added the, the domain name here. Uh, I think it's actually better to use www, uh, because if you use www both, uh, www and the, uh, root domain are going to work. If you use, uh, just the root domain, then www will not work. And, uh, some read in the GitHub pages documentation that it is, uh, uh, advised to set the www. Okay, so I updated this and, uh, maybe it updated the comment on the cname. Yes. So you see it, uh, updated the CNAME here. In the meantime, I can check if the verification process has passed. Okay, here you see the domain name is verified. Wonderful. And, uh, it, uh, is trying to deploy. So let's have a look. It is, uh, during the DNS check, this can, uh, last, uh, some time. I think it's also trying to deploy. So let's debate until it deploys. Okay, so it looks like it has deployed. Let's, uh, have a look back at settings and pages. Uh, this is still in progress, so, uh, the domain is still not available because, uh, uh, the verification is still in progress. Let's, uh, wait, uh, ebit, okay, here you see we have this DNS check, uh, unsuccessful. It is because we need to add the, the connection between, uh, our DNS rec, our DS here and the GitHub pages. So, uh, again, something from my blog post. Uh, we need to add the, the, uh, host and value for your username dot GitHub io. So as I'm hosting on the RU domain and on www, I'm going to add a CNAME for www, uh, then my GitHub, uh, username.github.io. And, uh, it looks like there need another.in the end and another CNAME with at and the same value. Okay, so, uh, now we are linking our GitHub, uh, pages, not just the GitHub account where we verified the, uh, the domain, but our exactly linking our GitHub pages with the, um, our domain. So let's try to check again. And this time I suppose it should, uh, work. Now, you are likely to get this kind of error, Dennis check unsuccessful, and the solution to this problem is most likely that you just need to wait. So if you have, uh, it set up at, at uhub username, do GitHub io here, ww uhub username GitHub io here. And you are getting this kind of error. Most likely, you just need to wait. It can last 10 minutes, it can last an hour, it can last, uh, a day. Uh, most likely it'll work a bit later. So, uh, here I set up these CNA for the domain certificate owl, but I previously tried it on another domain, e wl it.com ever.com. So, uh, I kind of set up the same CNAs. And, uh, now in another tab, I just updated the custom domain to work with www ever.com. I have previously also verified this domain name. And, uh, now when, uh, going here, whenever you refresh the page, it kind of checks to, uh, verify the DNS and, uh, this DS check is successful because I, uh, did it a bit, uh, before. So, uh, the DNS had enough time to update. So now I will also say, uh, yeah, I'll just try this in the domain and see if it works. You see the website that we just created, uh, is rendering on, uh, uh, this website, if you try going to the bare domain, you see it's also rendering is like redirecting to the www version. Okay, let's, uh, try also saying we will enforce https and it's another good, uh, thing to do it called otin. And, uh, your website will not be available via HT p, only HT ps. So that is good. And, uh, yes, that's basically how I, uh, uh, just in a few minutes deployed, um, uh, static website for free using GitHub pages. It is just an H TM L page at the moment. If you go and look at the source code, all I need is as the minimum is an index, uh, uh, H TM L file. Actually, you can name it like whatever you want. Uh, you can add js, CS, s, whatever. Uh, now it's a one page aesthetic site, and we've got this CNAME that was, that you can, like, add on your own or that can be generated in settings when you go to pages and whenever you update your custom domain. So yes, this is, uh, basically it. See in the next episode where we are going to actually install gel on top of, uh, this, uh, static side. So we're not going to just have a index, h TM l we're going to have a whole CMS see in the next one.
1
Join the conversation
Sign in to access PRO lessons, access private repos, leave comments, create watch lists.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.