Migrating Blog to 11ty

So, I mi­grate my blog to 11ty us­ing Hylia Starter Kit. The rea­son is that it is more flex­i­ble and eas­ier to cus­tomize.

My old Hugo blog was us­ing tem­plate too but, it us­ing the git sub­mod­ule. Which is not re­aly easy to cus­tomize. Well Hugo is faster, but I don’t think I’ll need it for a small blog site like this.

The mi­gra­tion process is quite sim­ple. First I degit the tem­plate us­ing npx degit github.com/hankchizljaw/hylia. Then I change the site meta­data like site ti­tle, au­thor, email, fav­i­con, etc. Then, I copy the mark­down blog con­tents from Hugo to 11ty. Also, i de­cided to in­clude the im­ages in the blog repo, be­fore this I store the im­ages in a sep­a­rate Github repo.

Deployment is the same, first I added a new sub­mod­ule of my github pages into the 11ty blog repo. Build 11ty blog in pro­duc­tion mode, copy the dist into the sub­mod­ule, and pushed it. Then, the new site will be de­ployed by Github. The script looks like this

rm -rf ./dist/*

npm run production

cp -r ./dist/* ./thesubmodule

# Go To the submodule folder
cd thesubmodule

# Stage changes to git.
git add .

# Commit
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

git add thesubmodule/
git commit -m "rebuild site `date`"
git push origin master

That’s it how I mi­grate from Hugo to 11ty. Here is the light­house au­dit re­sult