Vue.js Headless CMS - Develop Dynamic Websites using! | Constantin Ross | Skillshare

Vue.js Headless CMS - Develop Dynamic Websites using!

Constantin Ross, Full Stack Developer & Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (2h 9m)
    • 1. Introduction

    • 2. What is a Headless CMS?

    • 3. Introduction to

    • 4. Setting up our Vue.js Project

    • 5. Sending the first call to the API

    • 6. Displaying simple content

    • 7. Using Slices to steamline our workflow

    • 8. Displaying Slices using Vue Components

    • 9. Automaticly Import vue components

    • 10. Perperation for the blog

    • 11. Creating and Listing posts

    • 12. Preperation for the post page

    • 13. Dedicated post pages

    • 14. The Linkresolver

    • 15. Updating our Layout

    • 16. Creating a custom Image slice

    • 17. Applying Style

    • 18. Finishing the blog page

    • 19. Deploying to Netlify

    • 20. Adding a custom Domain

    • 21. Congratulations


About This Class

If you are looking to build websites with dynamic content that is easy to create and maintain - then you've come to the right place.

Why use a headless CMS?
A headless CMS can come with a lot of benefits, such as the fact that we don't need to worry about the security, availability and performance of the CMS as this is worked on by the provider. 

It also leaves us creating what we like - modern websites - whilst still having full control over the content without changing the code.

Compared to Wordpress, Prismic is a lot faster and allows us to write our website or app in any language or framework we want.

This course is great for students with intermediate knowledge of Javascript and Vue.js. 

Before you start watching make sure you have the current version of the Node Package Manager or Yarn installed on your computer.

All important tools you need to install will be covered in the videos. As an instructor, I want to remain available to you. I will do my best to read and to reply to all of your questions and concerns.

Along the way, you can share your ideas or tweak the design. Discover what others share, learn from each other and find new ways to make awesome websites using Vue and Prismic.

Don't forget to leave a review and consider following me to get notified when I create new content for you!


1. Introduction: if you want to learn how to use view, Js together with a headless seem as to develop websites with dynamic content that it's easy to create an easy to maintain than you've come to the right place. My name is Constantine, and I'm excited to be instructive throughout this course. In my four years off experience refused this multiple times to develop fast and good looking websites were still providing full control of content to my clients. We will start off by talking about the essential features, benefits and characteristics of headless you mess. Followed by that is the introduction to Pris Michiyo, which is the content management system will be using in this cause. Once you're familiar with the user interface and the concepts off purse make, we will make our first call to the A P I and play simple content to the page is, I'll show you simple principles and how we can clean up the beckoned and our code to allow for even easier usage. In the end, we will end up with a block that we will deploy to nettle if I where we can hostile up for free instead, the finishing touch I will show you how to purchase and at your own custom domain to the project so the world can see all assets needed will be provided by me. But I would be more than happy to see what you can do by changing the layout, content and design of this project. Everything you need now is the motivation to get started and I can't wait to see in the next episode. 2. What is a Headless CMS?: Now let's ask ourselves, What is Atlas seamers for this? Let's take a look at the differences between the normal and the headless seamers. First off, let's look how a normal CMS normally functions. First, you start with content creation. You or your editors can create and edit the content this content, then get start in some solved database and through templates. The content then is delivered to your pages. Now let's take a look at how this works. In a headless seamers, it starts the same with your content creation. The content also gets stored in a database, but this time the content will be served through an A P I application programming interface . We Connexus our content by sending http requests to a P I. Then we will get some soft response with our content. Commonly, this is in the data. Form it off, Jason. This data then can be displayed on a web pages, meaning that we can split the seam s in the website into two different applications. But what benefits does this spring Well, First off, the content is available for any tool and service as you can develop your website application in any programming language, second security and scalability. It's nothing we need to worry about as this will be provided by the company offering the content management system. And third, we can often benefit from the cloud as availability. Security and performance won't be issues as they also will be provided by the company offering the content management system. In all these aspects were, therefore just need to worry about application. Next off, I will show you how to create your first press make repository, and I will introduce you draw the principles and concepts that will be using. 3. Introduction to in this episode, our introduce you to Paris make dot io Before we can get started using Chris make. Let's take a look at some theoretical things behind it. First, let's take a closer look at the content structure in Paris. Make content is split up into two things. First, the custom type and second an instance of it are called the content. In the custom type, we can specify certain fears. So for a home page, we would maybe specify, like a small title field, specify its more text field for about us and also an image so that we can add an image. Then we would create an instance off this custom type and type in all the contents that we were typing the cat. She headed for the title, typing some text about us and upload a small image. This would be called a single type, as we only create one instance off the custom type. But there also is something called a repeatable type. In this case, we also create a custom type, but this time we can create multiple instances. This comes in handy when, for example, dealing with block posts or something, things where we want to have the same structure for multiple pages. So not for home page. For example, if we want to create a block post, we obviously just want to specify once what the block Post consists off. So title caption date an image in the text, and then we just want to create instances and filling our content for the own page. We also just want to specify this one's, but we're also just want to have one home page on our page. Now let's take a look at how this looks in the Christmas user interface. Now, let's go ahead and open up, girl. In there, we will type in first make out. I hope once we're on the page, you will see that in the top right corner. You can directly click on create project if you're not locked in last duty looking and if you haven't already gotten account, make sure to click up here to create in your account. Once you're locked in, you will be presented with this screen. This is your dashboard. Here you can find a list of all your repositories, which, if you just created your account, obviously unknown. Let's go ahead and create a first repository. You can think of a repository just like a project. This page will ask you to type in a proposed to rename. This has to be unique. So in my case, I will try to use view. Escutia? Yes, You can see it shows me that this name is available optional. You can also added explaining which would just be displayed in your repository. Then it will ask you to also choose a plan. For now, the three planets more than enough. But you can go ahead and take a look at their pricing section on their website. Once you're happy with our input, click on create this project. Once this has finished, he will be brought back to your dashboard and this time you can see a repository is listed here. If you used an optional name, it will display right here instead of your repository name. So let's go ahead and click on this. Once this is loaded, you will be presented with a pop up that ask you to fill in your language. In my case, this would be English you can click on define its main language, but you can also choose your own language. Now here you will see that it will ask you to create your first custom time on the left. You can see this menu bar, which has the fields content, custom types, media library experiments and down. He will also find a link to the documentation and your settings. For now, only the content, custom types and media library are interesting fast. First off, the content system looks different as we don't have any custom times off which we could create instances. Also, the media library is the place where you can manage all your media so you can upload images or documents or whatever you really like. Search through them and filter them. Let's go ahead and create a first custom type on this page. It last to you if you want to create a repeatable or a single type in our case that start off with a single time, this will name home page click on create a Custom time in here. You would be presented with this screen on the ride. You can see all the different fields that we could use, and you can simply direct them into the left so I'll go ahead and use a title field this now ask you for a field name and up i d. And actually you can also add a place. All this a little. Let's start off at the top and his feet name. I will use title. You need to remember your rap name, but it is also displayed up here as we will light. Need that later on for the A P I. You can also type in a place holder which I relief empty and then he can specify what the user is allowed to type in. So in my case, I just want the age won tak. So I'll select all of the other ones and click on OK. I also want to enter some text so I will click on this type in a few names which I was text . And down here you can leave. Everything is checked us. I want the user to be free with their content. Then go ahead and click on. OK, Now, as we're happy with this, we can go ahead and click all safe after safety. You could go back and you would see that your home page custom type has been listed here. Let's go ahead to the content. If you haven't got any concentrated yet, you would see this. But if you already have some, you need to choose this button to create new content. As Beatrice Stefan Constant type, it will immediately open up as a home page document. But if you have multiple, it will show you small motile from Richard Select and I will show you this Literal knew the Siri's. Now we could go ahead and start typing in text. So up here I will use just some simple texts and I will just type in title. So yeah, so now you can go ahead and click on safe. But if we go back to the menu, you will see that it says state is equal to draft. Now we want to change this so it's actually published. Up here, you can see a small publish button. You were presented with a drop down which ask you if you want to publish it now, a specific time and date during a release, all during an experiment variation. Now you can schedule releases so that if you want to change a lot of content across your website. You can change it all and publish it at one so you don't get any broke pages. You can also choose the time of date. But for now we were just used the publishing our version. Go ahead and click on Publish. They will see their top are turned screen and it'll ask you if you want to unpublished as we don't, we would just simply go back and you can see that now it says status, life as we can actually curry this now with the A P I. Over the next few episodes, I will introduce you to a lot more features of pres MK. I didn't include them all in this episode, as it can be a bit off whelming to learn them all at once. But I would ask you to play around a bit great new custom types at new fields and just get a few for how prison works. Now that you know the basics off, the next episode's a large, so show you how to implement this on the code side 4. Setting up our Vue.js Project: in this episode, I'm going to show you how you set up your view. James, project this start off by opening Google in their search for the view Js seal I as we want to use the command line interface to set up a project on the CLI website, click on get started and then on the left side, click on installation. He will find multiple ways on how you can install the view. See, I can either do this through the North Package manager or young. At this point, I assume that you have either one of those installed. And if you haven't go ahead and get the note package manager by installing Notorious now is I already have this installed. I would just go ahead and open up my terminal by doing a shift right click on my desktop in opening eternal. Then I would type this test commander in, which would just display your version. That way you could test a few Chess is actually working. You can see that my CLI version is 3.8 point four and this means that I'm on the latest current version now that we have the seal I installed and we know everything is working. I will go ahead and create my first project as I want to create my project on the desktop. And I'm already in the right directory. I will go ahead and type in a few. Create. Yes, This is the quant that you want to use when creating new view project through the seal I and then you can type in the thing off your project. In my case, this will be good. Then go ahead and click on Enter. If you haven't used this year, I before some of these options won't appear for us. I already have some presets safe, but we want to navigate with our keys all the way down to manually select features and press enter. Now we can slipped all the features that we want in our project, we can again navigate with the arrow keys and press space to select un Select a certain feature. So what we want is we want Babel. We want the router and also want to see us as process. The winter can stay in and that's it for now. So go ahead and press enter and go to the next one as we want to set up off you Project in history Moat. We will go ahead and press extinct. Why? Then again, Enter now We're constructive. CSS processor and I will want to have sauce with the notes aspirin. So I'll select that and then again, editor Now I only want Theis Lind with our prevention only as all the others really are necessary. I basically just it that president again. Then we also just want to lend on safe And we also want everything in dedicated conflict files. You can, of course, change these things. How you want it just It's just preference. But I'll just keep it like this. You cannot save this if you want to have it as a preset and as I already have this hour just typing in. No, and it will now start the installation. I will see once that this is finished. As you can see, this has not finished. And now we can move on to the editor for this Siris. In my case, this will be visual studio code so you can get this legis typing and visuals. Did your coat into guru and then click on the first link which should be coded visual studio dot com. Here you will find a big download button and I won't guide you through the set up. As this is quite easy. No one side you have this installed, you can go ahead and just quickly open theist code and in there we then want to go ahead and open up the folder. In my case, this will be on the desktop, the sculpture folder. Once this has opened, you will see on your left side all your different files and I assume that you have a basic knowledge off your view chairs. So now we can just quickly go ahead and open up in your term Note. Inside tape in NPM Run. This seems a bit bubbly right now, so this will now go ahead and south up our development server. As you can see, this also has not finished and by pressing control and clicking on it will open this up in a browser. You'll see that the rotor is nicely working and we have the normal view chest go up. Now we want to install a few things so that we can get this working with Chris make in the next video. So you want to stop this from running and we want to install a few things. I'll type in and stole safe. Get the safe lack. Then we will type in Chris mc Dish. You, Chris, make These are two libraries presented by Per snake, which weaken later on use for the A P I everything. So just go ahead and give it a quick and stole. As you can see, the installation has been complete and successful, and now we want to go ahead and write a bit of code so we can use this in the next episode . You know, sauce folder, go ahead and create a new folder and they with this first make in there we want to create a new file and call this file. Chris MK look fig delicious in here, we want to specify a constant and name it ap. I said that you quote to an array in there. We want to specify the a p I end point to be a certain string, and I will show you what this string is later on. Then we want to say that the much you exports theater so another we have this set up, we can go ahead into remain Js file. So first off, I want to go ahead and import the pris make conflict. Look forward slash prus make christmas dot com traffic. This appears gray as we don't use it at the moment, but we also want to important this time above it. We want to import for a sneak preview, the plug in Chris make for you. And I get that as all to complete. Since I have few plug ins installed and now below the conflict here, we want to type in a few don't use. And in here we want to type in first of all, personally view. And second, we want to pass in a few parameters, so type in comma and talking up some clearly braces to specify a few parameters. And in here we want to say that the end point is equal to, uh, Christmas conflict. A guy endpoint. Therefore, the library now knows that we want to use the personal conflict. Did I spelled that wrong note? Just as another word that we want to use this ap I end point with this library. Now, what is your A p i n point your a p i n point basically is a certain link for which you can carry the a p i for purse make. This always is https a full search for slash you're reap owning which is what we specified in the episode where we set up a pres make repository that Chris make thought I old forward slash ap i forward slash b two This is all you need to type in here. Basically. Now all you need really is there. Chris, make repository name. If you want to find your personal KPMG link, you can also go to your dashboard. Then click on your pasta Torrey and in Europe, posit Torrey. Click on the repository settings and under the menu he will find a PR and security. Here you can slip javascript and simply copy the new that you want for me. I personally found that it works better without using the cdn. It's always removed the cdn from you. Now you pretty much already set up for the next episode in which we're going to do our first call to the FBI 5. Sending the first call to the API: in this episode, I'm going to show you how you can do your first cold to the A P I before we start off. Let's start by saying in PM serve so that our developments over can start up then in our source and views. I want to start work on the homes of you file in here. Let's go ahead and remove the hello world component. Also remove its import and the components some here. We can also go ahead and remove the image from here. Now, most of the action in this video will be done in the export. All rather in the script talk in here. We want to add the date of field typing data and in there we always need to ever return way . Want to specify our first variable? In this case, we'll just use the doc Human I d. Yes, This is a simple variable that every prisoner document has. So it's easy to query for now. Then we need a few methods, so I'll go ahead and specify the methods down here. And the first method that we want is to get quantum method. This method will do the cult of the a p I and get all the content that we want. Of course, we want this method to get called once the website has been loaded for this. We're going to get the created method down here and in this we're just going to call this Don't get content. Now. When we load the website, this function gets executed and whatever it right in here gets done. So if we type in here is this daughter Ventola, sign Chris MK. This gets provided through the personal view library, but lie and get single asses. We want to get a single type. And if you remember in the Chris MC repository so far from content or custom times round other, we only have a single type which is called the home page. This then takes as a parameter the name off the custom type, which waas some page. Now, Lowell, we want to type in then to get what the response is, parameters were taken to document and then just doing carol function. And in here we want to check if the document that we received actually exists. So if we got a response and if a curry was successful else we want to do some error handling natural. But now what we want to do is we want to set this DOD document. I d equal to the document. It's like D now we can't see anything from this as off right now. And we get us more error as this has nothing in it. But for now, we want to go ahead and look this document ideas so that we can actually see something display. And I will just roof this else for now so that everything composites successfully. If we go ahead and open off the website now in chrome, you will see that we get this weird string displayed. And this will vary for which page you're doing this. Now, if we don't get anything, we want to change a few things so that we can actually display in our page. If this page wasn't found as we don't get in content this page then therefore shouldn't really exist. So say nos and in their will say this dot and will access the route talk that we got and there will just say push so that we can change the route that we're currently on and read me to specify the name, which will be phone now. This won't work as this hasn't been set up in the router yet. And I will just go it every move, all of these. Collins. So now we want to create actually, a new view which were called Not found Don't view. And in there we basically just need to create a scaffold. If you haven't got a short cut for this, you can actually just go it and type this out yourself and they're not found view. We don't need to do that much. Basically, I'll just give this name. What? Phoned? And in here, we can just go into do because a fully type in I found a little style. This room. Now in the router, we can go ahead and add something, and this can all be called. But we'll just say path will be not found. I found which reaches specified or we didn't specify the path. We specified the name already in here. So now we want to say that the name is equal to whatever you typed in there. You can also named this basically era and then we want to name which component we need and I will use this from the floating component. For now, it's It's easy with all the inputs entry one component. Now, if we go to the website, you will see that nothing has changed. We still get all thing and we can still navigate normally. We can also go to dish found and get them out. Found website. Now that's basically it for this tutorial. I've showed you how to do your first called It Actually got some data from the Chris make a P I off the next videos. I will show you how to actually get the text that we entered in the video where we created the repository and how to create multiple pages to do everything. 6. Displaying simple content: in the last video. We actually got some data from the A P I, but s You may remember, when creating the repository, we specified two fields in a custom type the title at the text. So now in this episode, I'm going to show you how we can query the data from this content and actually display this text and the title on a website for this. That's not off By changing the data fears that we want except from the document I d. We now also want a small array in there. Go ahead and at the title, or basically you claim anyway. But I'm going to use the same convention as I use up here, which is three. Yep, I d and I will set this people to know, and we will also go ahead and create a text variable. And I'll set that you call tomorrow as well. Now that we've specified thes, we can go ahead down here and just simply go ahead and curry them. Now, what we want to do here is basically get the fields and just sit them. So we're going to say I'm going to copy this line down a few times there were going to say this thought feels thought Title is equal to document daughter This science data title as the ideas part of the document and the title is part of the data. Now we want to copy this down and simply just go ahead and at the text in both times. This is simple because we use the same name in a variables s and D. Now that we've done this, we can actually go ahead and start off by displaying them on the screen. So the first thing that we want to do is we want to display the small text. So what we can do is we can add an h one tack, okay, and then we want to type something in there. So we want to do is first do our normal view chairs, I think so that we can code in the HTML and in there I'm going to say dollar sign first make, and then we can just say bridge text is plain as we want to get the rich text from the a p I and display it or rather from our fields and display it as a plain text and I'll go ahead and name. This feels there's title now. If we go to the website, you can actually see that the title gets this plate here. Now what we want to do is we also want to display a text. And as if you remember, I gave the use of the ability to do multiple things so you could do a small text and bold do it differently Seedlings, multiple things. So we can't just do this as we don't just want to play in text. What we want to do is we want to have all of this in the paragraph tack. But how it consent this? We can use TV html attribute to actually bind this. But for this, we contra specify the field. Well, actually, go ahead and create a small computer field right here and in the computer field. First of all, let me to call most with this works down there in this computer. Our at something called get Just get text for now, and we'll set this. You go too far, basically, and in there we're just going to return something. And now we need the library that we installed in our set up video, which is to press me from SoCal, appear and say in port Chris make from Cruz me dominate. I can get this auto completed through plug in and don't worry about the arrows. I just pressed safe, and obviously we still got a few errors up there. The work would to want to type in here issues are Chris macdonald library now and call the rich text function as we go to a bar called the Rich Text. And on there we want to say s html. Therefore, you need to talk page tomorrow, small that way, as we want to have this time a rich text, but this time want to have it as an HTML so that if I actually changed can to be bold, you will see that this actually also it's not that. But we want this to actually be your boat exports. I go out and save published this so that we can see this on later. And now down here, we want to other fields. So this will be this that feels the text and up here we convention scored and call the get text thing. Now you can see that all the hours are gone and in the thing you can all see that we get the first of all the title and we get the text just like we hate it here, even with the bold can. Now, if you update your contents of, for example, say my name now device safe and published, you will see that assumes we refresh the content automatically gets updated now, we obviously don't want this document idea displaying everywhere, so I'll go ahead and remove the document i d from the and here. So that's good for now. Now that you know how to display content on your pages in the next episode, I'll show you something on how we can tidy up everything and make working with components even easier. 7. Using Slices to steamline our workflow: in this episode, I'm going to show you how you can use slices to streamline your work for a Priss, MK and few jazz. So s you. Properly if noticed, We first started off by creating a single custom type for home page. Now, if we look into this, we see that there, for example, is a rich text field. Now, basically, all of our pages will have a rich text field. And for this text field, we each time curry its text. We write the computer function, we start in the data, and then we need to write it up here. Now, you may think that this is a lot of reputable coat and it is certain future as we could outsource this to a component. And Chris make has something similar to a component, and this is called a slice. Slice is basically a group off some of these fields. And to demonstrate this, let me show you something Empress make You can turn on slice on what you'll find right below your regular feels. So I click here and turn this tour. Then it shows you that you can EDIs lies and you can either create your own new slice. I'll use an existing one pretty find. There are, like a quart size text slides and also a new image gallery, for example, as it's a simplest one. I'll just going to choose the text one for now, and you can see that it was headed right here to further show you what a slice actually does. Let me save this and go to the actual content off this custom type, you can see that below our regular feels. It shows us that we connect the rich text section. All the texts lies and we can go ahead and click on this and it gets added. You can see it's the text slides and we get the text field just like know where we can have some text now. We can also go ahead and at another one wherever we want. And if we had multiple slices, we could, of course, now choose between multiple ones. So here I'm a types and different texts and relative of possibility to switch around their position. That way, we convert the content of a website fully modular in the coat. We then can create a small component for the text module, and each time that this slice gets used, we can just load that component. And it does all the rendering everything that we want now, except for using single custom types. We can, of course, also go ahead and use for potable custom types. Let's go ahead and creating your custom time. And this time we want to use a repeatable one will name this page as we want to create all of our pages as an instance of this and week off course, want to enable the slide section. And now again, just at the text slice, an electron will also create our own slices with the text size ist easiest implement for now. Then we also want to know which page we actually want to get the content from, and so that we can identify them on Go check the U R D Field, which is a unique idea or unique Identify a few basically and out at your I. D s the field name. Now you can go ahead and save this and for now, this content types actually finished, so I'll just go ahead and click on safe. You know what we want to do is in our content. Go ahead and create a new one and it automatically makes us do the page one as the single type from the home page has already got its own content. No, it shows you that the U I. D field is required and we're just going to type in home page for now. This also needs to be every time different so that if you already have from page as a your I d in this project, it will show you in a different era. Now let's go out and at a small slice and typing so text. And just to show that everything's working later on, I'll make this bold and then below that, we can say, Okay, tics. Now what? Then make something different. There you go. So now we can go ahead and save this instance off the content type. And now, once this is published, we can also jump into a code and start currying from this Now, Another feature that I haven't showed you before is that with our custom types, we can actually go ahead and disable them. If we disable a custom type, it gets displayed in this top So right now we're looking at all of the active ones, which is just the page and click on disabled. We get older disabled ones here, you can either restore it or actually deleted. But for now, the delete button. It's blocked as we still have a few instances of this content type. For the sake of this tutorial, I'll just restore this component type. And the same thing can actually be done with content as you can click on here and actually archive them. Now let's jump into the code and see how we can implement this new sliced system. So let's take a look at what we need to change in the code. First off, we need to change the way that we curry a P I as at the moment right here, we're getting a single type. So to get something by a U R d, we need to type in, get by you I d. And then it takes in another perimeter, and the first parameters actually name off the custom type, and the second parameter is what the U I. D. We want to query for in our case home page. Now I will go ahead and remove the computer to remove the import of perspective. Dom. Remove all of the's feels and that would display them. They're just going to re at the document idea, as this is a quick way, whether we could check everything's working, so we'll go ahead and lock this at the top. Intel. Just say this document odious equal to document those i d. That way we condense, see if everything's working. So if the guide into a browser you can see that we still getting our document, I d. Just like we wanted used to. So now we can go ahead and change everything into to look that we do this modular. So what do we want to do? We now want to get all of us slices the slices who could basically just store in array These this slices Then we need to set equal to something. So say they start slices is equal to document, and this time is equal to document that data dot body that way. All off, a slice is now stored in disarray. Then we want some way off actually getting all of our slice. And for now, just just play the slices of rye appear. You could see that we get here a slice type of text slice label and then we get in the primary. We can see, got a text, it's a paragraph and then the text that's in there. So how can we get this now? Well, we'll use something by view that is called dynamic component loading me that route. Saucing all the coat, including the components dynamically. For this at the top, we want to go ahead and open the component tag. No, I will go ahead and close this here and also at the closing. Detective, is there were you to specify a few things in here? First, we, of course, want to look over all of us slices, so say four. Slice and index in slices. Now, for each slice, this thing loops over this loops over all off our slices and for each slice, it gets sick. Ammon. Now we need to accept key for the full of cells, say, find the key and really use the index office slice. Then we also need to specify which component that should be loaded, and this is basically slides the slice type. But as I want to refer to them in the code as modules. I will also go ahead and empathy. It's more string Head called this mature. That way, if the type is text in their components, we can go ahead. I'll just created Slices folder and in there this one hour Load the text once you instead of just text. Now that we just create us more scaffold created different maybe just say tics. No, you'll I didn't know. I was just at the door in text. Now we have specified what we want, but we need to pass the actual data to this and that We can do this by just saying the sliced problem and then put in this Nice stated that we got from the for you. Now that we're looping over everything, this should theoretically be everything. We need to see that in the browser You should see something, but let me take a look at the council text Villagers in the trenches component. And that's correct. As we currently still need to the report. Our component, of course. So I need to say import text what you'll from I mean, you just say it compulsions fish text lunch, and this off course needs to be outside of the export default statement. Then we also teach at the hold property back and put in the textile. Juve. But no, we get an arrow s, it's in the compulsions. Slides this directory. Now we should be good. And you can see that we get to modules loaded here. Both are the ones that we have specified in here. So we got the 1st 1 and the 2nd 1 Obviously, as you've noticed, we don't have the content yet. But if we take a look at the source code, you'll see that we have the text module and another text module, meaning all the cold from here gets loaded and successfully. Now, in the next episode, I'm going to show you how we can modify this module to actually display the correct information. 8. Displaying Slices using Vue Components: in this video, we're going to make it so that text module displaced the actual content that refresh. So first off in a home, we pass a slice prop. So first we need to address well, props field up here and make sure to specify that we get this last problem here. I also had a quick name to this interest Name this the text. What you then as insult the previous videos are we need to go ahead and that off computed property here. And then I will enter something called get Text and said that to be a function in this function, we're going to straight up return soul thing. And for this, we first again need to import Christmas. Don't. We're going to import Chris mc from Chris McDonald's. Here we go. And then here, we're going to see a return. Chris McDonnell Don't rich text with test html. Didn't there we now going to do this? You could do this, those props orchestrated place and we can go to say this, but slice got primary, and we know that this is primary. As in the last video, I locked all of the slice content and we saw that the text was part of the primary. And in the primary we convinced that it text. And this is the extra text that we want to pass so with Israel then can pass it and appear I'm going to delete all of this. It will say that we want a three HTML and sake it text. I know that this is safe. We can go into a browser and take a look at this and you will see that it actually displays all the content just like we headed. And if we were to go in here and actually switch the order of them going and safe and publish, you can see that one's for back on the page and reload. This time the content actually switched. There we go. Now it has worked and everything is switched. 9. Automaticly Import vue components: in this episode, I'm going to show you how we can import all of our components without us having to register them every time. So for this I actually wrote plugging in the past that would go to Google and go to get upto com slash constantly, Ross. And on here you will find the view component in quarter here. There's also linked to the NPM page. So on there you can see how we can install this. First, we need to install Lodish interview component importer. So I'm just going to go ahead and copy this, then stop development server and say that we want to import this and load ash. So I'm going to be back One step. This installation process is finished. So now that this is finished, we're going to go back into the browser and down here you can see that it says with view. If you're using Max Jess, you could, for example, just look down here and use it this way. But up here, we're just going to need to copy this bit of code and go into our main Js file and below where we use our Christmas view. We're just going to paste this. Now what this does is here we specify what components we want to require. And then the import components function, which we still need to import at the top. So below here, we're going to do to import segments. Say import Lo dash no dash go. And then I'm also going to say import important components view component, importer. There we go. In this function coming from the library, we just need to pass the load ash variable a few instance into components that we want to require and then acquires all the components. That means that, for example, in a home view, we no longer need to import the text for Jew, and we also don't need to put it in here. That leaves us free to basically just right on lodges in the slices folder and then, just unlike raid them so that we can always use them on on your page. Now, another thing that we can specify in the main file is what files we want to import. So right now it would import all the components, including the hello world component, maybe some components we don't want to import on any page So what we can do here is also the forward slash lenders type slices. That way, we only import all of the slices that we want all of the pages if we have certain parts that are only for certain sections, so just maybe a block listing, then we don't need to messis lies. Let's go ahead and run on a development servic and see how everything still works. So the developments has no started. And if we go back to a website and start refreshing, you can see that everything still works the same. But we now don't need to import a text module, even though it's still getting used like before. Now that we learned a lot of the basics of purse make together with few chairs, we're going to move on and actually start building the block that were later on, deployed to nettle. If I 10. Perperation for the blog: in this episode, I'm going to show you how we can prepare beckoned so that we can then start developing a block system. First off, let's go ahead and clean up a few things. So first are calm page content. I'll just go ahead, unpublished this now and then. Go ahead and delete this. Since we deleted the in last instance off it, we can also delete our custom type, which was the single type for the home page. First we can disable it and then for the disabled, we can go out and delete this content type. Now we are only left with the page type and for blood posts, I want to create a new repeatable type which is called post. Then we can go ahead and ask ourselves, What does every post need? Well, first off, every post in some way so that we can identified. So we need a unique identify a cell at that. Then every post also will have a title, and every posed then also will have some soft R subtitle. We will get that from the first paragraph and then I'll go ahead and add a small date with every post should be basically ordered by a date. The type in date I'm going to click on OK, then we want to enable the slice own. And for now, I'll just at the text slices zits. Currently the only slice that we have now. I'll go ahead and click on safe and we can go back to the page. Now. In our content, I want to create a few more pages. So go ahead and create a new page we now construct before winter. Quit post or page. In my case, I'm going to create a new page. Then we need to unique identify and like his I'll use about and then he'll just at a small text say Absolutely. It takes us safe out, then are going to publish it, published this now, and we can go back and create another page. We can go out and maybe say there's no the block page stay for posts. No, we can go ahead and save this page as well. It's just the way that we have a few pages for later on when we start developing and now we could theoretically start creating a post. But I'll keep that for when we're actually developing the block post system. Another way of all of this cleaned up, Let's jump right into the code. Open up about page. Basically, this now is the same as our home page, so we can go ahead and copy all of this. Click into about going and paste all of this in here. Change this to Maybe about also, of course, changed the name. And since we want to cry really about content, we also need to change the D right here. Now if we were to go to the upside and click onto the about page, you can actually see that this content and also the you Eddie gets displayed there. Let's go back and actually remove all the document I ds from each of the pages. Now we can go ahead into our after view, and we just have the router links for those two pages. At the moment. Let's go ahead and at the block side. If we go ahead and save that and visit the page again, you can see that we now have links for the pages. If we click on this and nothing will happen since we don't have a look for you at the moment we could then go ahead and create a new file called Is Blocked in view in here. I'll just go ahead and copy the home pitch again. Put into the block page. Go ahead. Change this to block. Both will change the name. Page you. Are you down here? Then Let's go ahead. Unsuitable router for these. Well, first we need to head the block page down here. So he'll say. Look, protect the name of flock is to block for you. Then we also want to add something different as we don't want. Just not found what we rather want. Anything that hasn't been coming by the ones of our fear to display this. Now, if we go back to the website and safe, we have Theophile text. You have a homepage, antique clock ticks. If we type in anything else, Really? You can see that we get brought to the pound page. So that's it for this episode. In the next episode, we're going to start by creating our first block posts and displaying a listing off all of these posts in the block section. 11. Creating and Listing posts: in this episode, we're going to start developing a block. More specifically, we're going to list all of her posts on the block page for this. Let's go into the block page. And first of all, let's go ahead and delete this how the world component as people needed anymore and did not components that's creating new folder called Parts in There. I will trade the component called posts now, just at a scaffold and in our block. We then want to go ahead and import this. We don't import the global post interest with blood posts. This I can read typing dish hearts, dish boosts go. And then we also need to get the computer. Put the components section again, and I didn't then what we want to do appear is below off the slices. We won't have the take for the post component. There's type bloke posts like yourself closing one go and we get an error in this foul as interest of the employees template. So just quickly create a small def. Your clients off post listing interest had a Laura Ipsen for now. Now, if we go to the website and visited on, go to the block section. You can see that this component gets loaded correctly. Now what we want to do next is we want to go ahead and write the code for this in a block posts we now need to carry a few things. So we need a similar data structures to what we had before. So in here I will go ahead and first full. Give this clear. So I say Coasts, Then I'll start off by creating the data attribute in this data. Even want to go ahead and it a few feels So I'll say it. Post those stole This hasn't that already. And I've got to return, of course, to say return. Go on, get this in the then what we also want is have date options so that we can actually true some stuff from my date. So we go to say a year so that equal to America, Then I'll go it and see mints. I will not to be in a short form. And then the day I want to say that this is a to did shipped two digit So you can specify all of these And then we also want later on Ted something else. And I show you that in the next episode. Then don't. Here we want to go at night on methods again. So same methods there. Of course it can have get function. This is basically a structure of everywhere where we want to create some content or here we can actually call it get posts. Then we won't have created basically, so that we can call this. Yeah, saying that created I'll go in and say is get posts That way this function gets executed. This So now in here. We want to go ahead and start off by growing for some data. So we want to say again these Chris make this week, dr. Client dot query. So this time we're using a different method again to get some data from the FBI, because this time going to use to predicates. So this don't prus Mick predicates it. And then we need to say Dr Human type. We will say that equal to post, as we had post specified, as I could document or content type. Then we want to specify something for how we want to order it. So say waterings. Well said that you cool to know this string My I don't pose till date one have I'm descending older Then we close that offered in there And then we can go ahead and no food Brown with little from the curry Go at medal then just like quit before go There's bones it'll error functioning then say this stood coasts equal to response toe results go and that should be outpost. Theoretically, if we were to go up here What? We currently don't have any post. So it should then say that we have no post and I'll at that later. So we could actually go up here and start basic things that we can say just quickly at the stiff actually, just do appear and say V. If so, for posts don't length does not equal zero. So sure, If anything in them, then we want to display some content and else Why so talking a different Give this one again. Something else in here. Well, we don't need space. If anything, we'll just type no pose published this. No. Go ahead, Informant That all nicely, Andi. Now we're would get a problem since we just sits with two dips in the I mean templates to God. Wait just got mad, Laura. Absolute wherever we want. Basically. So let's go ahead and see how far this currently works so I can see no Post published at this time. And if we were to go to the Pressman page, we also can see that that is true for Repository at the moment. So now we could go ahead and create our first post, basically. So let's go to the content and create a new thing. Opposed type in our first actually just you space and create the dash automatically for you . A title. I just use the same, which is quite a good practice. If any identified for that is free. Our first post, then for the dated automatically circles the date that we have today. I'll just keep that they're not going to add a small text. More Villagers say Lauren Gypsum, go ahead and save up, published this and to check if everything works, we can then go ahead and click on this and refresh, and you can see that we now have. It says he can family disposed and the lower ribs and tactics displayed. So now we're in this and actually get some off a post in here and disarray. Now what we want to do is we want to have a router link which links to the trip post page. But that's something for later on. So first, let's go ahead and display all the content that we need in here. We can now go ahead and, for example, creating age too, and say that we want here to have it's the title should crispy Tex. We want to say that we want Chris make don't rich text s plane just like the function that we had in the beginning of the big. And then we can say post the data dot title just to get our title from the posts data. And before we can actually do that, we should start looping overall hunted. So in our posts, we now actually to start a group so I'll just leave for Deborah Text for there now. So what we want to do is create a diff give that class off post this stiff should now also have a V full. Oops, I'll say the full one loop voyage post in posts. The key here for is the post Doc D should identify. And then we want to also say, the fee bind post. It's posting that. So that's all. Send the costs we go. So now in here, we can actually pace to court. I just copy before Skip to step in my mind and we can go in and remove this text. And now if we go and take a look at the page again and refresh it now lists us the head off off this post. If I were to go ahead and create another post post again, you would do 2nd 2nd close and here second close for this time, I'll just choose date in the fuel. I'll just leave it now. This this going on so text, I'll go it safe. This published this publish. Go back to here. Refresh And you can see that now both of our posts are here. Now What we can do next is actually get the first paragraph from this text. So we want to get the first slice and get most all of the first text paragraph and get the first. I don't know, let's say 60 characters so so that we condemn this playoff post on here first off, we could also already display all the time that we want. So in here we could go in and other small paragraph tech in there. I'll just go and create a spun close with Created that And in there I'm going to type in Dutch. What is it? Days tongue full, which is D for JavaScript function in here for now. I'll just use the U. S. Time and of years time for wanting stunned it. And then I also passing our date choose. That's what we specified down here so that we could use them now to form it off date. We could say, Don't former. That's a new you date and this day, then takes in a post data close data Good date this. Then we know it's going to stop from a try team. And now in here. We should also see the date that this was published. And if we were to go ahead and change maybe the date from this so that we can actually see the ordering working go here can see that now Our first post is about a second post because from the data, this would be below it. It's Now let's go ahead and actually work on the text paragraph that we want to display. So before we do that quickly, if it's a new format, let's just keep it as it was before. Um, then let's go down in here. And this is another function that we were all. It's another method that we want to create. Son here. I'll say below to get Postal said, Come on, get first ground. This is supposed to get the first paragraph, as it says as a parameter, I want that it takes in the post so that we can have all the data from the single post. First, we want to create a cornice which is called the text limit. Well, so that people to 100 for now, then full of this. So it's nice. No, this is just because we never used these things. So don't worry about them. Then we also want to create in there. We want to create another constant, so we want to best to call this slices to get over the slices from the post its equal to, and we already did this a few times. Now slices is equal to post the data body as we already have. This, for example, in a block class down here. And then we can also go ahead and say, Let's so variable That will be changed later on. Only that first paragraph just you stop to be faster typing equal to a blank paragraph. Now there's that way. And then we can also go it. I'll create another variable loads variables here. I'm we call the first, Okay, go, um Stage and I'll say that people falls. So now we can say slices Thought you have a fun. True, but the slice in here. So now we can actually loop over all of our slices. And we want to check if training that has I assume it has first paragraph. If it hasn't got the first paragraph, I want to go ahead and do a few things. So we'll say if slides slice type is equal people to text. So we're looking for the first slice type of for the first slice and all of the slices. That is a text. If this is the case, they want to say slice, don't primary don't text, which is the text that is safety in the slice we will say dot for each Open up the phone and in here look perimeter And then we want to ask if look, it's cool graph that is actually the case. The doctor flocked. A type is equal to paragraph. Then we need to check another thing. You check if you're still don't ever first paragraph because we have changed our already. If we look over the second block or third and then we want to say first paragraph plus equals, Look, don't text. And then you also want to say, Has those paragraph is equal to truth? Now we want to go with former at this gun and then down at the bomb. We need to do a few more things because, as you may have noticed, we haven't used text limit yet. So below our slices mapping that was below here no one to go ahead and create some something else. I'll say coolest limited text which sends equal to the first paragraph but sub string from zero to tax Lewites. So basically cap it to a text lead and then we won't check if the first paragraph don't links is greater than the text. Then we want to go ahead and turn. See text. Good sub string from zero too. Limited text Last index Both We're going to pass in the space, so we want to. If we cut this block and the blast block is longer than a limit, we then want to cut it to the last word and then we want to add if the paragraph isn't in those course, we want to edit a few points to show that this text will continue and then we can Sorry, you don't want this in here out of the code race of the records. The and we also need to have something a little and all of this just to get the first paragraph. And in he would just say return paragraph Then we're good. So this function out gets us the first paragraph off each posts and we can use this now to go all the way. Appear again and below where we used to span. We can now go ahead and create a small diff in the creative paragraph. And in this paragraph I would go ahead again used chairs. It's a text to know display the code song cold, get first paragraph no loss in the current post I selected and now fingers crossed that all of this will work so you can go ahead that we see offers paragraph and I will go ahead and generate salute, alarm, dummy text so that we could test office paragraph. Think if we go here and paste this text in here, actually don't know how long this is going to click on. Publish. Publish. It's now this post has away longer text and you can see that now the characters are limited to quite a few now, maybe actually grew up in this on may say Mistress used 200 for now. Actually, now it looks a lot nicer. Therefore, if you have a longer text, it doesn't display the whole text, but gets you an introduction to the Post so that it can have a preview off what you're actually looking at. Now that this was quite a long episode in the next episode, we're going to think how we can link this to the actual dedicated post pages 12. Preperation for the post page: in this episode, we're going to start working on our dedicated post page. So what we want to happen is that if we click on this post, for example, we want to get brought to block dish. Oh, first post. And this shouldn't just display They're not found. Page. This should display the actual page off the dedicated post. So what we first want to do is enough use folder. You want to go ahead and create a post post view file in here? I'll just go out and create a scuffled with different. Now what we want to do is we're going to go into a rout and create a new routed here in here. The path we want to specify is there's block dish and now we want to Anderson parameter, which in our case is three. You ready? So everything that comes after block slash will be the parameter or the unique identify off the post and everything that has this type of link. We want a link to our dedicated post page. So for this elegant copy this way of important component, of course, it would be nice if you do this way that this works all right for us. So now we import this and every time we let me just go into the post patient, just say every time that we know visit, dish, bloke dish something we get brought to the post page. Now that this is working, we just need to get away to actually display the unique identifier. Next, we need to find out what this unique identify from the link is in a post on view file so that we can then curry the a p I. So what we want to do is we want to critic and methods go ahead and created, gets continent method in there and as a perimeter within here we passing the you, Eddie, this isn't everything that we need to do again. You need to read the creative function and in the created function, we won't just call this get content, but will actually get the road. So I will say this goat route. Karam's talk you i d The name of this depends on what you specified in your router. So now we want to go in here, and I'll actually also go ahead and create a data appear. And at the return so that we can specify. Sometimes Fields. I'll go ahead and create one name. You are D in this case. And now in the I'll just say this your idea is equal to your I d. So that we can actually get to feel for this. And if it's working up here, I'll just say that I would to display this u R D data field now that all off there is like on go to the bottom, there's 23 it displaces wanted free. If you go to my first post, it shows us my first post. So in the next episode, we can actually query all the data that we want for this post to fully display the dedicated pages. 13. Dedicated post pages: in this episode, I'm going to show you how we can curry all the information about this dedicated post and displayed on this page. So what we first want at the top of the post is a way to get back to the block post listing . So I'm going to say, def with a small around her link and we want this to go to I'll just say, Don't slash some of the last link equals, Yeah, I'll just say back to this and real smile all the Patriots late room now outside of this stiff, I'm going to create something. Call the H one tag and in here we want to display the block title. Now, this is just a simple data that we can display as normal. But first, let's go ahead and work on this. Get content function again. Down here, we want to get all of the content. So what we do is what we always do. We say this the Chris make the flying and don't get by your i d. This time. It's not like in the other pages like the orbit, for example. This time it's a post custom type, and the U I d is three. You ready? That comes from a parameter and actually from the girl. Then we want to say Don't. Then as a parameter again get the documents back. It was their function. Actually. Get something. Want to check if the document is existing? As if not, this post isn't probably found. So if it hasn't been found, we want to then say this third culture. But Bush, we want to pushing around much response in name and say food. Now what we want to do in here if there is an actual way I want to say this don't seals title. We want to set the title equal to Doc Humans Data title. We want to go and say this start feels that date is equal to document. Don't date a date. And then you also want to say this start slices is equal to Doc. You moved Thought they body. That's just like it's always been. Now here I want to go ahead and at all of these things, obviously feels it's like we did at the beginning and ray with a title. I just know to date, which is also no, we will also have our slices the right. Like we used to have it in all the other pages. And we also want to have the date options like we had, um, in our block sections. I'm just going to copy them from block posts. Component appear going to take them and paste the Biggles. Nicest. If the sizes, we can actually also just use Let's just keep it like we used to do. And then we also want to go ahead and copy are normal slicing system that we always use. So you know that one I'll just put that informant this and then what we want to do is actually display the title again. So, like, always stood when we just playing title, go ahead and call Christmas and off the crispy qui se bridge text iss explain. Go ahead. And, uh and they would just say feels title that way we get the actual title and also from a block post component. I will go it and copy this, and sure, copy the old paragraph tack tasted below this That well, so this time I'm not going to use deposed the data update. Otherwise, things have been option that we haven't notice on error. But what we will rather use is we're going to use the feels date. No data. Don't look. It's date. That's where. Come. All right, So now let's go ahead and check if this is actually working in the process. If I go to my actually, it's good to go to the normal page, go to the block and see I was called. This is, uh, first boost going to click on us. It says our first post as the title June 28 between 19 s, the date and low groups unless detects. If you go for our second host, you'll see that now displaced the full text. Whether before, we just had this small Texas, we go ahead and typing anything else we get brought to the not found page. And also, if we are on any off our posts, we can use the link, which, on shooting the segments, I go to our first block post. We have feedback to this button which directly brings us back to this page. Now, in the next episode, I will show you how it can use something from first Mick to actually get the links working from this block listing to the dedicated post pages 14. The Linkresolver: in this episode, I'm going to show you how it can use Press makes Link resolver to actually link this post to the dedicated page. Now, in pris make, there's something called Lingers over which we can basically write in a javascript file. And this will just redirect darlings. So in here, I'm go to scrape a file called Resolve A doctor. Yes, and in here we now can specify a few things. So first off, we're going to say, export, do you fold function. This function parameters takes a dark, which stands for document No. In here we can ask a few things we can say. If document type Disney full post, we could then go ahead and say that we want to return this bloke dish actually properly. That looks that would go. And then we can add the talk dot your i d which is the Toronto so that this things work. Now we can all sauced if darks don't time is equal to page in here. We would then live to see if the doctor thought you d is equal to page. And if so, we want to return just in a little forward slash but Els wise. We want to return slash plus the document and it's like your i d And if none of those returns actually worked with and just want to return to be not found link There we go. Now, this works so far, but we actually need to add it in our main Julius file here, we need to go out and say Billboard, I think result from And now we need to import thistle file. So say don't slash first, make daesh link resolver and in here we can just add it below our A p I endpoint in the prison. If you plug in now, we could go into our A block listing component or in a part and around this whole content off this post, I will copy all of this and create a throughout her link and then pace all the continent. Now what we need to specify in here is where we want to do this. And as this is a responsively that were generated, we need to say and in here we want I want to call are blink result and the pass in the post three passing the document to this function. It then checks whether this is it gets that this is opposed and then automatically redirects to this page so in don't need tried any functions in this file. Now we can go ahead and actually just need to inal data out troops down here. Data. We just need to go ahead and at the thing is over to this. Oh, make it equal to this. Good prus. Make the link was over. So as we specified it here to be part of the library, we can now actually get it here from the library so that we can then use it in this fire. Now, as you can see, this whole thing becomes the link. Differ. Click on it. We get brought to all of the posts. That way we can not easy to give you navigate between all of our posts and view them all in the dedicated pages. Over the next few episodes, I will style this whole block together with you so that it looks more beautiful. We will also work a bit more custom slices to proof upon the content and the functionality that you can use 15. Updating our Layout: in this episode, we're going to change our content structure and our pages so that in the next episode we can go ahead and to play all of our styles. So first off, let's go into a code. And in here we can go ahead and delete the hold and about pages. Now we want the block page to become a new home page. So we need to go into the router and change a few things in a router. We now need to specify that the slash path should go to the block component and up here, we now also want to load in our block now the normal path work and redirected to the blawg that we can go ahead and delete the about page. We can also go ahead and delete all going to the block page and what we also want to add. Now is it the own route for the not found? So what we want to do is basically with discovers and copy this one line down and what we want to do is stand down here, say that they're actually not found route so that if we go into the browser and check everything out. We can see that. First of all we get do not found right now because this is now a blocked page in those pages don't exist. But also, if we go to dish not found, you can see that this also now goes to the not found page. Since we only have one page, we can go into our active you file and roof. The navigation that we've got appear We can also go ahead and remove the content of this style for now. Now, if we go back here, you can see that this is how website now looks. We can go here and we can also you redirect back. But the only problem is this still redirects to the old block post. So what we need to do here is where we got our back thing in the actual block post pages. We want to go ahead and remove this that way. It now automatically always links to the normal page and not to the block page fence before this. So if we go ahead and back and click on this link, you can see that everything works now. In the last episode, I introduced the link resolver just for linking the post to the dedicated page. Now the Link Resolve A also has a few other features. So, for example, if we were to edit the content for, let's say, our second post and in here, we wanted to go ahead and add the dextrous typing here is my last post and we maybe want to make a link to a last post something. Mark this and click on the hyperlink. And now we can select that we want to link to document in here. We convince, like what document we want. In my case, I want to need to offer us post. And if we go out and save this and actually published this, we can see that on our second block post page, we get the link. But if we click it, we just get linked to their same page that we own in love the other page. Now, this isn't a problem with the content that we're getting, but this is a problem with for how we're passing a content in the text module. So in the text modu, we want to pass the link resolved to oppress McDonald library as well Now we can either import than ink resolve A from a papers, Nick file. But since we've got it in a prison view, we can actually just type in the first make Don't Linker is over. And don't forget to do this before that. So this way we access our personal view library, which we initialized in here, and access to link resolve of that re passed into their. Now, if we go back to the page and refresh and actually click on this, you can see that we get brought to our first post just like we want. Now, let's also clean up a back end a bit. As we already deleted all these pages, we can also go ahead and to lead some of the pages in here. So this is the block page. This one is something that we want to keep now, some texts about us, which isn't a pace that we once we can go ahead and unpublished this now then also go ahead and to lead this. Then we can also go ahead in here and unpublished old home page was even published. We can go out and delete this one work as well Now, now that we've cleaned up everything for the next episode, I will show you how we can style all of this and bring it into a nice layout. Then we will also create a few custom slices to improve upon the now new home page. And then I will show you how we can publish the whole page to nettle if I and that our custom domain. 16. Creating a custom Image slice: in this episode, we're going to create a custom slice so that we can add images to oppose. So let's jump into purse make and in a constant types, go ahead and click on the post as we only want to add this in the post. Then, in the post, I will click on that slice and in here we will create a new slice. It's the name I will name this image as a description. I'll keep the same name convention as the Text Fortress. I say the rich sexual they weaken slept Nikon. I will just search which click on this one and then you can select how you want this to be displayed. Mice, My will before with I will choose the list or are rather vague Grid and then go ahead and click on safe. Now he may have notice that we haven't added any field so far. But if we slept, our image appear. We can now at all of them down here. So what we want to head in a non repeatable zone is an image in here. We need to give this a name. In my case, I would just name this image now you can see this is we can get at responsive use so we can specify certain sizes and then at them and later on in the code we condemn, select different images and different sizes for different viewpoints Mean that on a mobile device, we obviously don't need to load a full size image. We can use away smaller version for this. As we're using the block, I will use some 16 by nine aspect ratios. So for the main one, I will go ahead and choose the lying on 20 by 1080. That would go ahead and add another one. This one. I will need me, Jim. I will do 1280 times several 120 thou at another one and then this one small and in here I'll just use 848 by four city. Now let's go ahead and click on OK, and this will then automatically get saved. Now we can also basically go ahead and add text fields or titles for the old. But we don't need that for now. Now let's go ahead and click on safe. If you go back into a content now I will just go it in it. One to a second post in here. We can go ahead and click on the new slides, and you'll see that the image slice now also appears as an option. If we click on this, you'll see that this size pops up and we can click on this toe. Upload an image as we don't want to use this, but rather some other sort of average. We can just go ahead and click on up your media. In my case, I just want to add some small stock photography. So I'll go on to one slash, which is a nice website that you can use for images now just typing nature to search for some image. Then I'll think I'll go for this image down here, and if you click on it, you can go ahead and click on Download free. Now here you can go ahead and, of course, check out his name and see what other images she's got in his profile. In our case now, I will just go ahead and open this up in my explorer. Now that we got this image here, we can go into a meet your library. Just go out and drag and drop this in here they will see a small programs spot and very soon this would be uploaded. Now take a few seconds to just create a preview image. Now you can go ahead and click on this. Now you'll see that this image was edit here and you're at the bottom. See three points for your different pupils so you can see the sizes of these changing of here. Now you come down here typing a small text. So what I'll do is I'll just typing mine. Bridge that way. Later on, we can also Crimea all of this. Now you don't need to type in the old text for all of the images as it won't change that way. We also will just use the old text off the main image. If yours will change, you can of course, change it later on in your coat and also change it up here. Now I will go ahead from click on safe and then I'll go ahead and click on Publish. Click on Publish. Now and now we can go into a second post. You will see that it doesn't display the image here is it can't load this module at the moment. That's what we want to do. It's going here and create a new foul. This one are cold. Richemont's you notice how we named our component image and we named our component in view image Watch you as we always load the name with the slice plus more joy. Yeah, I'll just go ahead and creditable Scuffled. Now we want to do in here is first of all make it possible so that we can create a responsive So we want to do is first. Maybe I didn't if and say give this a class off a bridge I want you that way We can also later on see which monitors were used. Now let's go ahead and start off by currying for what we want. So we will, of course again take in prop, which is cool slice, just like we did not text module. Then we also want to go ahead and give this one a name. So created me winning this which now we can go ahead and create the data. It's in this module. We need to start some data in here. I want to create a small return. It's We always need to know that this Nicole Then down here we also will need our methods and we want to again get some stunt. And in there we don't also want to create a get from the scriptures Always do at the bottom . Also don't forget created function Blue tree will like always Just call this content now you know, get content function we need to do a few things. So first in our data, let's go ahead and specify the fuse that we want. So I want to create a main view. Richard, just people to an empty ray. I will go ahead and create a I need him view. This'll also empty to empty right And then I will also go ahead and create just worldview. This will also be in teary Now what we want to do to get content function is actually get the data from a slice and specify them into these new variables. So I go ahead and click on type. This don't main view will be equal to this that slice the primary age. Now, if we go back to the dashboard, you can see that it says here image. And if we change to a smaller version, it says image medium there. We can already see this. That medium is a sub part of the image. So if we go ahead and copy this down online, we can change this to the region view. And the only thing that we need to change is at the end. Also, append No, Do it. Copy this town at the small here and don't forget type interview Appear like I did also change. It changed her small of you down here. Now that we've got all of this data fetch, we can go API and actually start heading our market. So the way we want to do this so that we get a responsive image because we want to create a future attack in here. We also want an image tag and we want the source to be responsive feel so that we can pass in an actual variable in there. We want to say main view. Don't you're If you want to figure out what feels we want to use, we can go ahead and just look this slice property. Now if we go to this page and refresh Festival. You will see that the images already is playing in a huge way, which here you will find all of the Jason and she can use adjacent former toe to form of this for you want to look harder into how everything works. Now we also want to use in all text. So I will just simply go ahead and type in main view health and we also need to go ahead and call in here. Otherwise it won't use the variables but rather just use it as a small text. Now, as you've just seen, we got the Maine ridge. But we also want to add the smaller images. So for this we will go ahead and create assaults, tack in the sauce tech. We will need to add a responsive also with Colin Seoul set and in there we want to first at the small view, don't your help and then also go ahead and at the media and in here we can now frightened media query When we want this to display, so embraces typing Max with and now we can basically just go ahead and use the with off the image. So if we go back into the dashboard and click on a medium, we can see that the with will be 1000 280. It's what we can go ahead and do is in a code just type of talent. 1002 180 pixels, closed markets. Then we think about it and copy this line down one more time. And in here we can go out and the median view again. We want the euro. That's the source. And in here. We then want to specify now with the proper small one, as this is one for the medium. So we go back into the dashboard, click on the last circle. We see that our with its 848 pixels. So in our code we can go ahead and off here at 848 pixels. Now, if we go back to the page, you can see that this image is still a slot, as it was before. So we need to play a bit of styling to actually get this to be more responsive in our page . We then go down here and just quickly, and I will change this later on. We'll Congar ahead and type in first. Full as well. You sass weaken, specify the Lang to be s CSS. That way we can use SAS and this will automatically be compiled. What I want to do is just say picture air strikes as we want to change. Specify to everything that's in our picture. I would just simply want to say that the max with is 100% in the hyg. The high should be equal to alter that way if we then look into all code rather into a website. And go ahead and click on this refresh. You'll see that the page now only or the images only is wide. It's the page and we have this small, large and around everything as we haven't cleared the default body margin off the website. Now that I've showed you how to create this custom modules and we got the image module, we were in the next episode to go ahead and at all of the styles for this block 17. Applying Style : In the last episode, I showed you how to create this responsive image that uses different sized images to be more effective on different screen sizes. In this episode, I will show you how we can apply a lot of style to this new block. Now you can find a pre written style sheet that I'm also going to use in The Resource Is and projects step off this video and go down to the resource of section to download the styles. Fine. Now I want to copy this file, and we want to copy it into our assets folder off the project. So I'm going to, right click this and say on revealing Explorer in this will. Then go ahead and paste this new styles phone as you see it directly appeared in here in the Editor. And if it doesn't just like the Assets folder and click on the refresh button now, as this isn't here, we just want to specify that we actually want to load this filing. So what to do this in a after you filed as we wanted to be a global style swappable, saying here, as we want to say import and what we want to import, you see, is the forward slash acids dish S E. S s dish styles. Darkness. He says this will give us an error as the fire currently stressed. India Assets Folder. So what I'll do is our credit, your CSS folder in the essence folder and who for stars found in there. Now, if we go ahead and safe and actually did assume colon there, you will see that this networks and it shows that on our pages local again. If we go ahead and look at this, you will see that this doesn't look very stylish. A few things have changed, but it still doesn't look that great. And that is because we still need to change a few things in our HTML to actually add some classes. Now what we want to go ahead is we want to start off maybe without post foul in the post. We want to go ahead and apply few classes. So up here I will go ahead and give this a class off post page. As this will be the dedicated page for this. Then I will also give this a class of container which is the class that will use across this page a lot of times. What I would actually want to do is if we go in here, you will now see that some parts of victory start to work. So what we do is I will go ahead and roof is over a bit or even a bit more, and then also just going to make this a bit smaller. So that way we can then go ahead and see all the changes in Lifetime. Now what? We also want to go ahead and do is then go ahead and wrap this year in a different diff. So go ahead and remove the container class from here. Type in back. This will change the look of this and rep actually, the whole thing, except for the post pages. So in the post pages, go ahead and create a small container in their paste everything again, and I'll go ahead and use my auto forward to form with everything. Now, if you go ahead, we can see that some parts again start working here nicely. Now we can move on to the next page in a not found page. We don't just need to create a bit of style on a few classes, but we're also going to add the actual content. That's what we want to do in here is actually create a small deaf and call this Steve or give it a class of not found in there. Give it a class off container and in their creatine age, one tech this page, I will say Page not found, no text review. This will go to our not for food. You will see that this already has been moved to the center. No below this. I want to create a small paragraph tech and say sorry way were unable to find Paige and then below this. Go ahead and practice world role to link. And this I want to link to the whole page. Then we call. So go ahead and give this small style, as we don't spell to specified for the royal tellings. No, just say text deco text decoration. They will say underline Then we actually need to specify some text in here. And this for me will just simply actually be something like return to home. So let's go ahead and talk return to go ahead and say that we will see that we've got the return to home button down here. If we click, this will get brought back to the normal page. Now, we could go ahead and start off a block, but in here, we actually don't need to sell this much. It's most of this. Are slices are actually a small block listing. So in here, we can go ahead and change their palaces of these in there. We want to go ahead. And first off, we got the post listing class, which is all right. We'll see what the post class, but then down here and we want to change few things. So this paragraph we want to give this because off post as this estimated out of the post Now, the age to actually really won't need something and that if we go ahead and refresh everything, you'll see that some changes already start to appear here. So we also want to go into a image Marshall that we created in the last episode and go ahead and to beat this thing. This is also style that is pre written in the stars file. You'll see this now still looks responsive. Now you will see that if we go to hear a few things have already changed. But we still need to apply a few things in actual post listing. We don't really need to do anything but in a block. We need to add a small class. So in here I will go ahead and all of this content will go ahead and drafting contain That way, if we form it this you will see that if we go to a larger screen again, there's no also stays nicely in the middle. What we want to do to apply a bit more style and to actually reset the HTML if we want to grab the bootstrap, a reset file. So what? We want to type in this one to search for boots Trip Cdn. Now you can see here that we want to go to this page and here we could set from a lot of different things. What we want is the bootstrap reboot men dot CSS and you can select this by clicking copy. Now, if you want to apply something like this to the global file, we can also go into a public directory and into the index file in here. You can also, of course, change. Your titles have constant all things that you like. So what? We want to do this? We want to create a link. Pharmacies as And this the atria. If we don't want to paste the code that we just copied Food website, the accidentally room of this year. If you go back to a page now, you will see that everything looks a lot nicer. We got this fund going up here. We got the average loading, our texts, looking eyes. We got the spacings. All done. So this is all the sounds that we need to apply for this block in the next few episodes, I will show you how to get more content up here by adding a few more custom slices. 18. Finishing the blog page: in this episode, I'm going to show you how it can add more content up here to make this look like nature website. This will go ahead into a back and and creating new slice in a custom types. First, select the page was the custom type and click on edit slice. Want to create a new custom slice and I will name this age now. I will go ahead down here in the description and described. This is I see Page, and then you can go ahead and select a certain type of Aiken. I'll just go ahead and shoot this block one for now. Then there's way we that we want to display slices is just below each other and not in a grid. So go ahead and click on safe. Then we want to add a few fears to this non repeatable zone. First, go ahead and had a small title. Give this a few name. I will choose title and the party automatically fills in this usual. Now I want to the UN select all these except for the H one tank. That way, full force the user to type in h one. Go ahead and click on OK, We also want to add a rich text field. Give this but field name of text and we want to once left all of these except for the paragraph. If this should be just a stroll description and we don't need any bold telling text, then go ahead and click on OK, We also want to short image now at this at the top, Fall off our slices Now for the field name, colleges, shoes image down here We don't need to add any responsive use as this image will be fairly small in the same in all sizes That with that we want to use is around 250 pixels and the height is the same. You could also make this bigger if you'd like, but in my case I'll just use 150. Therefore, we s I already explained don't need any further types so we can go ahead and click on OK, let's go at and safe this here and go vector page. Go back to the content and into our page in here. Click on at a new slides, select up a cheddar and in here first go ahead and add a small image. I will again just simply choose this image for now. Then you will see that we got this extract from it and we can go ahead and type in the title. In my case, I would choose my amazing for the text. We can simply go ahead and coffee this and then go ahead and delete this. Now we can go ahead and click on safe and then click on publish. Click on Just simply publish now. Now that this is life and we go back to here and refresh, you will see that only a posts get this plate. Now we need to go ahead and create a new slice. We will go ahead and name thes Page had a module and we could also, of course, have done this as a part and then just specified it at normal fields in our page. But I thought this way is lot smoother and I could show you more off the custom times in here. First, go ahead and create a small scaffold. Let's go ahead and actually start off with a script in here. We first, of course, want to specify props. A slight normal brigand taken this sliced Then we also has always want to specify the name off a module which of course will be Patronum or actual just time. Hey you And we want to go ahead. And at the dates of you in there, like always, school had met the return and inside without go ahead and add a school feels the tide which is equal to an array. And this has to feel so title which is equal to know now I also text which were also equal to know. Then what we can go ahead and do is simply for wanting. Don't worry about their system there. We can also go at below this and that is leverage which will also be equal to 90. Right? Then we can go up here and start bending a bit off Marco. So if we want to do is we want to create a header with the idea off header and in their our first off, go ahead and creditable picture. And in the ultra choose an average don't at any sources. And so we just have phone average size. You know, this whole typing in h one and we can just specify this message. One s were already forced the user to type in the village one and the same goes for the paragraph tag. Now in there, we can do the same as we didn't have blocked posts. We can simply use this to specify our field as a small tanks. So what I do is a copy of this in here and just say feels that title, which is now our title I'll go down here and say feels text that way This gets already echoed, but we need some information first. Since we can't put no in there, so we're going to do is we want to go ahead and at the methods Sexual didn't there? Of course, I always get content the good content function. We then need to call this from our like always. He just called this but get content And you should have understood this by now. Then what want to do in here? Yes. Get all the content from this slice. So what we theoretically could do first Let's go ahead and just lock our slice information . Now if we go ahead and take a look at this, you will see that we get this slice locked here. So the slice type, it's pay Cheddar, and now we can look for the information that we want. So in the primary, we can then go ahead and either get the image data first. All just simply say, primary title and primary text. It's now that we figured this out. We can just go ahead and say This start feels DOT title is equal to slice primary the title . Then we can go ahead and say this Start field read specified. Yes, first things that feel start text. This is equipped to slice that primary text, and then this start village right is equal to sly eyes. But try Marie image, and these may vary from how you named it in your a p I. Then if we go ahead and take a look at this again, you'll see this look still the same so we can take a look at these Earth's that we get down here. It gives us that slices look to find, and this is due to the fact that we just need to say this slice you could either also optionally do this dot and then those time Trump's That's lies, but as it it's okay if we just say they start slides, I'll just go with this. You can see that this has fixed the errors, and if we go ahead and take a look, you will see that we get this displayed here. The styling already comes from a default style sheet. She can see that It says my amazing block. You can say that. Also says he confined my latest post. Now the only thing missing is are actually Ridge. So our remove this logging from here for now. And for this will just go and try which module you can see that we just set our image array that your l So what are typing here? His image. But you're elk. And of course, again we need to add this in front of our source. So that actually realizes that we want to find this to view, not just use the default html source. Then we can also theoretically go ahead and at an old text. But since I haven't type one in the beckoned, we cannot also go ahead and give this on for now. Or just type this as blank. I'll just don't display Now what we can do is if we look at this, you will see that we get this rounded image are small header and a description. We have this more separation down here and then we got all of our blood posts listed. You can also see that they're still in order like they used to be. Now that this is basically the final block, with all of a styling done, it looks like a simple website. And we actually also have all of our content working and everything responsive and working nicely. We can now in the next episode's go ahead and focus on fixing a few things before deploying it, actually to notify, intending, accustomed to Maine. 19. Deploying to Netlify: now, in this episode, we're going to take a look at how it can deploy this block to net Cliff I to make it available for the public. So first off, we need to go to get up. But come where you will need to create account once. If created your account, you can go to your profile by clicking the top right corner and clicking on your profile. Then go ahead and click on repositories and click on New. Now we want to name this whatever you want to know your project. In my case, I will. Just typing. Look. And now you could make this a public repository for everybody to see your coat or make it a private. In my case, I will make this private repository so that not everybody can see the link to a pressman, a p I. Now what we want to do is we can add a description if you'd like to. In my case, I won't do that and you can go ahead and click on initialized with Read me if you want. You could also, of course, the license. If you want to make this an openly distributed block or something. But in my case, out. Just click on a read me. Go ahead and click on Create Project. Now you'll be presented with this screen. If you remember back when we set up our futures project, we selected that we wanted to use the history mode for router. And you can find this in the code right here? No, back then, they already want us that we would need to set a few things up for server. Especially that all the request that we sent to the server get redirected to this index dot html file. So we need some way of telling Netley fight that we need to do this. Well, luckily, Netley Fi has a certain file called the Underscore Redirects file. We could type in there what redirects we want, and then they will automatically set this up for us on the back end. So in here, we want to create a new file and call this underscore Redirects. Now in here, we first need to type what requests we want to read, Eric. So we want to say all requests and we could do this by saying forward slash and then s tricks. Then we need to separate this with two taps from the next parameter, which is to what we want to redirect. In our case, this will be the forward slash index dot html file, and then we need to specify how we want to do this. Redirect against separated with two taps and want to redirect. There's you think, the 200 redirect. Now that we've set of this foul, we can start uploading all of our files to the get server. Now there are many ways that we can deploy a code to get. If you already have something set up, like to get up there, start client or the command line interface, then feel free to use that. But in this video, I'll show you a way simpler way that we can use without having to install anything. For this, make sure to go into your browser and in your repository, click on upload files. Now what we want to do is, you know, Project Folder, which we can open up by right clicking on a sauce folder and say, Revealing explorer, we want to mark all the folders and files that we want to upload. In my case, these are all the files and folders except for the read me file and to get in or Modules Folder. That's what we want to do is open up a browser. Egan and simply Dragon. Drop them into this. Barcia, You will see this progress by loading all of your files. And once this is finished, it'll hide and you can actually see all of her files listed down here. What you'll notice is that all the files that start with a dot are hidden, so we need to re at them let wrong. Now we can score down here, And if you want to, you can add did custom change? But what we want to do is just simply commit the changes. Now, this might take a few seconds or minutes, depending on your Internet connection and the speed of get up. So see you that once this is finished. So this is not finished, and you can see all the fouls listed here. Now, the only file that we really need to worry about is Theis Lynd file, as we will get a few hours later on when deploying. If we don't at this now. So if this go ahead and click on, create new file and simply type in the name for file, which is yes, Lind R c dot chairs. Now for the content. Just going to your editor, click on the file and copy all of this and simply paste it in there. Go ahead and click on commit new file and upload this file to your master. Now, we don't need to worry about the get ignore in the browser list stand Nothing that we really need to worry about when deploying. Now the node modules will also be installed later on my neck. Cliff, I So now we can go on the search for little If I, you know, browser. The first thing that pops up is most likely the correct wall, and you can click on now. Now, if you haven't got an account yet, you can go ahead and click on Sign up. Now you can simply sign up using a get up account which you just created, or create another account or use it through email. In my case, I will use my get up account. Now, this will ask you sometimes to authenticate the nettle if I to actually have access of your get up repositories. Once this is done, you will be presented with this screen. Here you'll find a list of all your work running websites which in my case, are currently among. And if you just created your account for the first time, obviously is also known. We'll go ahead and click on new site from Get in here. You can then define what you want to use to deploy aside. In our case, we want to use get up as we just created. Get up. Repository. Yes, he saw it again. Just tried to authorize to get excess over my repositories and I already granted it time ago. So now this works. You can see that all if I get up repositories which currently is just one unlisted here and we can simply select this once this has selected, we will be brought to the screen and you can slip the master that you want to or the branch that you want to use. In our case, we currently just have the master branch. If you created a different branch, you can also go ahead and use that now we need to specify both command and a published directory if you count the editor and take a look at the package. Jason, we confined the build command right here. This may worry from framework to framer. So as a both quant we want to use and run built. And if we run this, all the files will be published into the dissed folder from which they can be served. Now, if you didn't create like, I did a Prisma conflict file and specified your AP and point, you could have also done this through environment variables and then just set the variables up in the advanced field settings. Now, once you happy with all of your settings, go ahead and click on deploy side. Now, this will bring you to this screen up here. You can already see that the next major step would be to set up a custom domain, insecure it with https. You also see that the site is currently deploying and appear. You can see the name of the site. Now, if you don't add a custom domain, you will also be able to access a page at the project name dot Nicol if I'd had come. But we we don't want this to be the name so we could go into the domain settings about the side settings, but actually click on dominate settings. And in here we can change this so you can go ahead and its site name and, for example, weakening. Just if you first make excuse click on safe. Now you can see that this is a new link and a project name. And if we go back to the overview, we now just need to wait until this building process has finished. Now for me, the sisters turned green and says published, If you click on this, you'll get all the logging output. So if you got an error or anything, you can check here to find what was the problem. Now I will simply go back and up here. You can find a link to the page, so I go ahead and click on this. Now, once this is loaded, you'll see that our page now is available. It's got this public link it secured with an SSL certificate, and you've got all of your block functionality like we had before. So everything is now deployed publicly, and the only thing left is to add a custom domain. In the next episode, 20. Adding a custom Domain: In the last episode, I showed you how to deploy a site in Italy, fight to make it publicly available under this domain. In this episode, I'm going to show you how it can at our custom domain. So unethical if I in the getting started section it already shows you that Step two is to have a custom domain. Now we'll go ahead and click on this. No, it will ask you to type in your own custom domain. So in my case, I already own a few domains, and for this video, I would use 19 design. So let's go ahead and click on this link to actually open up the documentation and let's stroll down to down here now, depending on what your hosts office, you can either go the recommended trout or in this video, I would choose three alternative around in which we just need to create in a record and specify this to where we want around. So in here, attacked in 19 designed would come, which is the domain that I want to use. So in the DNS section off my domain management, I want to click on manage for Mary Records in here. We now want to select that. We don't want to use the host default I p address, but we want to use overnight Peters and for this let's go ahead and copy this alternative i p address and paste it in there. Then go ahead and click on my settings. Now it says that the a record waas successfully created and we can go back to simplify in here we will go ahead and click on very fine Now it asked us if this is all our domain, as it's already has. No, no. Now say yes at domain. Now at the bottom, we get an error as the DNS records haven't been verified, so I'll go ahead and click on verify Deena's configuration. There, you can see that this is turned green and the DNS verification was successfully. As you can see, the block is now running under this dome a nicely. But the only problem is that the SSL certificate isn't working anymore. In some cases, you can go ahead and create your own certificate automatically by clicking on this button, and it will generate U. T s a lesson Cruz certificate. In my case, I can change my certificate on my domain settings for my house. So that is what I will do personally. Now, if you're not using the same horse that I use, which was straddle, this is most likely that everything looked different for you in the hosting section. Then I certainly recommend you that you take a look at this YouTube video. It shows you how to set up neck Cliff I with your own custom domain from name ship named. She also has a similar user interface to go, Daddy, meaning that if you watch the video, you'll find out how you can connect this to all your domains Now need the next episode. I will wrap up this project, talk about a few things that we've learned, and I'll just recap over everything that was done. 21. Congratulations: welcome to the final episode of this cause. First off, I want to say congratulations finishing this course and watching it all the way to the end . Throw the cause. We talked about a lot of principles, and I hope that you've learned all the basics of pres. Make and understand the role foundations. Now keep exploring, learn about more fields. More ways to carry the A P I and create your own page is try to create your own looks, your own feels your own custom types and make sure to share your projects on the project section off this course Now I want to wish you all the best with future and hope that you took quite a few nice things from this cause that may help you on later. We're working with clients are in your future job.