Making static GitHub pages with Blogger or other dynamic site generator

by pepgma 26.5.15 0 comments programming tools web

GitHub pages has its own site generator besides the myriad of static generator alternatives. Still there are plenty of dynamic site generators that make the life of the content creator simpler. As long as the site is not too complex several tools exist to convert any website to a static one. One of such tools is HTTrack which can automate the process of downloading the site and resolving the links to a local static copy. Here I provide a bash script (usable in Windows thanks to msysgit's shell emulator) to run HTTrack to download a fresh copy of the website and push it to GitHub.

For this example an HTTrack profile for your website needs to be created first using the HTTrack GUI. In this example the profile is available on the local folder codedelicias.blogspot.de/ inside the main folder (where the script resides). Make sure this contains a sub-folder called hts-cache/ which is created by HTTrack. You will have to play with HTTtrack to find the best way to download your site and keep the links. In my case I just enabled Html in web, images/other in web/xxx where xxx is the file extension on the Build > local structure settings to keep files more organized. In this example a Non-Instal copy of HTTTrack is available also on the main folder.

The local git hub repository is on the folder pepgma.github.io/ inside the main folder.

I used Blogger as the dynamic site generator. You will have to try for your own with other services/applications. The script I use to update GitHub pages is:

#!/bin/bash
# update.sh: Update the blog. Saved as .sh so Windows recognizes
# it as an executable script.

# Delete previous version files, later git will only upload
# changed files from HTTrack's copy
cd pepgma.github.io/
rm -rf *.html css ico jpg js other png

# Update mirror using HTTrack, do not ask to update, just
# do it
cd ../codedelicias.blogspot.de/
../httrack-noinst-3.48.19/httrack.exe --quiet --update

# Copy files to repository folder
cd web/
cp -r *.html css ico jpg js other png ../../pepgma.github.io/

# Go to repository
cd ../../pepgma.github.io/

# # Enable this section only if you have to do some modifications to the mirrored 
# # files. In the Blogger case some links in static json queries are broken.
# # I used sed to fix them.
# # Note This produces a warning that can be fixed:
# # http://stackoverflow.com/questions/14313318/permission-denied-when-sed-in-place-edit-in-mingw
# cd other/
# URL='http:\\/\\/codedelicias\.blogspot\.com\\/20..\\/..\\/'
# sed -i 's|'$URL'||g' *
# cd ..

# Synchronize mirror with GitHub pages
git add --all
git commit -m "Update"
git push

# See result and wait to finish
read -n1 -r -p "Press any key to finish..."