Building the blog

I wanted to focus on the content of this blog first, so I’ve used tools to build this blog as fast as possible. I’ve used Azure, WordPress, and Pexels.

The site is hosted in Microsoft Azure. In Azure, it is a matter of a few clicks and 5 minutes to create a new WordPress instance:

And after the creation process was completed, I entered the WordPress installation process which last 1 minute:

By default a website hosted in Azure will have a url such as https://mywebsite.azurewebsites.net. In my case it was https://smarthouseinkirkland.azurewebsites.net/. I wanted it to look more like a normal website with its own custom domain name: https://smarthouseinkirkland.com. I was surprised how easy the purchase and the set up of a custom domain in Azure is. It took no more than 5 minutes ad a few clicks to purchase my domain, have it configured and functional! Azure is great!

I also used the website Pexels to download some images for the website. This site is great because all photos are free and free of right. Completely free: you don’t have to pay for them, and attribution is not required.

Overall fast and cheap

Overall the entire creation process took 30 minutes or so, did not require any particular programming skill, and will cost $20 per month. There are options to lower this price for very low audience websites.

Videos

I want to insert videos of my own on the blog, like on this page.
Using mp4 files, “Add Media” from the WordPress dashboard wasn’t enough, it led to the following error at playback time:

Media error: Format(s) not supported or source(s) not found

This is because the web server needs to be configured to serve mp4 files through http. That’s done through defining a mime type for this file type. In my case I host in Azure, so I added the following lines to the file site/wwwroot/web.config, and it fixed the problem.

<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".mp4" />
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

Code Snippet

I want to show code snippets on some pages, and I’ve used the WordPress plugin CodeColorer for this purpose.

After the installation of the plugin, you only need to insert the following text in your pages or posts to get code snippets rendered in fixed font, with syntax highlighting. This plugin is great, check all the examples here.

[cc lang="lang"]
  code line 1
  code line 2
  code line 3
[cc]

I didn’t like the WordPress plugin Code Snippet though. Although it allows insert interactive snippets, it requires to define them all in a single place in the WordPress menu, which makes the editing cumbersome.

You May Also Like

About the Author: Roland

Leave a Reply

Your email address will not be published. Required fields are marked *