Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:14Length:1.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Setting Site-Wide Configurations

One of the most important files you will ever use when customizing your site in Jekyll is the _config.yml file. Config files like this can seem overwhelming, but we are going to start from the very basics and gradually add things over time.

2.4 Setting Site-Wide Configurations

The first thing that I wanna do when modifying the content on my site is, I wanna clean up this home page a little bit. So we've got some duplication of content here. This is a link, but I would really prefer this to say something else. And I don't really like this being here, and the title of the page is kinda off. And there's definitely some clean up stuff that I can do right off the get go. And it's actually fairly simple to do, and it's fairly well laid out for you in the configuration section of the minimum mistakes theme. So the first thing that I'm gonna do is, I'm gonna take a look at some of these site settings like the theme. So as I mentioned before, I do wanna use this skin, I wanna mix it up a little bit. And as you can see here, all I have to do in order to change that skin is use this configuration setting, so let's go ahead and copy that. And then we need to specify what type of skin we wanna use. We can use any of these, aqua, contrast, dark, dirt, mint, neon. I think I'm gonna go with dirt, dirt looks fairly, fairly decent. Gives you a little bit of color but not too much, it's not too overwhelming, so let's go ahead and do that. So I'm gonna come back into my source code and I'm simply gonna add this configuration setting. And I'm gonna specify that I want to use the dirt skin, so we'll go ahead and save that. We're not gonna push it yet cuz there's a couple other things that I wanna change right now too. So if we continue to scroll down past some of this stuff, you're gonna see some other options. Your site locale, you can specify where this particular site is gonna be, and then the site title. So this is gonna be very important, because by using the title configuration setting, you can change what the site looks like in the site masthead, which is important. As well as within the title tags of the underlying HTML, which is where you're gonna be able to customize what you see on the tab up here. So I'm gonna wanna take advantage of that, so I wanna be able to set this title property. So let's go ahead and do that, so I'm going to say that title is going to be My Jekyll Site. So that should maybe clean that up a little bit so it's not quite so obnoxious, and it's also gonna clean up my tab up here. And then you're gonna see a lot of information in this documentation when it comes to search engine optimization, or SEO. Which is always an important thing that you wanna be paying close attention to when you're building any sort of website. So one of the other things that you can specify in here is a title separator, so what's that for? Well, title separators are actually used on the tabs or on the window headings for your title when you're looking at subpages on your site. So let's say I'm looking at the about page, you would see something like about. And then you would see the title separator and then the name of your site, so in my case, it would be my Jekyll site. So if I had the about page, it would say about, whatever the separator was, my Jekyll site. And so I'm gonna set the title separator here as well. I'm going to copy that, we'll come back over here, we'll paste that in. And I actually tend to like to use the hyphen, so I'm gonna use that, the little dash there, so I think that looks pretty good. And then you can set some other things in here. You can set the site name, use to set the site author. I'm gonna show you a different trick that you can use to set that for all the blog posts that you're gonna show within your site. But I'm gonna show you that a little bit later. But the other thing that I wanna do here is, I wanna set the site description. Once again, this is a very important thing if you're interested in SEO, and you obviously should be if you're creating these websites. And this is what's gonna show up in that meta description tag in the HTML. So I'm just going to copy this, because I'm not really too concerned about what it says specific to my site. But you can obviously tinker with this and make it anything that you want. And just so that it looks a little bit more customized, I'm gonna change it. I guess I'll say, this is my great Jekyll site, come and find out more, something like that. That seems pretty good, all right, so let's go ahead and save these changes. So we made a couple of changes, we're gonna use a skin, we've changed the title. We've set a title separator, and now we also have a description. So I've made some changes, what I wanna do is, I wanna make sure that I save those changes. So I want to commit those changes, I'm gonna give it a commit message, and I'm gonna say, update site-wide settings, something like that, that should be fine. And then I'm gonna go ahead and do a git push origin master and go ahead and push it up to GitHub now. Since I've already specified my username and password, all of these should just be remembered and go ahead and pushed out there. Once again, if yours shows you the username and password dialog, just go ahead and type those things in. Everything should get pushed up, so now we can go back over to our changes in our code. Let's refresh, and now we're seeing that we have updated our site-wide settings. And we'll come back over here and try and refresh our page. And as you can see now, it's starting to take shape a little bit more. Now I see My Jekyll Site, and I'm starting to see things change a little bit. The skin of my site has changed a little bit. And if we were to right click on our page and go ahead and select View Page Source, you're gonna see that we have a lot of the behind-the-scenes SEO things configured based on what we typed in. So now I see my title here, I see jekyll-site, and I'll show you where that's coming from, My Jekyll Site here. So that's that title, and then you can see, I have my title separator. Then I have description here, so I have the description that I typed in. As well as some other things that we get for free. So site name gets set to My Jekyll Site, and all of these object graph type things that are all just built for me automatically that I don't have to worry about. All I'm doing is changing a couple of configuration settings. I don't even have to care what's going on back here, and it just works, which is pretty nice. Okay, so things are coming along pretty well. There's one other change that I want to make before we go too much further. So I'm gonna go back over to the website, let's take a look at the files. And what I wanna do is, I wanna dump this README. So one of the reasons that we're getting some strange things on that home page is because it's actually pulling the content out of the README file and it's using that as the home page. So that's one thing that you need to remember when you're getting started with these Jekyll sites on GitHub Pages. Is that typically, you have a home page or a landing page, and that landing page is gonna have some sort of content in it. Now typically, when you are creating websites, you're going to start with something like an index page, that's just kind of like a traditional starting place. So GitHub Pages is no different, you can start with an index.md file, a markdown file that's specified as index, that's usually best practice to use that. If you don't have an index.md or an index.html, because you can use straight HTML in GitHub pages. If you don't have one of those files, it's actually going to default to the readme file in your site, if you have one, so that's just something to kind of keep in mind. So generally speaking, you can leave a readme file in here, but because I'm only using this site to build an actual site, I probably don't really want that anymore. So I'm gonna do two things here, the first thing that I'm gonna do is, I'm actually going to delete the README file, I don't want it anymore, I'm gonna move that to Trash. Then I'm gonna create a new file, and this new file is gonna be index.md. So that's gonna be the new root of my website. Now you're gonna see that I'm not changing any configuration settings, I'm just changing the root file. I got rid of README, I'm adding in index, and I'm gonna put a title in here. And the single hashtag like that specifies an h1, and so I'm gonna put in here, welcome to my Jekyll site. Just like that, okay, so nothing too crazy. We'll get into some other configurations and front matter and all that other kinds of stuff in a little bit. But for right now, I think this will do just fine. So let's come in here and we're gonna make one more change, we'll say replace readme with index, I think that should be good. All right, and once again, let's go ahead and push origin up to master; everything should get up there successfully. And once it does, I should be able to go back to my site. Once again, I can refresh this, and now you should see that I no longer have that README file, and it's noticing here. So it's saying, you can go ahead and add one, but I honestly don't really want one. And I have my index file here, which just has that one line. And you can see that it understands markdown within GitHub. Okay, so now that that's in there, I'm gonna come in here and refresh my page. And now you can see, Welcome to My Jekyll Site, and by default, it's showing that as the page title. Right before the title separator and then my title of my page. So all right, now we've come quite far in just a little bit of time, doing just some very minimal configuration things at the site level, kind of globally, to our site. So now once we've gotten this far, we wanna learn how to be able to customize some of the pages in our site. And start to see how we're gonna use front matter to customize some of these things on specific pages.

Back to the top