Grav to Hugo

I have a blog which is mostly a record of all family holidays since 2002 and has been in various formats since its' inception:

  • Hand written html and css files which very quickly became script generated html
  • Wordpress; the self hosted free version
  • Wordpress.com; the paid version
  • Grav

Grav is a flat-file CMS which avoids the database horrors of Wordpress and is much more in line with my way of thinking with the structure of the site being heavily determined by the directory structure in which the files are stored. After exporting an XML from Wordpress most of the rest of the migration was very manual albeit with some bash scripting when possible. Grav has a nice admin interface and many plugins including image galleries, users with login but I was unable to optimise the Grav theme to load quickly so I decided to try Hugo.

Hugo is similar in that it also uses markdown and relies on the directory structure for site layout so as all posts were already in markdown format this transition was much easier but still needed some careful scripting. Hugo seems more particular about formatting although I didn't check very carefully, once it was working I didn't look further. I had a horrible mix of frontmatter markdown formats in my Grav files for example:

    category: blog

or

    category:
      - blog

or

    category: [blog]

which all had to be converted to

    categories:
    - blog

Similarly I had managed to have different time formats which Grav managed without complaint so I was completely unaware until Hugo could not read any of them.

    26-06-2021 07:37
    2021/06/21 07:37

Hugo needs the following, I think the timezone is optional

    2021-06-26T07:37:00+00:00

Luckily I had stored all posts and images in dated and named sub-directories like this

    20210626-postname

So with a lot of trial-and-error on a copy of a few subdirectories I was able to script replacement of the date as below. I also renamed the .md files to the date/name format of the directory but later understood that to use the images stored in the same directory these have to be called index.md as the post and images are then recognised as a page bundle.

 #!/bin/bash

 start=`pwd`

 all="\ls -d */"

 for directory in $all; do
   year=${directory:0:4}
   month=${directory:4:2}
   day=${directory:6:2}
   postdate="$year-$month-$day"
   line2add="date: \"${postdate}T00:00:00+02:00\""
   echo "Changing into $directory"
   cd "$start/$directory"
   if [ $? -eq 0 ]
   then
   find . -type f -name '*.md' -print0 | while IFS= read -r -d '' filename;
   do 
     echo "Looking for markdown file"
     echo "Found $filename"
     echo "Replacing date with $line2add" 
     sed -i "/date:/c $line2add" $filename
 # this was the original message
     echo "Renaming $filename to ${directory%/}.md"
     mv $filename index.md
     echo "Changing back to $start"
    cd ..
   done
   fi
 done

With all that done and some manual work on the tags I had a functioning site however I still need to look for a way to have image galleries and captions rather than a page of unlabelled images which are also added manually by the script below. The site typically compiles in less than a second, it takes much longer to copy it to my web host. Because it creates only static html pages, surfing the site is very responsive but gets suprisingly low page speeds of less than 80 on mobile but 98 for desktop, I don't know or care why as the site loads very quickly on computer and phone.

 #!/bin/bash

 # find all .jpg files in current directory and add them to 
 # the index.md file as images with empty captions

 TGT="index.md"

 for img in *.jpg
 do
   LB="![]("$img")"
   echo "Adding $LB to $TGT"
   sed -i "$ a $LB" $TGT
 done

Next Post