Giter VIP home page Giter VIP logo

fjeremic.github.io's Introduction

jeremic.ca

Personal website of Filip Jeremic. Statically built using Hugo and congo. Deployed using GitHub Actions and GitHub Pages in a Dockerized environment.

Docker

The Dockerfile in the root of the repository builds a docker image with the exact dependencies needed to generate the static website. The GitHub Actions automation which builds and deploys the website is built using the same docker image.

Setup

We first build the docker image:

docker build . -t jeremic.ca

Next we initialize the git submodule which will clone the Hugo theme:

git submodule init
git submodule update

Next we need to install the theme dependencies by mounting the current repository inside the docker container:

docker run -v $PWD:/$PWD -w $PWD/themes/congo -it jeremic.ca npm install

Build

To build the site we need to first invoke the Tailwind CSS JIT compiler to parse the website and theme contents and generate the CSS file from a union set of all CSS classes used. Following the CSS generation we invoke the Hugo build system to generate the static website.

We can use the same script that is used by the automation to accomplish this:

docker run -v $PWD:/$PWD -w $PWD -it jeremic.ca .github/actions/hugo-build/action.sh

Alternatively we can manually invoke the two steps:

docker run -v $PWD:/$PWD -w $PWD -it jeremic.ca npm run tailwind-build
docker run -v $PWD:/$PWD -w $PWD -it jeremic.ca npm run hugo-build

The static website is generated in the ./public directory.

Watch

When making changes to the website it is inconvenient to have to build and serve the website after each change. Instead we can launch two processes in our docker container which will watch for any changes to our website and automatically rebuild and serve the content. We can use two terminal shells to invoke the following two commands:

docker run -v $PWD:/$PWD -w $PWD -it jeremic.ca npm run tailwind-watch
docker run -v $PWD:/$PWD -w $PWD -p 8000:8000 -it jeremic.ca npm run hugo-watch

LaTeX

We purposely don't install the Linux LaTex packages in the Dockerfile because it bloats the image size unnecessarily. We can install the LaTex packages manually and build the Resume inside the docker container as follows:

# Run the docker container as an interactive shell
docker run -v $PWD:/$PWD -w $PWD -it jeremic.ca /bin/bash

# Install LaTeX
apt-get install -y texlive texstudio

# Build the Resume
pdflatex Filip-Jeremic-Resume.tex

fjeremic.github.io's People

Contributors

fjeremic avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

engelsjk gemboost

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.