Create your own .net powered static website for FREE The ideal blog website for .net developers - Part I Saturday, 01 May 20218 min read Blog like Scott Hanselman. What self-respecting .net developer has not thought about writing their own blogs? I certainly have. As an Internet of Things Specialist and .net developer, I have embarked on many IT adventures over the years. Adventures of lessons learned, amusement, frustrations and wins that I’d love to share with the world. Being a non-native English-speaking dyslexic has held me from doing this, but no longer! With this blog about creating a 100% .NET powered static website for free, I’m officially launching my own blog and video website. Feiko.IO says: “HELLO WORLD!!!” When I decided to start a blog website, I soon found out that hosting a cool Umbraco powered WEB app on Azure is quite expensive for a small site. The cheapest usable Web App tier would set me back 46 euro a month. This is way too much for this stubborn, lazy, cheap ass developer. So I decided that ASP.NET is a no go. I found the website world has radically changed since I built my last website in 2014. It’s a brave new world out there. Finally, I found a solution to my website problem: Static Websites! Static websites are fast and cheap. But being a stubborn developer, I want to build this website using .net technology, using ASP.NET goodies like Visual Studio tooling, Razor script and CSHTML. And on top of everything I want a dynamic Content Management System. Follow me on my adventure in creating the ideal .net static Website, like the one you are on right now! Because: Yes, you can have it all! In this blog I’ll show you how to quickly create your own simple .net powered static blog website using the CleanBlog theme. Next week, in part II, we’ll talk about adding a headless flat-file Content Management System and hosting your site for free on GitHub Pages. It’s all about making blogging fun and easy! Requirements Basic c# skills Your favorite IDE (Visual Studio 2019) .net 5 (other versions probably will work) git STEP 1 - create Statiq ‘HELLO WORLD’ Start by following the great ‘getting started’ tutorial over on Statiq.dev Now you have your first static website but there’s not a lot going on, just plain old HTML. Basically, that’s of course what static websites are just some HTML, CSS and JavaScript. For now, to render a new page, you have to write a markup file inside your input directory and at some YAML to the top of the page. I know this is great for many people, but remember I’m a dyslexic so I’m going to have all kinds of typos in my YAML. Also, I will not remember all variables that I need to put at the top of my markdown file. That’s why I want a CMS. Clearly we’re just getting started and are still a far cry from a good-looking blog site. But that is all going to change… Just bear with me. Step 2 - create our ‘CleanBlog’ blogging site Now we are going to create a proper site using the ‘CleanBlog’ theme. For this, open a terminal (inside Visual Studio solution explorer, right click on your project and select ‘Open in Terminal’) Clone the CleanBlog theme repo by typing the following: git clone https://github.com/statiqdev/CleanBlog.git theme If you used git clone to get the theme, make sure you remove the hidden .git directory inside the theme directory. Else you will get an ‘The process '/usr/bin/git' failed with exit code 128’ when we are going to publish our website in part II. Alternative: just create a new directory called ‘theme’ inside your project and extract the code from the repo inside this directory. If you are still running the statiq preview, than exit this by typing: Exit() inside the terminal that’s running statiq. Then run your project. This will generate the statiq website. Make sure you still have your index.md file inside the input directory, else there will be no content to create a website from. You can run the preview page at any time using the command: Dotnet run -- preview The preview mode will live update. How cool is that? Good work, Statiq! You can browse again to your website localhost:5080 and should see: This is starting to look like a real website already. All that in just a matter of minutes! Step 3 - Create your first Blog Statiq.web will by default look for blog content inside the input/posts directory. Create this posts directory. If you open /theme/readme.md, you’ll see that a page expects the following YAML input: `Title`: The title of the page (or post). `Description`: A description of the page. `Lead`: Descriptive text that expands on the title, usually used for posts. `Tags`: Tags for a blog post. `Published`: The date a page or post was published. `Image`: Path to an image for the page or post. `ShowInNavbar`: Set to `false` to hide the page in the top navigation. `IsPost`: Set to `false` to exclude the file from the set of posts. This will also disable post styling like displaying tags in the header. This is too much typing for my dyslexic brain. But be a hero and try it out, just like you build your index.md. Make sure your test blog is inside the posts directory. If you add content to your posts, you probably want to remove the /input/index.md you created in step 1. The index.html actually overwrites the index.cshtml inside the theme, therefore hiding you posts. You can add images to the /input/images directory, which you need to create. You can add your image to your blog using by setting the Image variable: Image: /images/<your image file name> Also try out some of the cool supported markdown ShortCodes inside your blog. Okay, that’s it for this tutorial. We are already having fun with .net and static websites. A great thanks to Dave Glick for the splendid work on Statiq platform. None of this would be possible without his work. In my next post, part II, we are going to add the long awaited CMS and start hosting your site for free on Github Pages. I can’t wait!