Create A Blog Website Using Swift and Publish | Swift 5, Xcode 11

what's going on everybody it's your boy Kela loco and today we're gonna be making a blog using Swift and the way that we're gonna be doing that is we're gonna be using Johnson Dale's publish repo so let's get into it so the first thing that we're gonna do is we're gonna go over to the publish repo made by Johnson Dale and as you can see there's all the information about it he documented it really well and if you scroll to the bottom there's gonna be an installation step and this is actually going to tell you how to install publish on to your onto your machine because what you need to do is you need to install the actual CLI which is the command line interface what we're gonna be using in the terminal and then from there you'll be able to create your project so let's go ahead and head it into our terminal and start downloading this thing first what we need to do is we need to copy this line right here get clone and the repo location let's go over to our command line and I'll just do this inside of the desktop so let's change the directory now go ahead and paste in that line and we have successfully cloned the publish repo so if we do LS we should be able to see it and there it is right here so now that we actually have the publish repo cloned down in our desktop what we can do is we can change directories and what we need to do is we we need to run make so what make will do is it's going to look at the make file that has been included in the published repo and it's going to run whatever command in this case it's gonna do this swift build - see release command alright so now that we actually in stuff published onto our machine let's go ahead and create a new directory or a new folder which our projects actually going to be stored in so I'm gonna do command K to clear my terminal and I'm going to do CD back to desktop so I can just do dot dot now what we can do is we can create a folder of whatever we want our website to be named and case I'm gonna call mine Swift blog/website alright so we did the mkdir the make directory command and we should have this Swift blog website on our desktop now let's go ahead and do LS and we can see it right there so let's go ahead and change directory into that Swift blog website folder and all we need to do now is do publish new after doing publish new it should generate a couple of files one of which will be the package dot Swift and it says to run this command right here open package about Swift so once we do that it should open up Xcode for you and if you go over to your Xcode you should actually see that it's going through and installing all the dependencies it may take a while for you on the first try but after that everything should be much faster moving forward now that we're done with that all we need to do is we need to change the schema to point to our Mac so make sure that this says my Mac and go ahead and run it and make sure everything is working as expected alright so as we can see it looks like everything has gone through successfully and what we should be able to do now is go back over to our terminal and run publish run this is gonna put the project together in a fully workable website and host it on our localhost port 8000 this way we should be able to see exactly what the website looks like alright and as you can see it says start starting webserver at HTTP colon slash slash localhost 8080 and as you can see this is pretty much the hello world of publish it gives us a really nice looking website and it's actually already in our dark theme because my personal preference for my computer is dark theme but if I were to open up settings and go to light theme it would actually update which is really cool so as you can see it's fully dynamic and that's pretty much hello world with publish let's keep going and create our blog site all right first things first got to switch back to dark I cannot stand light mode it's just I'm kind of blind right now all right let's head back over to the project so let's break down the project real quick the first folder that you'll see right here is content and this is going to be all the data that you actually want to populate your website with this is gonna be your blog post if things like that will actually be adding a blog post in later I'm just gonna copy a couple files that I have already format it in this format and I'll put them in there for our blog posts and we have the output this is actually what's being built by the publish package and it's actually going to be what we're gonna be looking at on the website so it includes things like the index.html the feed if you wanted to have one the Styles the CSS things like that next we have the resources this is empty right now but this is where you would put the your custom CSS files or images or things like that lastly we have the sources which is where we actually write the code and this is gonna have a main dot Swift file this is where we're gonna write all of our code and this is where we're creating our website object so now let's dig a little bit more into what's in this maintenance with file so as you can see we have what is essentially our website named Swift blog website remember that's what the folder was that we created and we actually have this new object which is of type website and inside of this object we have something called a section ID this is going to be all the different pages that we have on our website in this case we only want one page really it's just gonna be a blog so we only have posts right here item metadata I don't fully understand quite yet but I believe this is data that you could pass around to the different pages and include with the different items such as posts and things like that so you could have it be consistent across the the website over here we have a couple of variables that we actually need to update right now the the URL which is where your site is actually going to be living the actual of your website so we would actually want to have some spaces in here and then a description of your website so if your website were to show up on Google what would you want it to show so let's go ahead and update some of these things right now all right so now that we have some of the information updated let's go ahead and take a look at this last line this is where all the magic actually happens so what we're doing is we're creating an instance of our website we're running this publish function and we're passing in a theme now luckily enough Johnsonville has provided us with a foundation theme which if we jump in you can actually see that there's a lot of stuff that actually goes into this and we're gonna break this down right now if we go back to our website you'll notice that it's nicely styled and it's actually very similar to his website so what we're gonna do is we're actually gonna keep his CSS and we're gonna copy it into our project and make a modifiable file in our project that you can go ahead and update at a later time if you would like to change colors fonts and things like that but for the most part what we're gonna do is we're gonna keep his CSS file and include it into our project but just make sure that it's a brand new one so we can modify it whenever we want so let's go ahead and grab his CSS file real quick so let's open the publish package down here then go down to resources and in this folder called foundation theme you'll actually see this styles.css I'm gonna copy everything that's in here all the content is excluding the comments and I'm gonna create a new file in my resources alright so as you can see here I created a folder called my theme in my resources and I put a new file called styles.css but we want to make sure that we do is whenever you create a new file inside of this project it's going to automatically be a swift file make sure that you change the extension to dot CSS or whatever relevant extension is needed so while we're still in the CSS file there are two things that I want to point out two different classes because we're gonna actually be using them the first is rapper as you can see there's some set up right here that's going to make anything that's inside of a rapper look a specific way we'll be using that later and then another one that we're going to be using in a little bit is going to be this item list class so whenever we have our item list and it's inside of a list item it's going to look this type of way so you can go back and modify these things but I just wanted you to be aware of them when we actually start adding them to our HTML our next step is to go into the foundation theme that Johnson Dale has set up for us so you could either go over to main dot Swift and command click on foundation or you can actually find it under sources publish and then API and it'll be the file called theme plus foundation and let's go all the way to the top so I'm gonna go over a rough overview of how some of these things work and then what we're going to do is we're gonna go ahead and implement the bare bones of what we actually need to implement our website so this part is going to be very important where I go through and explain how things are working and then when we're actually coding stuff up we're gonna go pretty quickly so let's go ahead and jump into what's going on right here so this is our theme and as you can see it's an extension that's provided by Johnson Dell it's called foundation that's why we did dot foundation and then all it's doing is creating this theme now a theme has two different arguments that you need to pass in to create it so it has the HTML Factory and then the resource paths the HTML Factory is this object down here and this is actually how the website or this publish framework actually decides how a website is supposed to look in these different use cases so if we go ahead and command click into HTML factory jump to its definition we'll actually see that it's a protocol and that there's certain things that we need to do in order to implement at HTML factory the make index.html is pretty much the main web page so whenever you type in you know your website com or something like Kela Loco dot-com and you go to the main web page this is the function that's going to be handling how that website looks so this will handle our main site a section is each of those cases remember that we had the section ID and if we go back over to the main dot so if we can see that we have a section ID and we have post right so since we have a section ID called posts this means that we're going to be able to go to a website like Kela loco comm slash posts and what gets rendered on that type of page will be handled by this function how it decides to render and spit out HTML the make item HTML is going to handle how the individual objects are rendered each of these items are rendered so going back to our example where we're creating posts or blog posts and if we were to go to Kela loco calm slash posts we would see all of our blog posts right if we were to click into a blog post then this is the HTML that we would see anything that's rendered in here and each of those blog posts are considered an item and that's why we have this make item HTML the make page HTML is for special' website pages that will not be using some type of item or are not going to be really dynamic it's going to be more for your static websites something like maybe a resume or an about me page so if you want to render out a specific web page to look a specific way then this is where this that that code is going to happen for these last two we're not really going to cover but they have to do with tags and essentially they're optional so if you don't use tagging on your website you can go ahead and return nil and that's what we'll actually be doing jumping back let's go ahead and take a look at the foundation make index.html method just so that we can get a better idea of what's going on so as you can see we're specifying a language right here if you want to have like different support for different languages and things like that you can add that in we'll actually be excluding it in this tutorial it's just needless line and we don't need it for our bare-bones app next we have the head if you're familiar with web development you'll know that there's a head to a web site which contains all the metadata and then there's a body and the body is where like all the content lives of how the websites actually going to be rendered it's also worth noting that each of these objects that we're seeing right here in this dot format are creating nodes so if we were to option click on dot head you would actually see what it's doing or what arguments it's expecting and you'll also see that it's planning on spitting out this node which takes a generic object of type HTML document context so it's really important that you understand that we're working with nodes inside of this HTML block the body will also take different HTML blocks as you can see we're creating a header that's normally where you would actually put your navigation bar and things like that once again we have this wrapper so remember I mentioned the wrapper class that we have inside of the CSS well there's actually this function that that was created and if you command click on it you can actually see the definition but it has this wrapper which is simply a div which is a way to section or group together different parts of the website so as you can see this is the group's this is a essentially just taking in all the different nodes making sure that they work together inside of this div and they're gonna be working with the class as well all right going back up to the make index.html let's take a look at what's also going on in here so as you can see inside of this wrapper we have the header which is just gonna simply display the title with a h1 tag we have nodes in here this is the class and we're passing in the text so we're going to be using this type of description or at least that's what foundation is doing there's another section called latest content and then he also created this thing called item list we're gonna be using this as well if you command click and then jump to the definition you'll actually see that item list is going to create I believe that means unordered list and it's going to conform to the class item list remember that I mentioned that in this styles.css file as well this simply takes in all the items that you pass into it it loops over it in this for each method and then it creates list items so each of these list items are going to be of type are gonna be tagged with article and as you can see there's going to be a title with an 8 with the h1 formatting and it's also going to be a link a means that it's a link and the link path is actually located there we won't be using tags so we won't need to worry about that but we will have a description so as you can see it's going to be in the paragraph tag and we're gonna pass in the text and pass in the item description all right let's go back as you can see the item list takes the item so in order to get those items that are just simply doing all items grabbing it directly from the context that's being passed in lastly you can add a footer we won't be adding one in this tutorial alright so with all that super long explanation all we need to do is copy a few things so that we can use them ourselves and then we can get coding so the first thing that I want to copy is this wrapper function because it's going to be useful so that we're able to actually take advantage of the same CSS that that was provided by the foundation so go ahead and copy this and we actually need to take the wrapper and this extension as well let's go ahead and paste that into our main dot Swift I'll go ahead and put this above the the actual last statement so that we can just make sure that everything's going to work as expected and it's defined before using it now that we have the wrapper in there let's go ahead and go back and get the item list as well all right so after pasting the item list in the same extension that we did for the wrapper we get this Eric because we don't have this list function let's go ahead and remove that since we're not going to be working with tags anyways and now it looks like everything is working again one last thing that I want to do before we continue is make sure that we're keeping track of the ending parenthesis because what these pyramids of doom it gets really complicated to find out where you're actually at all right with those comments at least we'll know where things are ending at next what we need to do is we need to create our own HTML factory so let's go ahead and do that alright so as you can see we created my HTML factory it's a generic object which takes in a site which must conform to website if we go ahead and do command R we should get an error and this is going to be because we haven't implemented all the different methods that are required by the HTML factory let's go ahead and make sure that we fix that and it will get the auto populated required methods in there like I said we won't be using tags so let's go ahead and know these out we also won't be making any special individual page so what I'll do is I'll actually call the make index.html function just so that whenever we get some type of weird page if somebody chose to go to a specific page for whatever reason it simply sends them back to the home page now we're left with the three remaining functions that we actually need to implement so first I'm going to start by implementing a HTML object which we can initialize with a simple empty string now that we have our HTML factory implemented were pretty much able to create our very own theme so let's go ahead and create an extension on theme and make one called my theme all right so as you can see we created this extension on the theme we created a static computed property called my theme and all we're doing is creating this brand new theme with our new object that we created up here called my HTML factory and as of right now we don't have any resource paths so what we actually want to do is we want to add in a resource path to our CSS file which is over here in our resources folder under the folder my themes so let's go ahead and add that in now now that we have that added in all we need to do is simply use my theme all right so now we're pretty much ready to go what's gonna happen if we were to run right now is we would actually run into this blank website because our HTML would consist of just this empty string there would be literally nothing on it so to just make it so that we can actually see something let's go ahead and start with a hello world let's go ahead and run our program now after it's finished we should be able to go back over to our web site and then reload with command R and as you can see we get hello world which is perfect so now all we need to do is start implementing the HTML in the code that publish provides for us so let's go back alright so the first thing that we're gonna do in our index.html function which is essentially rendering out the home page is we're going to create the head so that we can at least get the CSS going so let's do that now all right so it's pretty easy to make the head and it's gonna be this easy moving forward for all the other websites so let's go ahead and add those in right now - all right so now that we have the head inside of the HTML for each of our websites we will actually be able to run this and we would be able to see that our CSS is now in effect the way that we're gonna be able to prove this is because remember that I have a dark theme for my operating system so if I reload this I should get a dark screen perfect let's go back and start adding in some of the con now so remember that there's two parts to every website there's the head which we already finished adding and now we needed to do the body so what I want to do is I want to create a body with essentially a header and inside that header we're gonna have the navigation bar so I'm gonna add that in now so as you can see we created this body and said that body we're gonna have a header inside of that header we're gonna be using the wrapper remember that we added the wrapper extension up here so it's gonna be a it's gonna be a div with the class type wrapper and then all of our notes that we pass in to it are gonna be in that group from there we're gonna add a navigation bar and inside that navigation bar we want to make sure that we show the text and we're and we could put in a simple string right here if we wanted but instead what we can do is we can use context which has once again the site property and a site has a name so we'll be using that let's run that and see what it looks like all right looks like we have a success let's go back to our website and reload all right looking pretty good so now that we have this navigation bar at the top it looks a lot better all we need to do is we need to update the text right here and luckily our CSS file already has a class that can handle that for us inside of this navbar we want to add a class called site name now the site name is going to take our text and it's gonna create it so that it looks a little bit more you know sexier all right perfect so let's go ahead and run the code again so that we get the updated code and let's go back to our website and reload and as you can see it looks a lot better now next what we need to do is when you need to start working on the actual content that's gonna go in this area here so let's go back to our our project and we want to make sure that we're still inside the body but we don't want to be inside the header anymore so the rest of our content is actually going to be inside of a wrapper and what we want to do is we want to get all the items that we can inside of our content so remember our content is up here in posts we're going to get all the items which will be in individual folders so inside of our post folder you'll actually see that we have this first post so anything that's not that index dot MD is going to be counted as an item in our content so let's make sure that we go back over to our project and we create an unordered list we add in each of the items and then what we'll do is we'll render out the HTML for those items all right so as you can see there was a lot of stuff added in here so let's just go back through it one more time so once again an ordered list we're going to get all of the items by using a for each we're gonna pass in the context which has a property called all items now when we grab all items and we fetched them we're able to decide how we want them sorted and how we want them ordered so what we're gonna do is we're gonna sort them by date and then we're gonna order them descending this will make sure that our latest article the newest blog posts that we put up will be the one at the top so that users can see it now since this is a for each this is actually gonna return a closure which is going to pass in each of the items now each of these items will have their own characteristics just like any other like for each loop that you would be working with or mapping function so what we're gonna do is we're gonna create a list item for each item inside of these list items will they will be articles and each article will have a header which we're going to use the items title and then it's going to have a description which will put it in a paragraph tag so now if we go ahead and run this let's see what it looks like all right and let's jump back over to our website and reload and as you can see we have my first post and a description of my first post so let's take a look at where that content is coming from alright so as you can see once again content posts and this is where all that content is coming from so now what I'll do is actually add in a couple of blog posts that I wrote a long time ago and they're gonna be formatted in this format so that we can actually see those as well alright perfect so as you can see I have a couple of blog posts that are from a couple years ago and they're all formatted in this in this markdown format and as you can see we have the date we have the description and then we also have any tags that you want to have associated with them so now that I have new content in here what I'm gonna do is I'm gonna run the project again and take a look alright looks like everything worked let's go back reload the page so as you can see we have all my content in here and it's starting to really take shape of how our blog post is actually going to look now don't get confuse the fact that this says my first post the reason for that is because remember that our content is all ordered so my first post actually has a date if we take a look at it as 2020 but any other blog is 2018 so in order to just not confuse you I'm gonna change this date to 2017 I'll run it again update my content go back over to the website reload it and now you'll actually see my first post all the way at the bottom so that's great it's starting to really take shape but there's a couple of CSS updates that we really need to add so that it starts looking a lot better the first thing that we want to do is we want to make sure that one we're able actually click on these links because right now we can't go anywhere and then to what we want to do is we want to make sure that they are formatted and looking very nicely so let's go back over to the code we're gonna head over to our Maine dot Swift so in order to make sure that our titles are actually selectable we need to wrap this text in a dot a tag and that will also need to have a href which is a reference to where that link is actually going to take them alright perfect so now that we wrapped it in a dot a tag and it has a href a reference to where it takes us and we use that by getting the items path let's go ahead and run that and check our website now let's go ahead and reload and now as you can see everything's underlined and if we go ahead and click on it well we're taken to another page now keep in mind that this is a item and we're actually looking at the accountability item and we don't have any way of rendering out that data so as you can see in this item we're actually not doing anything so all the HTML still needs to be put in there but we do have the head tag which is why the background is still dark so we're gonna cover that in a bit but let's go ahead and continue with making sure that our original page looks better so the next thing that we want to do is we want to make sure that in our unordered list that we're gonna make sure we use that class item list now that we added this item list which we're gonna be using everything should look a little bit better let's head back let's make sure that we go back to our original site and reload and as you can see everything's starting to really take shape so with this done right here all we need to do is we need to make sure that we go into our post and we're able to actually read the content so let's go ahead and start adding in the item HTML now so scrolling down to the item HTML as you can see the only thing that we have in here is head so what we want to actually do is we want to once again add a navbar but we also want to render out the content for the item as well now instead of going back and rewriting all this code for my header and having the navbar look exactly the same what I'm gonna do is I'm actually gonna create another extension that's going to allow me to have our header be it's very own thing so that we can just pass it in and it spits out a new node so let's go ahead and add that extension now all right so as you can see we're gonna be doing an extension on nodes because each of these are a node and we're making sure that it's only four nodes where the the context is equal to HTML body context so let's go ahead and take a look at what's going on inside of our header class now everything seems normal until we get down to the actual content now using a class is fine we're just using a simple string but the problem becomes that we're using context so as you can see context is of type publishing context and it's a generic type so we need to make sure that our function that creates our header is going to be able to take in that context so let's go ahead and add that in now all right perfect so as you can see we created a function called my header it's going to be a generic function where whatever the generic type that's passed in is going to conform or it must conform to type website so when we pass in a context which is going to be of type publishing context it's going to already have an Associated site with it and that's going to obviously conform to website and that's why we're able to make it work like this next all we need to do is copy our header in and we're good to go perfect so now let's go ahead and replace this header with my header all right everything looks way cleaner now so let's go ahead and run it make sure that our website still looks right on our main webpage and then keep going all right we just need to go back to localhost reload the page and make sure that everything still looks the same perfect the last thing that I want to do is I just want to make sure that whenever we click on this title we're always taken back to the home page all right let's go ahead and add that in so with our text let's wrap that in a paytag and then we'll be able to reference back to the home site all right looking good now that it's wrapped into a tag we should be able to click on our text and it should be able to take us back to our website whenever we click that in our header let's go back to our website reload it and now if you hover over it you'll actually see that it has a pointer and it should reload the page we're still on this index that HTML page but once we add this header over to one of our posts we'll actually be able to go back to our home page let's add that now so let's go down to our item HTML and let's go ahead and add in the body all right now that we have our header in let's run it let's make sure that we're able to see our header on our page we reload we see it we click it and we're back to our home site let's go ahead and start rendering out some of the content so this is going to be actually quite simple all we need to do is we need to create a wrapper inside that wrapper we'll have an article and that article will contain our content body which is a different type of note that pretty much renders the item that's being passed in right here so let's add that now all right so as you can see once again we're using our wrapper class which makes things format it pretty nicely we're wrapping it in an article tag because once again this is an article and that helps for like search engine optimization and optimizing your website to our optimizing crawlers to know what is in this content and then we're just saying we're gonna create a new node from the item body which is the HTML version of whatever our content is so any of this it's gonna be represented as HTML so let's go ahead go back to our code let's command R and run it let's head back over to the website and let's go ahead and click on any of these and as you can see then it's rendering our content which is really cool and we can go back to the website by simply heading up here alright so the last thing that I want to show you is the URL that we're currently working with so as you can see it's localhost so essentially whatever your website will be keylolo cocom slash post or whatever so when we do this slash post this is actually a website remember I was mentioning sections so if we go over to this slash posts usually you would expect to see all the different content in here but since we haven't rendered that HTML out we're actually seeing this blank screen so since we have such a simple website we don't need to really do anything in here other than show our home page so let's go back to the code and make sure that we're handling that use case too so if you want your your section page the slash posts or whatever other section IDs that you may have in here whatever else that you have up here in your section ID if you want to render those out special and you normally would because your your home page may not be just all your blog posts then that's where the HTML would go right here so since we're not going to be doing that and we're creating such a very simple web site all we're gonna do is we're gonna again call this index.html function because we're already listing out all of our posts because our websites so simple so let's go ahead and add that in now all right perfect so let's go ahead and run that and let's take a look at that slash posts website now so if we go ahead and we're at slash posts and we reload this website as you can see it pretty much looks like our home page if we go and select our home page it looks exactly the same but if we were to go to slash posts it would also look like that so now we have this fully functional blog website we can click into it we can view our content and everything's working and that's pretty much it we were able to create a blog post put it inside of our content and load it all up so now a user can go through and read it now obviously the CSS can be updated you know you can change the way that all this looks in the markdown file you can obviously improve your home screen if you wanted to there's all kinds of things that you could do with the CSS but that's not what we're here for we're here to write Swift websites well that's pretty much it for this tutorial I know that it was a long one but I hope that you learned something new and hopefully you'll go out there and create a swift website if you liked the video make sure you share it with the rest of the community so more people can see it and if you have any topics that you want me to cover you know whether it be iOS development or software development in general then make sure you leave it in the comments below now go out there and keep coding passionately

Channel: Kilo Loco

Views: 12,350

Keywords: swift website, swift publish, John Sundell, John Sundell publish, static website generator, swift static website, how to build a website in swift, swift blog, swift website tutorial, swift publish tutorial, swift package, swift publish explained, getting started with swift publish, getting started with John Sundell publish, up and running with swift publish

Id: JqdS-oi96Gk

Length: 38min 29sec (2309 seconds)

Published: Wed Apr 15 2020