Set up Markdown creation toolchain for a static blog

One of the first things to do when you want to create a static blog or website is to set uo the tool chain to get it out of the way. We will start with simple image insertion workflow.

Components

• Installed Hugo and an empty custom theme created
• Visual Studio Code
• Paste Image extension from the market
• img.html shortcode file in /layouts/shortcodes/img.html

Setup

1. VS Code
   1. Install Paste Image Extension from the market
   2. Press [Cmd+,] to open Visual Studio Code settings
   3. Navigate to Extensions –> Paste Image Configuration section at the bottom
   4. Set encodePath parameter to urlEncodeSpace to make sure there are no spaces in pasted image names
   5. Change the Name Prefix to some string of your choice, E.G., “image_”
   6. Change pasteImage.path setting to ../../static/images/ to store images in default image directory
   7. Change Paste Image: Insert Pattern to form correct image patterns for img shortcode

   {{< img src="${imageFileName}" alt="${imageFileName}"  >}}
   

Use

If we want to insert an image into *.markdown post files we can do the following:

1. (Optional) type the name of the image we want to paste. You can skip this step to have an auto-generated image name.
   
    

   

    
2. Copy the image data into clipboard
3. Press [Option+Cmd+V] to use Paste Image extension with the settings we have changed above.
   The extension will save the image in ../../static/images folder and insert a markdown-formatted image link into your document.
   
    

   

    

HTML shortcode for images

Save the snippet below as /layouts/shortcodes/img.html

<!-- image -->
<div class="row">
    <div class="three columns">&nbsp;</div>
    <div class="six columns">
        <figure {{ with .Get "class" }}class="{{.}}"{{ end }} >
            {{ with .Get "link"}}<a href="{{.}}">{{ end }}
                <!-- u-max-full-width class added for Skeleton sizing -->
                <img src="{{ .Site.BaseURL }}/images/{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} class="u-max-full-width"/>
            {{ if .Get "link"}}</a>{{ end }}
            {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
            <figcaption>{{ if isset .Params "title" }}
                <h4>{{ .Get "title" }}</h4>{{ end }}
                {{ if or (.Get "caption") (.Get "attr")}}<p>
                {{ .Get "caption" }}
                {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }
                    {{ .Get "attr" }}
                {{ if .Get "attrlink"}}</a> {{ end }}
                </p> {{ end }}
            </figcaption>
            {{ end }}
        </figure>
    </div>
    <div class="three columns">&nbsp;</div>
</div>
<!-- image -->