WordPress is HISTORY! Get Your Own Blazor Blog Running TODAY!

if you're like me and you're sick of writing your blog in WordPress and you want to try something else out or you just want to get started writing a Blog then this video is going to be for you hi my name is Nick centino and I'm a principal software engineering manager at Microsoft in this video we're just going to take a few minutes to get a Blazer blog setup and you'll be able to run it locally and then in follow-up videos I'll show you how you can start configuring it deploying it and having customizations on top of it now this is going to be based on Steven gel's Blazer blog engine I think it's awesome to work with I've really been enjoying it and that's why I'm making these videos so that you can experience it as well that sounds interesting just a reminder to subscribe to the channel and check out that pin comment for my courses on dome train now let's jump over to GitHub and check this out all right so I will have a link to this GitHub repository down below but we are at link.net blog so that's stevenh gel's uh GitHub and then we have the blog repository which is where his Blazer blog is what we're going to be doing is if you have a quick scroll through here you can see that he has a bit of an explanation a little bit of a an animation here showing you how it's done there's some documentation again I will make follow-up videos to explain how to customize all this stuff so don't worry we're not going to jump into all that today we're just going to get it running locally for you so to start things off what you could do if you just want to see it running is you can go download from the code uh menu here and then you can pick how you want to get it you can clone it you can download as a zip whatever you want to do but if you think that this might be for you and you want to start following along in these videos and you want to have your own version of this I would recommend forking the repository so if you've never done that before and you're like well what the heck is that I'm kind of nervous if you have a GitHub account you can just go to this Fork menu up at the top here you can see that I already have my own fork and that's because I am deploying this already I do have customizations on top of it so I forked the repository but you would go to create a new fork and then you can see that you can give it a name you'd give it the owner so you'd pick your account from there you can give it a new description and then I just said for me I just want to take the master Branch only so just the main line and then later on uh so I've already taken features from some of his other topic branches pulled those in but you would go create the fork once you have the fork then you'd want to go over to your repository that you forked so if we go over to mine for example now we have basically what looks like the same thing except mine's a little bit more customized at this point so even has all this stuff left over from his read me right so what you would do from there is now say okay well how do you want to get the code again you could just download it as a zip if you just want to follow along briefly for this video to see it up and running or you might go clone down the repository so I use G extensions it's one of my favorite tools but you would just copy this to your clipboard I use G extensions to go clone the repository based on this URL but whatever tool you want to use for your git go do that and clone this down into a folder so you can start working in it now it probably doesn't need to be said but we're going to need an IDE to work in so if you like using visual studio code that's great I like using visual studio I have a full-on Enterprise license I'm not going to not use that I'm going to be showing you this in Visual Studio but you want to go now open up the solution from the folder where you downloaded it this is just a brief Interruption to remind you that I do have courses available on dome train focused on C so whether you're interested in getting started in C looking for a little bit more of an intermediate course focus on objectoriented programming and some async programming or are you just looking to update your refactoring skills and see some examples that we can walk through together you can go ahead and check them out by visiting the links in the description and the comment below thanks and back to the video for me I have that down in cev Dev leader blog this just the folder I made you can see link.net blog. sln you would just open this in Visual Studio or open the folder and visual studio code if that's what you want to use okay once you have the solution open if you want to have a look in the solution explore your layout might look different than mine so don't worry about that but the link.net blog. web is going to be the entry point it's going to be the Blazer application so literally you should be able to just press play and have a Blog up and running which is super cool mine is already configured but if I jump over just to show you this very briefly this should be the default settings depending on when you're watching this Steven might have added different features into here but he leaves this app settings set up in a way that you should just be able to press play so what you would do is just press the play button we'll see it launch in just a second here okay so we get the console window popped up here and if we have a look we have where it's listening so this is the https one sorry it scrolled on me so right there we could take that and we're going to go put that in our browser now you will notice that there's other stuff still running here so there's a Cron job that's running so there's other background work that is happening but you don't need to worry about that we're just going to be looking at what the blog looks like on the screen right now this is hitting Local Host on Port 50001 so this is my blog and I have my local settings on my machine pointed at my production settings as well so truly this is like an instance running on my machine that's also the same as the one running in the cloud and just to prove it to you if you look up at the top here Dev leader.com we can see locco host 51 and over here it's the same thing I think just the spacing is a little bit different maybe because it's zoomed in or something uh at different levels so if I put that back yeah you can see I'm clicking between the tabs they're identical so this is my live site we're just going to close that down but the one running here yours will of course look different because you just have the default settings and we're going to go check those out in just a second so again you should be able to just press play I would say that if you're finding at this point you press play in Visual Studio or in Visual Studio code you're running this or ryer if you're using ryer whatever you're using if it didn't just launch right away and you were able to go to the browser I would go onto the repository so go back to Steven's repository I would recommend filing an issue um you don't have to complain to him or anything but just let him know that you were trying to run this by default it might be something that was pushed up and the default settings are no longer working but I do think it's as intention to leave that app settings file for you so that you can just press play and see how it works okay so I want to go back to visual studio and have a look at app settings. Json again if I show you mine over here mine does look way different because I've actually customized this even more so I have additional settings in a future video I will show you even how I customize my social icons and and stuff so the the default ones uh I have additional uh icons there and different configuration for it so you're not going to have the exact same things but those social icons by default are configured right here you can also give your blog a name right here and then if we go down a little bit lower um right here there's this introduction section so mine is currently set to be an empty string and that's just because I have a background picture with some text on it I probably will change that actually though I might take the text off of the background picture just to use a texture or something like that and the reason is because you can actually have markdown in the text that it will put up there so on Steven's blog he ends up having this text right here so I'm Steven a net developer but you notice how he has bold he has links and stuff like that um I think that I would prefer to have that than just the text in the background that I have so I'm probably going to change mine up so that the background image here is a little bit different but you'll notice again if I go back to mine I have these other social icons and they are spaced a little bit funny like you can see the text in my background image kind of sucks when it's overlap like that but if I get rid of that text then I like having my social icons across the top there but that text that we see right here does work in markdown so right here on line 20 you can go configure that there's the background picture and the profile URL so these assets can be local here you can also probably put a URL and refer to it if you have stuff in uh blob storage and we're going to see that in a later video as well but the next part that I want to talk about is going to be the database stuff so this is again going to be covered in a later video but you'll notice that it's using sqlite by default and it is going to use an inmemory database if you just wanted to play around with the setting very quickly you could change this to be uh not file memory but you could change the data source to be a file on disk and then if you wanted you could use other tools like sqlite expert you could go connect to that and see what the data looks like in there as you're making posts again authentication something we'll cover in another video it does support Azure as an O provider and Au zero I started with Azure I am currently using Au zero so when I make it tutorial on that I will show you off zero and how I set things up and then there's some other simple settings here on Steven's default settings it says his name right it has his heading and a profile picture here as well you can change this to be for your information because you are not Steven and then the final thing that I'll show right here again I'll have a video on this is for the Azure blob storage this is so when you're putting up posts and you want to add pictures and stuff like that it will automatically go upload to your storage container and that way you don't have to go commit your pictures into your repository push them up you can truly just avoid code commits and have your pictures referenced as you need them in your blog articles the final thing that I'll show you is if you go up to the admin part you can log in if you're running in uh debug mode you should be able to go to admin log in and it will log in automatically cuz debug just uses a dummy off provider so you don't have to have anything configured in debug mode it'll just work and once you're logged in your menu is going to look different than mine because I have some additional settings but you want to go back to the admin part and create new and this will allow you to go get this uh blog post editor so you can give it a title the description if you're not familiar with this kind of thing this is like meta information so if you were to go search on Google for example and then you get your search results up here so I search for Dev leader like this part right here this is going to be the meta description so if you have your blog articles set up with a good meta description this is great for search engines right so let's jump back over to here you can write your post it does work with markdown there's a heading too you can preview it right if I go back so some text we can preview it again right so this is what it's going to look like it also does work with HTML so my blog posts are actually based in HTML and I had to import them so if I go look at one of my newsl for example if I go over to edit you can see it's pretty gnarly um but it's not just markdown like I have my headings in markdown but then there's some uh leftover HTML and stuff like that so um going forward all of mine will be written in markdown but markdown here does work with HTML embedded inside of it now you will have to go fill out these other fields like the preview URL and there's a couple of other things down here it will let you know if you try to publish it and it's missing something so don't worry and the final thing that I want to mention is that it's called out right here that you can attach pictures by dragging and dropping so when you do have your blob storage set up again future video you'll be able to drag and drop and that will get uploaded to blob storage automatically for you so again this should work totally out of the box and in future videos I'll show you how to configure all of this stuff so that means if you want to have your Azure blob storage set up for pictures if you want to have your database running somewhere that doesn't have to be an Azure you can use a different provider so not to worry but we'll go through all of that and then you can have your blog running up in the cloud and not just locally on your machine so hopefully that sounds interesting when the next video is ready you can check it out right here thanks and I'll see you next time