Overengineering Your Personal Website - How I Learn Things Best

Jamie Tanna (https://jvt.me)

Software Quality Engineer @ Capital One UK

Capital One's Web Servicing platform

Customer Identity

Starting off my career, would I only learn while at work?

 

Working in the safety of my own projects

Hmm, there aren’t any projects here…

 

My site as a portfolio for job hunting

My site as a technical blog + portfolio

So why am I saying it’s overengineered?

                          +----------------------+
                          | Chef                 |
                          | Caddy                |
                          | Terraform            |
                          | Hetzner Cloud        |
                          | Digital Ocean        |
                          | GitLab               |             +-----------------------+
                          | Capistrano           |             |                       |
                          | Docker               |             |      site.tar.gz      |
                          | Jekyll               +------------>|                       |
                          | - Community plugins  |             |    11MB (w/ assets)   |
                          | - Custom plugins     |             |   600KB (w/o assets)  |
                          | Gulp                 |             +-----------------------+
                          | Browsersync          |
                          | Bundler              |
                          | NPM                  |
                          | Rake                 |
                          | HTMLProofer          |
                          | Kwalify              |
                          |                      |
                          |       ~200MB         |
                          +----------------------+

Learning about how to Automate Deployments

$ cap production deploy
00:00 git:wrapper
      01 mkdir -p /tmp
    ✔ 01 www-jvt-me@www.jvt.me 1.590s
    ...
00:30 deploy:symlink:release
      01 ln -s /srv/www/www.jvt.me/releases/20180919092109 /srv/www/www.jvt.me/releases/current
    ✔ 01 www-jvt-me@www.jvt.me 0.290s
      02 mv /srv/www/www.jvt.me/releases/current /srv/www/www.jvt.me
    ✔ 02 www-jvt-me@www.jvt.me 0.295s
00:30 deploy:cleanup
      Keeping 5 of 6 deployed releases on www.jvt.me
      01 rm -rf /srv/www/www.jvt.me/releases/20180911180652
    ✔ 01 www-jvt-me@www.jvt.me 0.330s
00:31 deploy:log_revision
      01 echo "Branch master (at 58f0955ba323576ceeed69abe6c0caf23033f7cc) deployed as release 20180919092109 by " >> /srv/www/www.jvt.me/revisions.log
      ✔ 01 www-jvt-me@www.jvt.me 0.296s

Learning about Infrastructure as Code

                          +-----------------+           +-----------------+
                          | jvt.me          |      +--->|      jvt.me     |
                          + staging.jvt.me  +      |    +-----------------+
                          | review.jvt.me   |------+
                          +-----------------+      |    +-----------------+
                                                   +--->|  staging.jvt.me |
                                                        |  review.jvt.me  |
                                                        +-----------------+

Exploring “Definition of Done” + Workflow

Exploring “Definition of Done” + Workflow (cont)

Exploring GitLab Review Apps

I.e. https://feature-readable-inline-code-snippets.www.review.jvt.me/

Exploring Quality gates

  • is my site well formed?
  • do the links always resolve somewhere?
  • do the posts, projects and talks have all the correct metadata?
bundle exec rake validate
bundle exec jekyll doctor -d _site
gulp imagemin
bundle exec rake images_changed?
bundle exec rake test
# test:links
# test:git_casing

Automated Pipleines with CI

  • build
  • test
  • deploy

Putting on the project management hat

What’s next?

+ Stop self-hosting

+ 107 open issues!

Recap

  • Deployments
  • Infrastructure-as-code
  • Issue tracking / ways of working
  • Release and quality gates

Blog post coming soon https://gitlab.com/jamietanna/jvt.me/issues/285

How not to do it?

Questions?

@jamietanna