9.2 Jekyll - Video Tutorials & Practice Problems

<v Michael Hartl>In order to make a real website,</v> it's essential to use some sort of system that supports site templates, so that you avoid duplication, you avoid this copy and paste issue that we ran into in learning HTML to be dangerous. One way of solving this problem is to use what's called a static site builder, and we're gonna be focusing on one called Jekyll spelled the same way as Dr. Jekyll and Mr. Hyde. It's important to note though that we're going to be focusing on very general skills here. There are quite a variety of different static site builders and they all work basically the same way, so the skills you learn in using Jekyll are transferable. If you decide to use something else, you'll also be using the liquid template language, which is useful in other context, including the Shopify e-commerce platform. There are a bunch of features that Jekyll has for making content focused websites. So one of them is being able to write your content and mark down. So this is pretty convenient, isn't it Lee? When you're writing a lot of content. <v Lee Donahoe>Yeah, it is.</v> It relieves you from having to type in full HTML tags. So if you want something to be a new paragraph, instead of having to wrap it with, you know, a P in angled brackets, you just make it a new line. The syntax for links is a lot easier if you want something to be a header instead of having to wrap it in H1 with, you know, opening and closing tags you just add a pound sign or hash in the front. <v ->Right.</v> <v ->If you want it to be an H2</v> you just add two pound signs or two hashes in the front. <v ->Right.</v> <v ->Very easy.</v> <v Michael Hartl>So we've talked about markdown before</v> in learn enough text editor to be dangerous and also in learn HTML to be dangerous. And it also came up in, learn enough Git to be dangerous. So markdown is really everywhere these days and it's supported natively by Jekyll. One of the other things you can do with Jekyll is view your site locally as a preview not just as a static page, but as like the full final version before you deploy it. One of the other cool things about Jekyll is that it integrates really nicely with GitHub pages. So you can publish your changes via Git. You can basically make a commit, will show push the site up to GitHub pages and then it will build the full site using Jekyll. you can also host it in other places too, like Amazon S3, there are a whole bunch of different possibilities and you also don't have to worry about databases in the background. So it's not a full strength web development framework. So you can't have people like logging in and having profiles that are, are based on dynamic data. That's pulled from the database but it's great for static sites. So for example, my personal website michaelhartl.com is Jekyll site. So this is not a toy by any means. And looking around for examples of people using Jekyll like there are thousands of sites but one came up particularly that I was impressed by which is that the website used by the 2012 re-election campaign for U.S. president Barack Obama used Jekyll. And this thing handled over 81 million page views, raised over 250 million dollars. We can see based on that example that this is an industrial grade tool. This is not a toy by any means. So even if you already know a web development system like Ruby on Rails, Jekyll is still a really valuable tool to have in your toolkit <v Lee Donahoe>Especially since it's very easy</v> to get something up and running using Jekyll that's a huge advantage for it. So if you want to just quickly put a site up to be an informational site about, a business or an idea that you have or anything like that and just get validation from the marketplace and collect emails or something like that. You can have a Jekyll site ready in no time flat. Like it is incredibly fast to have something deployed and on the internet. <v Michael Hartl>Right.</v> So let's take a look at getting started with Jekyll in order to install Jekyll you need to have Ruby installed on your development environment. And this is the kind of thing that's really good to do natively if you can, you can use the cloud IDE and we'll show you how to do that. But at this point it's probably a good idea to take a look at learn enough dev environment to be dangerous. If you haven't already set up your local system as a development environment. And so what I mean by that is having things like a command line, programming languages like Ruby and so on. So let's take a look at our terminal. Take a look at Ruby, to start off with, there's a Ruby version, the precise version number doesn't matter too much here, and once you've got Ruby installed you can install Jekyll using the RubyGems package manager. So that's gem install jekyll, this will install the latest version of Jekyll by default but we recommend using the specific version in the book just to make sure it's compatible with this tutorial. So that installs Jekyll in any of its dependencies. Now, there are a lot of different ways to use Jekyll and we mention this later on in the tutorial that you can use jekyll new to command like this, to create a new site skeleton but we're not gonna use that in this context because we already have a site. We already have this index.html, but it turns out that Jekyll can serve even just a single static page. So instead of opening the file locally we're going to serve the site, using the Jekyll server. And I like to do this in a different tab. I'm not gonna worry about the font size here cuz I'm just gonna type it this in just once in this tab. So I'm gonna type jekyll serve. And this is going to serve up this here, this index.html but rather than being at file:/// stuff, rather than being here with this local file it's going to be at this place here. So I'll give you an example. Actually, I can, there's a way to do this, right? Do you know about this, Lee? New command <v ->No</v> <v Michael Hartl>This is an iTerm.</v> So this, this opened the file in the, this is like the the home address 127.0.0.1, but this isn't what people use in real life, is it Lee? <v Lee Donahoe>Nope.</v> You don't wanna do they type all that. <v Michael Hartl>So it's a, it's always typed local host.</v> So this is, these are the pretty much synonymous. I'm actually not sure if they're technically exact synonyms in this context. I think they are, but I'm not a hundred percent sure of that. So now we're going to localhost:4000 and so this colon is what's called a port number and this is essentially an addressing system for the web or for the internet generally. So for example, for a regular website the port number is 80. So if you go to example.com that's the same as going to example.com:80. And there are a bunch of other ports as well that we're not gonna get into here but the point is that it's useful to be able to do this. So what are some of the reasons why this might happen, Lee? Why might you wanna put in a local is 4000 like that? <v Lee Donahoe>If you're running another server.</v> <v Michael Hartl>Right?</v> There are lots of cases where you might be developing say another website on another server. The system that we use to build our books like learn enough CSS and layout to be dangerous runs on port 4000 by default. So actually we can just do that. Don't worry about these commands. I'm just gonna fire up the book. Actually, let's see if I can cancel this here. Right. All right. Yeah. So that didn't work cuz there was a port conflict. So I'm running the soft cover server. Oh what is, why isn't that working? It's like not working for two reasons. Oh the, so this is the port in use. It's really strange. It's no longer in use though. I don't think. All right now I'm confused cuz we're we're not running anything on port 4000 anymore. Right? Oh, that's weird. Oh, that's really strange. I'm running it somewhere else. <v Lee Donahoe>You must have the server running</v> in the background somewhere and--- <v Michael Hartl>Yeah, there's a process running somewhere.</v> That's why I found it. I used ekill which we develop in learn enough text editor to be dangerous as an escalating kill script. And so let's run the server again. See if it works. All right. So this is the kind of thing. So here I'm running learn enough CSS and layout to be dangerous. This is on a just a localhost 4000, right here. But suppose we wanted to run our Jekyll server here too. Right? So now I can do Jekyll serve and then give it a port number. So 4001, for example. Now, if I go to localhost:4001. Now it's working. There's one other case I wanna cover here because some people might be using the cloud IDE and there's something a little tricky. So let me just go over that briefly. So here's the cloud IDE. I can install Jekyll. Here the dependencies were already installed and I can serve but in order to get it to work with Cloud9 we need to give it a dynamic port number and a dynamic host IP using these two flags. Don't worry about the details. If you don't understand what I just said just if you type this, it should work. So --port $port, so this is an environment variable that has the port number and then host $IP, like that can see this on one line. So if you run this command it runs a server and there are several ways to access it. You can use this here, just command click. And there it is. And this is an older version of the site or you can click on share and then go to here, like that. So let's take a look at the effect of this. If we look in our directory and type ls notice that there's a new sub directory it's called _site, if we ls it, we can see that inside of this, there's a copy of index.html. So basically what Jekyll has done is, it's built an identical copy. So this doesn't do anything right now, right? We've got an index.html and this is just a copy of it. But what we're going to do is make the main part of the site modular. We're gonna break it up into little pieces. And then what Jekyll will do is build the site and combine everything together and put the result in _site. So this is what's being served out of here. Right, when I do Jekyll serve let me just get rid of the other example here, when we just type Jekyll serve, what's happening is it's automatically serving at localhost:4000, this built file, but it's important not to edit this file and it can get a little tricky because if you have your text editor fired up and you're looking at index.html, you can see I'm selecting the files in the project, but it's important not ever to edit this one because this is generated by Jekyll and it'll be overwritten. <v Lee Donahoe>And it will disappear.</v> <v Michael Hartl>Yeah.</v> So it's really unpleasant to have that happen in the, it will happen to you at some point in all likelihood but so try not to make too many changes all at once but so this is a great start because we have a proof of concept. It may seem like we've hardly done anything here, but by serving it out of a dynamic place like localhost:4000, like a real web address, we've laid the essential foundation for turning this into a site, built up from components that we'll be talking about later in this chapter and the next and that will give us the kind of flexibility that we need in order to avoid repeating ourselves. And we will be able to apply the full power of the Jekyll static side builder. <v Lee Donahoe>And just be more comfortable</v> building more complicated things knowing that it'll be easier to maintain in the future. <v Michael Hartl>Right?</v> So this is kind of like a hello world. Like we've hardly done anything but even being able to print out hello world means that lots of things are already going right. So being able to serve this from localhost:4000 rather than opening just the static file is a huge step.