 All right, we have Jaytower with us and Jay is going to talk about death to the CMS And that's gonna be interesting All right, I mean the CMS no ill-will Nothing personal. It's just business. That's right exactly. All right, whenever you're ready. All right, let me go ahead and share my screen here Okay All right, so yeah, let's talk about death to the CMS. I hope everyone's enjoying.net comp 2019 so far I know I am just enjoyed watching Jeffrey Palermo about DevOps Now we're going to talk a little bit about Updatable static sites for that net developers As the guys mentioned my name is Jonathan Tower. I go by Jay. I'm a partner and a principal consultant at trailhead technology partners We're a Microsoft Gold partner. We do a lot of custom software application development for our clients So if anything we talk about today or any of that stuff is Something interesting to you. These are places you can reach out to me online And I'd be happy to connect about anything and down at the bottom, too I've got a github link which I'll show again at the end of the presentation Where you can actually get the slides for this presentation that I'm showing right now All right, so let's jump into it What we're going to talk about we're going to talk about what is a static site generator? Why you might want to use one of them? I'm going to give you some examples of a few different popular ones both non.net technology ones And then some of the more popular.net based ones I've selected one of those which is called Why I am that I'm going to do a few demos in including some demos of the command line interface what it might look like If you're developing a static site on your local development environment And then building off of some of the things Jeffrey was just talking about with Azure DevOps I've created a DevOps pipeline which responds to some new code being checked into a repository and Runs a static site generator Builds that content out to an Azure To an Azure blob storage actually that's acting as a website And then we'll wrap it up with some further investigation topics if you're interested in learning more about this some some recommendations I can make for where to do that and then hopefully we'll have a little time for For some Q&A at the end So we'll start out with what is a static site generator if you're not familiar with them already It basically allows you to compromise between a hand-coded static website and a full-blown CMS if you're not familiar with CMS is some popular ones out there like WordPress it's a content management system allows more non-technical users to actually create content Have that a content go through potentially an approval process and then have that content eventually find its way out to a live website Static site generators allow you to basically generate html and CSS files from themes and Template files such as markdown for example They also then allow you to transfer those files to a web server and then have that server basically Doing what it's really good at which is serving static files to users that are requesting them So just to kind of map that out a little bit what that looks like a lot of us are probably developers or web developers and we're kind of used to what the Dynamic web application life cycle looks like so all of this happens at request time a user is going to go make a request to one of our sites or applications If that's like a CMS or if it's a ASP net core application, that's going to run some sort of an executable on the server That executable is going to go with some predefined templates let's say maybe like razor pages in the case of ASP net core and Maybe connect to the database and get some additional data Basically merge that all together and build it into a response to go back to the user But all that request time so all that processing has to happen on the web server for each request Now when we're talking about a static site that's been generated There's kind of two different time frames. There's the compile time frame and then the request time So let's look at the compile time frame first You will start with templates and content files and you would run that at compile time through a generator And that generator would actually create your website as static files in some sort of a folder structure You can then take that set of folders and files and upload them to your web server And now when a user requests at request time one of those pages It's going to just be served from the web server as a static file So why would you want to use static sites instead of the dynamic sites? The dynamic sites can kind of do all of that. It could be static. It could be dynamic So why would you want to limit yourself in that way? Well, the main two reasons are faster and cheaper So nothing for a web server is faster than serving just a static file As sort of a case study I took a site recently that was running on a cms And I was getting about one and a half to two and a half second response times, especially Two and a half seconds the first time someone would come to that site I was able to just make that same site static site And get those response times down to like 250 milliseconds. So definitely an order of magnitude faster If you think about that from your user's experience perspective, that could be very significant Especially if they're moving from page to page and seeing that That increase repeatedly And then the second reason nothing is cheaper. So with that same site I was paying about 40 a month to host that And moved it over to an azure Blob storage, which you can now set up as a web a public website And was able to get actually a slight increase in the traffic that that site was seeing And it still went from that $40 a month price to less than a dollar a month Just because it's so much cheaper to host those static files and serve those static files All right, so I want to review with you if you haven't heard of static site generators before I want to review some of the more popular ones that are out there first starting with the ones that are not Dot net based You might have heard of some of these if you're into the space at all jackal Is a very popular one. It's based in ruby and it uses a template language called liquid There's another one called hexo Which is javascript or no js based and one of its real strong points as you can see here in this chart This table here is that it uses all kinds of different template formats So if you're interested in flexibility, that might be a good option for you Then moving on to gatsby If you're a react person if you like react for your web UI framework for javascript Then you're going to really like love gatsby because it's using Javascript as its runtime and that's also using react for its templating Go is a popular language right now. That's really known for being highly performant and Hugo is cool because it uses go for both its underlying technology and for the templates that you build And then finally nux js is based on javascript and no js And if you're a view js person if you like that for your front-end uis and javascript You would really love this because it uses a view for its templates Now switching over to the dot net world. These are all static site generators written in dot net First of all, ym That one actually uses razor syntax for its templates and markdown as well So if you're familiar with either of those that can be really useful Razor if you're not familiar with it is the same technology asp dot net mbc uses for its pages as as well as razor pages Use for its ui views Then pretzel is also using liquid So if you are interested in using the liquid template, but doing it on a dot net technology, you can use pretzel graze Offers just razor and then there's another one called iron beard as well That's dot net base which uses razor and markdown like ym does Now i'm going to focus from now on i'm going to do some demos. I'm going to show you guys ym I picked that one to kind of delve down into So let's jump into that we're going to start out with a demo of using ym as a at the command line interface So i'll go ahead and open my command line here And to start out with i'll just make this a little bigger for readability and i'm just going to do a directory listing You can see there's actually nothing in this directory right now Now before the session today I went ahead and installed ym just so that we didn't have to wait for that But if you wanted to install it yourself and you've got the dot net cli installed already It's a dot net tool which means you can install it using the dot net command line So I could do dot net tool install Dash g which means i'm installing it globally and do ym dot tool Now if I do this right now, you're going to see an error message that says that that's already installed like I mentioned So I don't need to do that again But now with it installed I can use the ym command And as a sub command, I'm going to start with the new sub command and say I want to build a new project in this directory And I'm going to use the dash r flag here to indicate what recipe to use And specify blog as the recipe type so recipe is kind of like what type of website Am I building? It's a blog website with content pages the blog template is a good one to use you could do an ebook template a recipe There's also like an online documentation recipe that you could use And several others that you can find online as well So if I go ahead and run that we see the ym ASCII art logo up here And then you can see it's detecting that there's no input directory or configuration file that's creating both of those downloading some new get packages for ym to my global packages folder And Finally cleaning up a temp folder that it used So if I do a directory listing now we can see that there are a couple things in this folder There's a configuration file for ym And there's also an input directory So if I switch to that input directory you can see a markdown file called about And another directory called posts. So if we switch into that and do a listing You can see there's another markdown file here called first post that markdown So basically I've got a blog post A single blog post in here And I've got a single page called about in this directory in the input directory And that's basically it. That's the input files that I would edit or add to To create a ym based site Now if I want to actually build that site, I can use the ym command again The sub command to build it is build or actually the build sub command is the default So if I'm just trying to do a build, I don't actually have to specify build. I can skip that Now I'm going to specify again that I want to use the recipe called blog And this time I'm going to also specify a theme which is the dash t flag Now what a theme is is basically within the blog style of site or blog type of project I can have all kinds of different themes and themes are like how it visually looks what the layout of the pages is What assets are included as far as images and css Or third-party libraries So there's one that's built into ym called clean blog And I'm going to use that just as a starting point here All right, so I went ahead and ran that build command. You can see it's Actually locating my configuration file looking for the new get packages And now it's actually running through the build steps through the build pipeline And if I do a directory listing again, you see there's a bit more in the folder now than there was before Including this output directory. So if we switch to the output directory and do a listing You see what should look fairly familiar to any of us web developers a bunch of basic site root folder type of files. So I've got my about page I've also got a post a posts folder and if I Change directory to that and look you can see there's an index page in there as well as a first post .html So I'm going to go back up to the ym folder And I also want to open this up in visual studio code a minute So you can see a little bit of what's in these files All right, so if I look at the configuration file It's basically it looks like C sharp code because it is C sharp code So I'm able to set any kind of global settings or configuration here And then if we look at any of the markdown files, if you're familiar with markdown These are going to look pretty familiar to you. The only thing that's a little different Is above these three dashes is sort of like the header for this ym file I can specify some of the metadata about this document or blog post in this case Like it's title the date that it's published And any tags I want to include on that Those are all things that are defined by the recipe in this case. We're using the blog recipe So title published in tags are all things that the blog recipe knows how to handle Now if I go into The configuration I want to change one setting in here So I'm going to say settings And it's keys link hide Extensions and I want to set that to false Basically what this is going to do this is going to allow me to view these To view this site on my local development environment By making all of the links from one page or one post to another Use the .html extension at the end of the names at the end of the paths So that they'll work on my local development environment All right, so now I'm going to tell ym to build again with the blog recipe and the clean blog theme And then when that finishes running I can actually Do a preview mode where ym will open up a web browser for me and I can do that Or I'm sorry a web server for me can do that by doing ym Preview And you can see now the output from this says I can go to local host 5080 So I'm going to pull my web browser over here and go to that And you can see now that I get my page if I go to The about page you can see that that's working And if I go to the first post that was defined you can see that that has been created as well So this is kind of nice handy to use for development time to see how my site is working when I generate it It would be really nice if I could basically just run that in the background to make changes in visual studio code and have it update automatically And I can do that By just doing ym dash Preview I'm sorry dash watch dash preview and now it's going to actually watch that directory I can make a change in the directory at any time To any of the input files and it's going to automatically update that On the site. So if I open that browser back up again And go to the first post for example Now that it's running in watch mode. I can go edit this and change the post to say hello world And save it And now if I flip back over to the browser without even refreshing you can see it's already updated to hello world All right. So now I want to show you one more thing which is How to integrate static site building into a azure devops pipeline Some of the stuff that jeffrey was just showing us in azure devops So if I pull my azure devops project over here I can show you that i've got a repo Set up and it's got as you can see it's got a ym site in it including The input so it's the same basic template that we were just working with And now if I go open that I'm going to open that in visual studio code So it's the same code that we were just looking at basically And I I've also set up a build pipeline To run ym And then a release pipeline to copy the output folder Of that into an azure blob storage That azure blob storage right now is up at this static site here Which if I just refresh you can see if I click around It's It's currently working So what I want to do is I want to add a second post to my site a second blog post So I can easily do that here by just creating a new folder in my A new file in my posts folder. I'm going to call it second post dot md And then I've got some content that I'm going to borrow here from another file, which is just some basic Some basic content that you might have For markdown just basic markdown sample file here basically, okay Now I'll save that and if I go into my Of choice You can see here That I've got a change. So I'm going to go ahead and stage that change and then Say I'm adding a second post and push that Into my repo Now while that's building while that's pushing let me look at the actual repo here Which now if we look at the build you can see that it's actually queued a build to run with that add second post as the trigger for it And if I actually go in here, I can actually see as the agent spins up I can see what's happening But I actually want to go to the build definition a second so that I can show you guys What that looks like So it's really simple This is an azure hosted agent Which means that it's going to be a potentially a new agent every time If I hosted this on a server or virtual machine that I owned I could actually skip this first step, which is installing the ym tool This adds about a minute to the build time so Um, it would be great if I could do this on my own hosted agent That my own custom agent that I hosted and I could skip this step. It would save me about a minute The second step here is just running ym So if you look at this command, it's very similar command to what we've just been running at the command line interface And when it's done, I'm just publishing the output directory into a drop folder An artifact called drop so that I can grab that in my release Now if we look at the release I'll show you the definition of that as well So this is basically just going to look for any changes that happen in my Static sites build anytime a build completes And I've got it enabled for the continuous deployment trigger meaning anytime that happens it's going to constantly deploy automatically And then if I look at the actual jobs that are happening, it's basically just one step And that is to copy the contents of that drop folder to An azure blob that I've defined which you can see is that same name of the site that we We were looking at a second ago and it's going to copy it into the dollar sign web folder Which happens to be the one that you want to use if you're hosting a static site on an azure blob and Let's go see how that build is actually doing So the build is still Is running the ym step right now So you can see it actually does take a minute to run through all of that And now it's publishing the artifacts to the drop folder And so now if we switch over to the release we should see the release Pick up that in just a second. It looks like maybe I finished already. Now here it goes So that release is currently queued In just a second here this release all get an agent available from azure dev ops and it'll actually copy those that content Here you go. You can see it's waking up now And it's going to Download the artifacts the drop artifacts that I defined And now it's actually running my azure blob file copy command And in just a moment here it'll have copied all of those files over to the azure blob storage And we'll be able to go refresh that site And see that we've got that second post down there While we're waiting for that to happen though, let me actually show you my further investigation Topics if you're interested in learning more about this Static gen.com is a great resource. It talks about all these different static site generators Helps you compare and contrast them The different features that they have the different technologies that they're built using If you're interested in getting the advantages of CMS without the speed to slow down of one A headless cms might be the right choice for you It basically gives you the advantage of the back end part of the cms While still having the site be a statically generated site So headlesscms.org is a great place to start with that My demos have been with ym.io You can go to ym.io to check that out And then if you're interested in actually building applications using static sites You want to check out something called the jam stack which is jamstack.org basically brings javascript and REST APIs to play On these static sites and creates helps you turn them into actual custom applications All right, let's go check our site here real quick and see if it's up and running And you can see it has now generated the second post and if I click on it I can see the content there that was generated from that markdown file. So it worked perfectly And that brings us to the question and answers So does anyone have any questions I can help address? All right awesome awesome We got a couple questions. So the question was asked What's the impact on SEO when you're creating static files? Is it better? What's the impact? Yeah, that's a great question. There's a couple of impacts off the top of my head one of them is one of the things that SEO Search engines are concerned with such as google and bing is how fast and performant your site is so By making it a static site Versus a cms you're very likely to have a pretty significant speed increase Which means that your your sort of points or your score with the search engines is likely to go up One thing to think about though when you're if you're migrating from a cms To static sites is that you do want to try and keep all of your URLs the same So if you have sites that are currently at you know, your site.com slash blog slash blog title You'd want to try and configure your static site generator to regenerate all of those same URL paths so that if a user visits A link to an old blog that was on your cms. It's still going to work on your statically generated site Great, and then what about ym performance for compiling very large sites like doc sites? Yeah Yeah, that's a great question. So obviously The performance decreases as the site in size increases One of the ways that you could address that is to actually break it up into pieces so that if someone checks in a change and it's to you know one of 17 different areas that you have Major content areas that you have on your site. You could actually make that one site that generates and then have The other 16 sections of your site not regenerate because of that That's a good approach All right, great. Hey jay. Thanks so much for doing this. This was awesome. My pleasure Absolutely. Thanks so much for having me. We're gonna take a break and then we'll be back with matty talking about xamarin All right. Thanks so much everybody. We'll see you guys in a bit