FREELessons: 10Length: 50 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 Using Pre-Built Themes

Sometimes it’s better to stand on the shoulders of giants and not manually write all of your own styling and UI code. With GitHub Pages, it’s possible to just focus on creating content and create a site without coding, using a pre-built theme based on Jekyll.

Related Links

2.7 Using Pre-Built Themes

So far I've shown you that you can use Markdown to create some very simple GitHub Pages websites. You can use HTML, JavaScript, and CSS. And you can really start to build out some pretty cool websites with just those technologies. But let's say, for instance, that you wanna take advantage of GitHub Pages, but you really don't wanna be bothered with creating the HTML and manually doing all of those things. You just wanna be able to get something up and running really quickly, so you can display some information. And you really don't wanna have to do any manual coding. Well, there's a solution for that, too. So as you can see here I've created another very simple repo, it's empty. It's called pages-theme, and there's nothing in there right now, and that's fine. So what I wanna do now is I want to be able to create some site with some style that is going to allow me to just take advantage of some pre-built themes maybe and then just apply my content to it. How can I do that? Well, what I'm gonna do is I'm gonna go over to the Settings tab and I'm gonna come back down to GiHub Pages. And this time I'm not so much worried about the source right here and selecting one of my branches. I'm actually gonna come down here to the theme chooser. I'm gonna click Choose a theme. So what this is gonna do is it's gonna show me a bunch of sample pre-built themes that I can apply to my site. And I can click on all of them, and I can see samples down here below. So maybe I like one of these, and I think the Cayman theme looks pretty cool. And then I can simply choose select the theme. So now what's gonna happen is it's gonna take me to another edit page, and it's going to create an page. Once again, very special naming here, And so I can go through and I can take a look at my content here. Now this is all pre-built content, sample Markdown, really not a whole lot specific to your particular page or to your particular repo. But you can get in here and you can start to edit this. If you're familiar with Markdown, you can get in here and edit it manually. Or you could do a little bit more research and figure out more about Markdown, and come back and apply the appropriate content for your particular page. So once you've done all of that you can come down and select Commit changes. So now that I've done this, you can see I have nothing more in my repo than two files. I have my file, which is what's gonna contain all of that content that we just saw. And I'm also going to have an _config.yml, and this is a special config file that is gonna be used by Jekyll, so that I can create a Jekyll-based website. And as you can see, the only thing that's in here right now is it's specifying the theme. Now what exactly is Jekyll? Well, Jekyll is a tool that allows you to transform plain text, in our case some Markdown, into static websites and blogs. So I could create blogs or simple websites like that. But what is really powerful about when it comes to your GitHub Pages is you can take advantage of those themes, apply them to your site, and then you can update the content. So what I can do is I can go into my settings, and I can come back down and take look at my GitHub Pages here. And this is the URL for my page, my page's theme page. And I can come over here and as you can see, I see my site. I didn't have to write a single line of code. The only thing that was put in there was some simple Markdown content that is all being shown right here, that's being modified and applied to a theme using Jekyll. Now how cool is that? So of course, I could go into my code. I could go into that Markdown file, and I can start to edit things. So if I come into this file and say maybe I want to edit this, and I want to add another section here. Let's just copy this, and we'll add another section above this, and say this is my cool repo. And let's just go ahead and save that. Will commit that change, so now I can see my changes in here. And I spelled my wrong, but that's okay. And it's just duplicated content, doesn't really make much of a difference. But if I were to come back over here to my page, I can hit refresh and if everything refreshes correctly, now we have added content to this. And you can add links, and URLs, and all sorts of cool things. Codes, stylings and all sorts of cool stuff. And I once again did not have to write a single line of code. Now obviously, if you want to really get into the ins and outs of all of this stuff using these themes for your GitHub Pages, it would probably be good to do a little bit more research about Jekyll, what it is, understand what it's for. And then you could come back over to GitHub and you could do a little bit of searching in their help pages under Customizing GitHub Pages and Using Jekyll as a static site generator with GitHub Pages. So I can learn more about GitHub Pages and Jekyll, about the themes that are provided. I could figure out how I can customize CSS and HTML within my Jekyll theme, and a lot of other cool customizations that you can do with that theme. So yes, I can apply this theme and just throw my content on there. But of course, if you wanna tweak things, you wanna change some of the colors, some of the backgrounds, how some of the things work, you can absolutely do that. Even though you're using a pre-built theme, you still have that customization ability, which is very cool. So now you have the ability to create these manually. You can write your own code for it. You can create simple Markdown files and README files. And you can also take advantage of Jekyll to transform your static content into these beautiful themed websites. And that is very cool all within the world of GitHub Pages.

Back to the top