Building A Blog With Eleventy And Netlify CMS - Part 1: Creating The Eleventy Project

hi guys this is sebastian again from codingthesmartway.com welcome this is the start of a new tutorial series here encoding the smart way today and this series is about building a block with 11t and netlify cms so if you are new to either 11t or netlifer cms or both of them let's start with 11t11t is a static site generator which is great because it comes with a serial based configuration approach so you do not need to put any configuration to set up a first 11t project you can use it from scratch it's very easy and it can deal with different template languages so you can use any of those template languages you might already know so just choose this language you like most and you are already familiar with and you can start without putting too much effort into configuration you can start very simple and very easy with 11t and build your aesthetic sides and if we would now use 11t for building up a blog of course a blog is consisting of some content most probably of blog posts and we need to have something um in in the back and running to manage our blog content our posts and uh this is where network cms comes in because network cms is an open source um content management system we can fully integrate into our application and used to me to manage all sorts of content uh and in this particular case of course we will set up network cms in our project to manage blog posts so you can uh so that you can access netlify a cms admin interface to to manage the content to uh to write new blog posts for example and then 11t will pick up that content and generate static sites from that content and the great thing about all of that is that natalify cms is not the only service we can use from netlify we can also use netlify as a hosting platform and we will do so and netlify makes hosting static sites very easy because we can directly connect to a git repository and that is what we will do in this tutorial for our project i will create a github repository and then connect it to netlify and then every time you push new content to that git repository netify runs the build process which is then of course based on 11 t because 11 t is our build process for generating our static sites and then updating everything uh from scratch and updating uh the hosted content automatically so that hosting is actually very easy and a very good option for this combination of a static site generator and the netlife cms system for managing our dynamic content okay that is what we are going to do in this series um i hope you do like this and today we are going to start with the very first part and that part is the beginning of the series and in that first part we will deal with setting up and creating the 11t project because that is the basis for everything else and that's what we are need to do first and that's what we need to do as a starting point in this tutorial so stay tuned and let's get into the practical work before actually getting started with creating our first 11t project let's first take a quick look at the project's website so for bose for 11t and for network cms so that you know where you can find additional information if you need some and the 11th project's website can be found at 11t dot dev like you can see here and that's the website you can find some quick start information here and of course you can find a link to the documentation section where you can find uh additional information of how to to set up an 11t project how to configure it if you like for example um what are the options for our template languages which are supported out of the box by 11t and a lot of additional information um here on the website the netlify cms project can be found at networkcms.org that's a website again a get started link here and a link to the documentation section uh where you can find how to install it how to configure it as uh as your content management system how to set up content types and so on but don't mind we will go through all those steps in our tutorial so that you learn everything from scratch and you will be able to follow this step-by-step approach when i start to explain everything in the upcoming tutorials but if you need some some more information or a reference where you can look up things you can always take a look at the project's website okay so the first task to cover is to create um an initial 11t project from scratch so that we have a project where we can start adding things adding our implementation the configuration we need and of course adding later on the netlife cms as our content management system and to do so i'm starting here on the command line and the very first thing to do is to create new empty project folder actually and that is what i'm going to do and i'm naming that folder 11t hyphen natalify cms um so that's the name of the project and then of course i can change into that newly created folder and it's empty of course because i've just created it and now inside this folder we need to create a new initial package.json file the package.json file is used by the node package manager npm and the node package manager will be used here to manage our dependencies um and uh that's the reason why we need to start with creating a new package.json file because when when adding new dependencies here to the project those dependencies are added into the package.json file and that's the configuration file which is used by the node package manager to make sure that all the dependencies are being installed and um and managed okay so to do so we can use the npm command actually npn with option init and with mono y to answer all the default question address was yes and that is creating this this default package.json file so there are no surprises that's just the minimal configuration at the moment containing no dependencies as we have just started we have added no dependencies yet that will be done in the next step and that's the first file we do need here and if i now take a look inside this folder you can see there is that single file the package.json file okay great so now we need to bring in our first dependency and that will be no surprise our first dependency is the 11th package itself because i would like to make use of 11t and so i need to bring it in because at the moment we have only created a package.json file with which is independent from uh 11t okay now i'm using the node package manager again by using the npm command with option install which is the option to use when bringing in new dependencies and the package i would like to add here is called at 11t 11t and i would like to add it as a development dependency so this dependency is only needed at development time and to do so i'm using the command line option dash dash safe death like so hitting return and now you can see what's happening it's downloading this package um inserting it as a development dependency entry into the package.json file and it's downloading it and therefore creating a new folder within our project folder here and you can see it that's the node underscore modules folder that's the default folder which is used by the node package manager where all the dependencies are being downloaded into okay so great that's our first dependency and now we need to create um a project structure for our eleventy project uh which is uh which will be used in the upcoming steps and to do so i'm just starting creating a few folders here so let's start with adding a underscore includes folder then i would like to have an image folder as well and inside the images folder i would like to have an uploads subfolder that will be the place later on where images will be uploaded to which are used for our blog posts and of course we will use network cms to input data for our blog posts and if an image is belonging to such a blog post and as part of the data set this image needs to be uploaded to a location of course and that's the folder where we will upload those images into okay so then i do need another folder which should be named admin and a folder where our poster files are being stored into and that is named posts okay great that's that's it that are the first directories i do need and then i can directly move on and what i need next is an 11t configuration file which should be stored in the root project folder and as mentioned in the beginning 11t can be run without any additional configuration that's possible however for our project we need some minor configuration settings for 11t and therefore i'm i'm creating that configuration file and then i'm using that file to put some configuration code into so to create it uh the name of that file needs to be dot 11t dot js and needs to be created in the root full project folder here and that is what i'm doing with by using that command here so let's take a look at the project structure at the content which is now available here in the projects folder again and that's it and now i'm able to start here in that folder to start my code editor and i'm using visual studio code you can use any code editor you do like however when dealing with 11t uh visual studio code is is a great option because 11t is supporting so many uh templates template languages and visual studio code is offering a lot of extensions you can find extensions for every syntax for every template language you would like to use and so this editor is a great choice when working with 11t so let's start it up i can do that by just saying code and dot for opening up the current file here here we are you can see the project structure here let's increase the font size a little bit that's project structure we have just created here is our package.json file let's quickly take a look inside you can see here another section has been added that's the development dependency section which is called dev dependencies and the dependency we have just installed by using the npm install command has been added here as well okay so let's switch over to uh eleventies configuration file uh which we have just created and started writing the lines of code for uh configuration we do need for our uh project and it always starts with module dot x parts is equal to function we are defining here and this function uh is uh taking a one parameter and that is the event 11t config parameter which gives us access inside that function um 211 these configuration object and we can call methods on those configuration objects to do certain configuration steps here you will see how that works so let's um continue with the function body here and let's use this 11t config object to then call the add pass through copy method and here we can pass in a string and the spring should correspond to the name of one of our folders we have just created in the in the project folder for example images and what we can do by calling the add pass through copy method here is to specify that this particular folder in this case images should be passed through to the output which 11t is producing and which is later on uh stored in the folder underscore site we will see it when we are running 11t for the first time we can define that those folders here should be passed through which means that there are no processing steps involved that just the content which is inside that folder is placed as it is in the same folder inside the output directory and that is what we want to do with the images folder here and we do not only want to do that with the images folder um there is one more folder i would like to define as a pass through folder and that is the admin folder so i'm calling it again here and pass through copied and i'm parsing in the string admin because that is the name of the admin folder up wirelessly and that is another folder i would like to transfer to the output directory without any change changes without any processing steps so this is the configuration we do need here and that's it for the moment that's it so very simple things we are doing here um and that's uh all i would like to put into uh the dot eleventy.js file in this first episode okay the next thing i would like to do here is another to add another subfolder here to our underscore includes folder let's do so by selecting new folder here from the context menu and let's name that subfolder layouts because i would like to use this layouts folder here within underscore includes to have a place available where it can put in our layout files so a layout file of course is something which is including some generic design elements which can then be used by uh multiple sites throughout our application and we will start here with uh defining some some kind of of a base layout here and therefore i'm creating a new file here inside of that newly created subfolder and this file is named base dot njk and this is this ending and uh this ending is already indicating that uh we are going to use the nun jux template language here for defining our layouts and later on our pages as well so that's the corresponding file extension um yeah having created that file we can directly move on and create our basic layout which is used to introduce our basic html structure for the entire site let's start by adding the html tag first the opening and closing tag of course and then inside this tag inside this html element we have the hat section and of course we have a body section as well like so um and then let's start by adding a title uh element here inside of the hat section and as a title string let's say uh let's put something in 11t plus metallify cms block x sample like so and then inside the body section uh let's add an a headline an h1 element here uh and as a headline i will just use the same string as the title string of that site here and i will put it in here as well and then most important because we are talking here about a layout template so something which should be shared across sites and should define the basic html structure of our our sites in this in this project here and therefore we need to find a way to insert the content which is then coming from our child uh child pages making use of that layout template so the content needs to be passed through and we need a placeholder here in our layout a template which is defining the right place in that code where the content from the page which is making use of that layout template should be inverted and there's a way an easy way here with our nunjax template language we can do so i will start by adding two pairs of curly braces and then we can use the content variable here to insert the content of that file and we can apply um a filter here as well and this is done in this way this is the safe filter um and uh by by using this built in safe filter the safe filter is one of the built-in filters here uh we are just saying that in in that environment auto escaping should be blocked should not be done for the content because the content is regarded as safe so we do not need auto escaping what would happen automatically if we would leave it without that filter and so we need to apply it here so that for example link elements are passed through and working as expected and so on so this is just our base layout template so having defined this base layout template we can now move on and uh create a file that is then actually making use of this base layout and i'm creating that file inside the root project folder here and i'm i'm naming it index in index.n jk uh like so and here we are starting with a so called front meta section which gives off the opportunity to define some metadata for each file and there are two pieces of metadata i would like to bring in here and the first is the layout property and i'm assigning uh the following value to layout layouts slash base dot njk and that is the file or that is the line of code here in the front meta section we need to specify that this file should make use of our previously created base layout template which is uh which is stored here inside the underscore includes folder uh inside layouts but we need to not to mention underscore includes here we can start right away with layouts with the subfolder slash base dot njk that is the name of the file and that is all what's needed to define that this index file here is this index page is making use of our base layout okay then there is another property and that is a link property and that is just defining uh the um the route in our application where this page is made a weibull and i'm putting here a slash so this is our root uh web or root page so um i need just to put in that slash here to achieve that okay and then we have some content here in that file of course um and i will leave it for now just with text content and so let's write some text here hello welcome uh to you to the plus net life cms demo like so let's save it and that's enough now we have the index file we have the layout file the base layout file um and we can now run 11t run the build process and we will see how 11t is picking up those two files and as an output delivering one static file which is then a combination of both the layout of course and our content here coming from this index file okay so we can initiate 11t by opening up a terminal we can go to our terminal outside of a visual stereo code but there is also the option of opening up an integrated terminal here so we have it integrated in our editor here which is very handy because we can just stay here within a visual studio code and the command now i need to execute is npx 11t surf hitting return and now you can see what's happening here it's giving me a url here it's a localhost port 8080 that's uh that's a part on which uh the web server which has been started for this project is running on and you can see it here this is a browser sync message uh this is just indicating that we have started in in in a so-called watch mode um so it's observing our project for changes for new files and if something is changed or something new is added uh 11t is generating static size automatically and updating the output automatically so you can keep it running here and proceed with your development task and another another important thing should be noted here now we have a new folder which is available here in our project structure and that is the underscore site folder and that is a default folder which is created by the allowanty build process and that the folder which is used to put the output into and this is then of course a folder uh which is served here to you which is served by the web server which is now running in the background and you can see it here first of all you may notice that we have two folders here there's the images folder and the admin folder both are uh just empty folders no files inside and those two folders have been created here inside of underscore site because we have added our configuration and added admin and images as a pass through copies and that is now happening here and if we later on are creating content inside of admin and images here in our uh project that content will also become a label here inside those copies and then we have a static site which has been uh which is generated here by 11t and that's of course the purpose of a static site generator outputting static html sites and here it is index.html and that is now the combination combination as promised the basic structure is coming from our base layout template and then the content is added here from our index.njk file and combined here into a single static file and now we can just accept this in the browser to open it up in the browser you can either type in this url or just hit the command key and inside the integrated terminal just click on that url and that takes you directly um to to that url inside the browser and you can see here it is presenting you the output uh coming from the static site which has been generated and this is just showing that everything is working um maybe just to to give you an example here we can uh change something in our original files here let's say not hello let's say hello world instead let's save it and it's noticing that change you can see it here and generating the output once again and now i can switch back to chrome and you can see it's updating here without needing any manual reload or something like that so all is happening automatically when changing code 11t is running again producing the new static output and then updating everything here in the browser output if if you have it open so uh very very handy for uh development okay so now we have it that's our basic setup that's our uh our basic project structure where we can move on in the next part of course and then add some block content here which is of course then the next task for building our example before then in later on adding uh medlife cms for managing our content that is the basic setup that is all we need and now we have it up and running and we can move on uh in the next part so this was sebastian from codingthesmartway.com thanks very much for watching this was already episode number one of the building a block with 11 t and net lfr cms series here on coding the smart way if you do like this video and if you do like this serious uh just give me a thumbs up on youtube also consider visiting my blog at codingthesmartway.com there you can find additional information for this tutorial series and this was the first part we have started to set up our 11t project this no starting point for bringing things further in the next part and i hope you do like that approach combining 11t aesthetic side generator with network cms if so i hope to see you in one of the next videos until then have a good lad time and have much fun trying out 11t on your own maybe bye you

Channel: CodingTheSmartWay.com

Views: 4,509

Keywords: 11ty, Eleventy, Netlify CMS, Static Site Generator, SSG, Blog with Eleventy, Blog with Eleventy and Netlify CMS, Learn Eleventy, Learn Netlify CMS, Eleventy Tutorial, Netlify CMS Tutorial, Learn 11ty, 11ty Blog, Static Site Generator Blog, Nunjucks, JavaScript, JavaScript Content Management System, 11ty Getting Started, Eleventy Getting Started, 11ty Tuturial

Id: Tq1XtMjlR28

Length: 30min 26sec (1826 seconds)

Published: Sun Sep 20 2020