Customizing the Casper theme
So, I think I did this because I wanted to add analytics to my blog and I read somewhere that code injection could potentially be wiped out (which hasn't happened for my css modes yet). So, I forked the Casper theme GitHub (GH) repo and started making modifications to it.
One thing that I don't particularly like about this workflow though is it requires me to install a bunch of Node dependencies, and I didn't want to really do that ...🙃 So, like almost all things I don't like to do on my normal system, I put it in a container/VM 😁.
So, this is the Dockerfile I created (for a more up to date file just go to my repo (this applies to all of the following files)):
FROM node:lts
COPY . /app
WORKDIR /app
RUN yarn
CMD [ "/usr/local/bin/yarn", "zip" ]
ENTRYPOINT [ "bash" ]
Then I build a few scripts around that file, which will build the theme for me and zip it up to easily upload to my ghost blog. Here is the script which calls the other scripts (for ease of management):
#!/usr/bin/env bash
set -${-//[sc]/}eu${DEBUG+xv}o pipefail
function main(){
docker/build_docker.sh
docker/run_build.sh
}
if [[ "${0}" = "${BASH_SOURCE[0]}" ]] ; then
main "${@}"
fi
Next is the build_docker.sh
#!/usr/bin/env bash
set -${-//[sc]/}eu${DEBUG+xv}o pipefail
function main(){
if [[ $(docker image ls -q node:lts | wc -l) -eq 0 ]] ; then
docker pull node:lts
fi
docker build --pull --rm -f "Dockerfile" "${@}" -t casper:latest "${PWD}"
}
if [[ "${0}" = "${BASH_SOURCE[0]}" ]] ; then
main "${@}"
fi
Then the run_build.sh
#!/usr/bin/env bash
set -${-//[sc]/}eu${DEBUG+xv}o pipefail
function run_build(){
docker container run --rm -it -v "${PWD}/dist/":/app/dist/ casper "${@}"
}
function move_zip(){
dist_folder="${PWD}/dist"
new_theme="${dist_folder}/${current_branch:-}$(date -Iseconds)_casper-personal.zip"
theme_link="${dist_folder}/${current_branch:-}casper-personal.zip"
mv "${dist_folder}/casper.zip" "${new_theme}"
ln -sf "${new_theme}" "${theme_link}"
ls "${theme_link}"
}
function branch_check(){
if [[ "$(git branch --show-current)" == feat/* ]]; then
current_branch='dev-'
fi
}
function main(){
run_build "${@}"
branch_check
move_zip
echo "checkout https://gscan.ghost.org/ to check your theme"
}
if [[ "${0}" = "${BASH_SOURCE[0]}" ]] ; then
main "${@}"
fi
Having all these scripts allows me to make one modification and then launch the full_build.sh (one that calls to the other scripts) inside the root of the directory (which the scripts are in the docker
directory). It automatically zips up my modified theme and if I'm on a branch that starts with feat/
it'll even automatically name it with dev-
so when I upload it to my blog's themes it's a different name than my main "production" theme.