Creating Static Sites with 11ty & Netlify

okay so this will be an overview of how to get started building a site using 11d and publishing it to netwo phi we are gonna start a small project should start with creating a repository we'll call that Emma blog and say they've built 11b uses node during the build process so we will add in a no to get ignore and any license is fine what that should give us in a second is a URL we can go grab and clone this project locally here I have their studio code and we have the terminal open on this get clone and paste in that URL and bring that all down so let's CD into that folder title we have one open but we need to open that folder so let's open the current folder and we use the parent window and it will just flash and we'll get demo blog is what's currently open we can close this and open the terminal again this is going to be installed using NPM so we'll start this is a brand new repo saloon and paint it and they'll pass and why to just pass yes to all of the flags and we get a package.json file and we also want to install here we want to install 11e we need to include organization name and then the repository name and that'll give us 11 D and will take a minute so wow that's going on let's add a little bit of content because what 11 D will do is take that content and build it into h2 no we can write content everyone using a lot of different templating languages like markdown or nunchucks and so let's break an index market on file and if you're not familiar with markdown right we can do titles so this is homepage we computer is thinking well this happened so we might be limiting types beginning with you all that's getting up and running and we will allow access sure okay we can kind of keep typing okay at least and so markdown allows us to use old text or italics if we wanted to there's a whole host of other markdown commands we have and just to get a second file on here to kind of look at during the demo another focus so with a lemony installed now and we actually have a little bit of content in here as well let's go and actually run 11d and the command for that is MPX will perform a build and that build will take anything that's content and output it into a directory that by default is called the underscore site and we can see that index dot HTML should just be that regular homepage with bold and italic some code the way that a lot of static site generators work is in the address for something you don't need to include indexed I teach you know a lot of hosting providers by default will serve up if it's a actual explicit filepath isn't specified and so the way that we get nice clean pretty URLs is the about markdown file that we created earlier goes inside of an about folder and then is actually just served in an index dot HTML everything's an into extension l and then the folder path helps determine what the navigational paths in the browser looks like so this will get served up when we go to about so we've written those two files let's go serve them up as well now anything that's inside of the state is site folder is now static content anybody who can host HTML can surf that up on the local dev environment we want might want a list for changes republish every time rebuild and so for this as well which is just passing in the surf flag and it will spin up a local site and listen for changes to anything in this root directory and publish those so we have localhost 8080 let's click and open that and this is our local site we have my home page and we can also go to about and we can get in about you know how many styles or more metal and stuff but that's a good enough place to get started we're almost ready to commit this the last thing that we need to do is we don't yet know that site if we go look at what is committable it will say we want to commit all of these things we don't want to include the generated content as part of what we're committing and so if we go back to the kid ignore we can add a section for 11d and they're just gonna exclude anything that has a underscore site as part of it so let's go back to here we shouldn't see those site things anymore both will commit that change and for all these will and push all of those changes up this is basically our Minimum Viable site and gives us what we need to go check if we can interpret it with necklace.i at this point so if we hop into github we should see that push here that's a good check that everything is set that we need to and now let's explore neckla file we can log in here if you've logged in before it will remember some of your credentials and what we'll do is set a new site from get our providers github it can go to any git repository the first time you click on this you'll have to do some integration and authorization of github but after that Penant knows all the repos you have and stuff like that so let's find this demo in here and we have done a blog so like that by default if it detects that you're using a static site generator if necklace.i detects that then it knows something about what commands 11d prefers to run when it does build and it knows something about the default published directory of a build so we'll take those defaults those are configurable later if we don't want them and deploy sites should get this live we see some sort of it's deploying our site you can see what the build steps are to deploying and it has to install node has to install our dependencies and go through that that should only take another 30 seconds but well that's running let's look at our site and one thing gives you this this random URL that is guaranteed to be unique for their generation settings but they also let you just change the site name if you want and so we'll just call this demo blog this is across all net with I as long as you find something unique you can have it sweet so that is available and if we click on that link we have our demo blog live served over HTTP through network I and if you about we could go there just to get a feel for the the beauty of this site generation is let's go make one change so on here this is changes over time we're making changes to our local git repo where I come into here and say hi changes check man and push them as soon as that's done so to push and if we go to necklace.i and go to deploys it should say site deploy in progress that we already know that it's working on something else and if we come here and just hit the home page couple different times pretty soon we'll get the resolution of that builder go check how that deploys on this okay so that's published and we should see here changes for neckla file that was a pretty easy way to incorporate those changes into a pipeline and get them pushed live and notified gives you feature branches and can push changes for pull requests it doesn't have to go immediately to production but any change is committed to master will then get pushed into this site okay let's do some more stuff locally and make this little more robust so if we have two pages the first thing that we're gonna want to do after that is get some layout page to merge both of these two pages in and so what we need to do is create a folder not under site under the root directory and that has been named in cruise but that's the default folder name all the defaults are configurable but convention over configuration doesn't seem to hurt either and under includes we can take anything that we want eleventy to have access to during the build process and be able to pull in dynamically and so inside of this file we'll just say that there's a default layout and the layout the templating engine will use to lay that out is nunchuks you can use a lot of different things with eleven benign jokes this kind of a nice simple version of HTML plus some templating constructs and it's kind of simple and powerful enough to do a lot of things and works pretty well with 11d and is core templating language in their documentation this name isn't sacred but we do have to go take that and tell these content files these markdown files to go use that layout when they're rendering stuff so what we'll say here is people introduce a yam upfront matter which is pretty common for blogs and stuff like that it's just three hyphens and that key value pay so for that key value pair will say layout and default layout mjk view need that full filename but we do not need the path as the path is eleventy presumes that the only thing is it's looking for is inside of includes and we'll add that to both pages here default layout is then a take in the content that was produced inside of here is all bundled up and made available inside of a data value called content so in nunchuks the way that we can display data values on the screen is just by putting them inside of double curly braces and because that mark time is generating HTML we also want to say safe in this case and that which will mean that we can we don't need to sanitize the brackets coming from markdown let's make this into a real kind of HTML page so HTML we have a head on here and we have a body and this is going to go inside that body and that's the big h1 tag and say is the name of our blog okay so we should have what we need to inject that content in the page these should have been reloading as we go so let's your local site development and see if you get the g-code can't blog my home page and same thing for about as they should both be using the same template about sweet it uses VG code camp blog one thing we'll do we can add some anything that we want to make a veiled balloon inside of each template we can put as a key value pair here so maybe we want to take the title and this was formally stored upon this page but maybe we want to find some way to take that content and make it uniform across posts and so we can take the same thing with ear Taito about the site and put it here and just get rid of that as the top heading file will have to consume that here and so let's make h2 and we can same thing with content except we don't have to escape it was safe is we can put the title in here and that head wants probably a title too so we can put it the same value layer and if we bought back to here and refresh we now should get the same information here in h2 but we also get the title piece so that tells us that it's coming in correctly inside of this body at this point in time why don't we add some links to go get to each one of these pages and so let's add navbar here had a list of links that we're gonna put inside here and the first one and put an anchor element and if we just want to go home the path for that is just a slash say that's getting us home and the second one is gonna say about about if we save this and Bob back now we should see links to ohm and about and we can go back and forth between these pages let's do commit and we're gonna say that in and push it and if anyone's looking at the production site that should be available on the production site in a couple of seconds you know 30 seconds and our next step let's take you put a little bit of styling on here and this will help us introduce a concept of how to pass through some assets and stuff like that so what styles do we want on here let's take and come up with some so I'd like to at least style these so they don't look like nav items so let's add some styles here to nav let's make this a little bit bigger so folks can see along and this style let's say none okay we got rid of those and let's put display flex so that everything's in line and we'll as well we'll say on each one of these list items let's that's a little bit better maybe put a background color on this that looks fine and the body let's put max with 4d and more all right our next challenge is this looks fine in terms of styles we want to go apply those styles to our page and we could just in mind those Styles here but let's say we want to author those externally and then pull them into here we're gonna need a CSS file but that site only produces generated content and so we need to tell 11d to go poop pull that content the CSS file put it into here and usually way to do that is just create a whole separate folder at the root level look we can call it assets the name isn't sacred and inside here we'll put any assets we want 11 DITA pork over to the site and inside that we'll put a style a CSS and now we'll paste in all those changes and save that we need to tell of indeed that all the content from this assets folder can get moved into site once that site is built and in order to do that we will create a new file and that file name is safer to 11 days 11 DJ asks is we can do any configuration we want into that process and it will load that config the syntax for this module the export function and it takes in at 11 B config and then we can modify that configuration when that gets called and to this 11 D will add a client code and pass copy and give it the folder name assets all that's documented there's no reason why you need to know that off the top of your head but that's the command to take that and pass through once we save this we won't see it show up right away inside of this sites folder and the reason that is is because this 11 D config is only loaded once down startup of this command so we have to stop the commands and running and rerun that site at that point in time we should parse through this config and see if everything wired up correctly yes so we got assets and we got that styling there which means on our default site now we can include a link rel stylesheet and we can say hey load up assets and load up Styles dot CSS and what that should do is now serve up those Styles as part of our page save this do we get that let's go take a look at network and see what it's missing assets style.css it cannot find that did we call something oh yeah we call it style let's go see if it looks great so that's kind of our Minimum Viable site there's some Styles you can include as much content as you want you can link to that content if you're doing a blog post when you're templating through stuff there's a way to see all the collections that you have and take just the top five or something if you want the most recent ones or do a search through those you can template all of those different views out and make them available in different places the last thing we'll check is hey let's push all these changes live so push that I think an amazing offering and a really interesting is inside of this site folder is dangerous good way maybe for developers like side projects is on this overview of site settings there's a lot of stuff we can configure it we'll do some asset optimization there's a lot of things to poke around with that are awesome on thatif I one thing we can do on domain management is it's currently available on HTTP demo blogged unamplified we want to add our own custom domain that says Dan'l blog.com we can verify if that exists maybe doesn't let's say VT demo blog verify and if we wanted to we can register that domain and it will point all the correct stuff to get to the net worth I load balancers and that neckla fie host that content they don't catch our Jan arm a leg over any other registration costs and you don't have any hosting costs provided with that and the single point of reference makes it so easy to get up and started anything for our live demo we'll just prove out that concept that you can register domains that easily so that's basically our demo of how to get all of this information from into a repository in a committal state that you can push an update on to production and there's a lot more about eleven D and that will fly to kind of explore as you find use cases form

Channel: Kyle Mitofsky

Views: 5,944

Rating: 4.9384613 out of 5

Keywords: SSG, Netlify, 11ty

Id: ozTesGh0l74

Length: 22min 16sec (1336 seconds)

Published: Fri Aug 16 2019