Using Docker, Emacs and Amazon S3 to host my blog

I use Gitlab's autodevops to automatically build and deploy my blog.

x86.jpeg

There's two stages. The first stage converts orgmode markdown to html. The second deploys the html to amazon S3.

buildprod:
  image: registry.gitlab.com/alicelambda/cs314
  stage: build
  only:
    - master
  script:
  - sh scripts/makeTitles.sh
  - emacs --script emacs.el
  - mv assets/ public/
  - sh scripts/downSizeHeaders.sh
  artifacts:
    paths:
    -  /builds/alicelambda/blag/

deployprod:
 image: alicelambda/awscli
 stage: deploy
 only:
   - master
 script:
    - cd public/
    - aws --region  "us-east-1" s3 sync . s3://alicelambda.com

I use a custom docker container that has emacs and orgmode pre-installed to make for faster build times. Maketitles.sh sets the title of each page to it's filename. It also injects the custom css stored in style.css into all of the pages. This means that I can change my entire blogs theme in one place.

cd posts/
for i in *.org;
do
    echo -e "#+TITLE: ${i::-4}\n#+HTML_HEAD_EXTRA: <style> #content { width: 80%; margin: auto;}  #postamble {width:80%;margin: auto;}</style>" > temp
    echo "#+BEGIN_EXPORT html" >> temp
    cat style.css >>  temp
    echo "#+END_EXPORT" >> temp
    cat "$i" >> temp
    mv temp "$i";
done 

for d in $(find * -maxdepth 1 -type d)
do
    echo "converting directory {$d}"
    cd $d
    for i in *.org;
    do
    echo -e "#+TITLE: ${i::-4}\n#+HTML_HEAD_EXTRA: <style> #content { width: 80%; margin: auto;}  #postamble {width:80%;margin: auto;}</style>" > temp
    echo "#+BEGIN_EXPORT html" >> temp
    cat ../style.css >>  temp
    echo "#+END_EXPORT" >> temp
    cat "$i" >> temp
    mv temp "$i";
    done
    cd ../
done

Gitlab then runs emacs --script emacs.el which is a script that uses emacs orgmode-publish to convert the transformed org markdown into html.

(require 'package)
(setq package-enable-at-startup nil)
(add-to-list 'package-archives
             '("melpa" . "https://melpa.org/packages/"))
(add-to-list 'package-archives '("org" . "https://orgmode.org/elpa/") t)

(package-initialize)

;; Bootstrap `use-package'
(unless (package-installed-p 'use-package)
        (package-refresh-contents)
        (package-install 'use-package))


(use-package org
  :ensure t)

(use-package htmlize
  :ensure t)

(package-initialize)


(setq org-publish-project-alist
      '(("blag"
         :base-directory "/builds/alicelambda/blag/posts/"
         :publishing-directory "/builds/alicelambda/blag/public/posts/"
         :recursive t
         :publishing-function org-html-publish-to-html
         :section-numbers nil
         :with-toc nil
         :html-postamble getHeader)))

(defun timestamp ()
  (format-time-string "%Y-%m-%d %a"))

(defun getHeader (x)
  (concat " <p> Last updated: " (timestamp) " </p> <a href=\"/\"> Home  </a>"))
(load-theme 'wombat)
(org-publish-all)

The final script downsizes the h1 tags to h2 tags to balance the title size. The script also also uses sed to make the colors used for code highlighting match the theme.

#!/bin/env/sh
cd public || exit
find posts/ -name '*.html' | while read file; do
    echo "Converting file $file"
    sed -i "s|<h1>|<h2 class=\"title\">|" "$file"
    if [ "$file" -ne "index.html" ]; then sed -i "s|</h1>|</h2>|" "$file"; fi;
    for j in ffd700,ffd700 ff8700,ff8700 00d7af,00d7af ff4ea3,ff4ea3 6c6c6c,6c6c6c; do IFS=","; set -- $j; sed -i "s|$1|$2|" "$file"; done
done

The second stage then uploads the generated html to an s3 bucket using amazons awscli tools.

deployprod:
 image: alicelambda/awscli
 stage: deploy
 only:
   - master
 script:
    - cd public/
    - aws --region  "us-east-1" s3 sync . s3://alicelambda.com

Last updated: 2019-11-28 Thu

Home