Building this Website

How I build, deploy and host my personal website

A handsome young man (me).
Jakob Maier
Aug 7, 2022

Why even have a website?

I maintain this website for a couple of reasons. First, I enjoy learning about web technology, and the best way to learn is by trying stuff out. Second, I often like to work on small projects, which I can then show to people on this website.

Static site generator

To build this website I use Eleventy as a static site generator. While not quite as popular as Jekyll Eleventy requires Node instead of Ruby. I am very familiar with Javascript/Node, so this is perfect.

Styling

For styling I use Tailwind CSS. I used to use Bootstrap, but switched because Tailwind is more flexible and just looks better.

Javascript

This website is 99% static and so it barely needs any Javascript. When I do need it though I use Alpine.js, a flexible and declarative framework. It has a syntax very similar to Vue, but is much more lightweight.

Hosting

This website is hosted on a small virtual private server from Alwyzon, a hosting provider from Vienna, Austria. I learned about this provider from LowEndBox and due to it being located so close to where I live it is the perfect fit. Of course, since this is a purely static site I could also host on github pages, which would be free. However I have some other websites and projects that need hosting, and so having a dedicated server has some advantages.

Deployment

The deployment of this website is done using GitHub actions. This way, any changes pushed to the master branch are automatically published on my website. In fact, you may have noticed that I have this little "edit this page" link on every page. When I click on this link it opens the page in my github repository in edit mode, where I can immediatly make my changes to the markdown files. Github even provides a Preview when using markdown, which is just really convenient. I can then commit my changes and it will be published using Github Actions within about 30 seconds. This way I get a full blown CMS with zero effort by just using Github + Github Actions.

This is the Github Action I use:

name: Build & Deploy

on:
  push:
    branches: [ "master" ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - name: checkout repository
      uses: actions/checkout@v3
      
    - name: Checkout submodules
      run: git submodule update --recursive --init

    - name: build website 
      uses: actions/setup-node@v3
      with:
        node-version: '18.x' 
    - run: npm ci
    - run: npm run build

    - name: deploy to server 
      uses: appleboy/scp-action@master
      with:
        host: $
        username: $
        key: $
        port: $
        rm: true
        source: "_site/*"
        target: "/var/www/dev"
        strip_components: 1

Back to Top

Edit This Page

© 2022 Jakob Maier