114 lines
3.6 KiB
Markdown
114 lines
3.6 KiB
Markdown
---
|
|
title: Creating a Personal Website with Jekyll
|
|
author: cscherr
|
|
date: 2024-04-11 21:30:00 +0200
|
|
categories: [Hosting, Blogging]
|
|
tags: [jekyll]
|
|
---
|
|
|
|
If you're someone like me and like to host various services, you might also want
|
|
to have your own personal website. There are many approaches to this, for
|
|
example you could use a <abbr title="Content Management System">CMS</abbr> like
|
|
[WordPress](https://wordpress.org) or [ghost](https://ghost.org), you could use
|
|
a static site generator like [Jekyll](https://jekyllrb.com/) (that's what GitHub
|
|
Pages use) or you could program your own site if you want.
|
|
|
|
I've tried a bit of all of them, but it never really worked for me. Eventually I
|
|
landed on Jekyll, so this is also where you're reading this on now. To be honest,
|
|
I don't have too much expertise on the topic, but I made it work, and a Blog
|
|
needs posts.
|
|
|
|
## Pros of Jekyll
|
|
|
|
### Dead Simple
|
|
|
|
Usage of Jekyll is really easy in my opinion. You kind of just write markdown
|
|
files and add some front matter. That is if you're using a pre-made template
|
|
of course, you can make it as complicated as you want, just note that Jekyll
|
|
generates static sites, so no fancy server side computation.
|
|
|
|
### A lot of modern themes
|
|
|
|
There are a lot of modern and good-looking themes for Jekyll. At the time this
|
|
post is written, cscherr.de uses [chirpy](https://github.com/cotes2020/jekyll-theme-chirpy).
|
|
|
|
A large collection of Jekyll themes can be found
|
|
[here](http://jekyllthemes.org/) (note: this site does not use HTTPS for
|
|
some reason).
|
|
|
|
## Cons of Jekyll
|
|
|
|
### Multilingual sucks
|
|
|
|
With the chirpy theme at least, I couldn't get Multilingual content to work
|
|
without going into the rabbit hole. You can select from a good amount of main
|
|
languages, but you cannot have multiple versions of your website for various
|
|
languages in a single project.
|
|
|
|
Various projects for multilingual Jekyll sites exist, but the only one that
|
|
seems to be still maintained is [polyglot](https://github.com/untra/polyglot).
|
|
|
|
## Deployment with Docker
|
|
|
|
The "official" Jekyll Docker container is unmaintained since 2022, so if you
|
|
want to deploy Jekyll with docker you need to create your own container. I based
|
|
this on the standard [ruby image](https://hub.docker.com/_/ruby/).
|
|
|
|
We can use a `Dockerfile` like this:
|
|
|
|
```Dockerfile
|
|
# syntax=docker/dockerfile:1
|
|
FROM ruby:3.2
|
|
WORKDIR /app
|
|
|
|
# Add a script to be executed every time the container starts.
|
|
COPY entrypoint.sh /usr/bin/
|
|
RUN chmod +x /usr/bin/entrypoint.sh
|
|
ENTRYPOINT ["entrypoint.sh"]
|
|
EXPOSE 4000
|
|
```
|
|
{: file="Dockerfile" }
|
|
|
|
We need to mount our Jekyll project to `/app`, it is not included with this
|
|
Dockerfile.
|
|
{: .prompt-tip }
|
|
|
|
```bash
|
|
#!/bin/bash
|
|
set -e
|
|
|
|
git config --global --add safe.directory /app
|
|
rm -f /app/tmp/pids/server.pid
|
|
gem update --system
|
|
bundle install
|
|
|
|
# Then exec the container's main process (what's set as CMD in the Dockerfile or
|
|
# as command in the docker-compose.yml).
|
|
exec "$@"
|
|
```
|
|
{: file="entrypoint.sh" }
|
|
|
|
We can then use a `docker-compose.yml`{: .filepath} file to deploy our config
|
|
|
|
```yaml
|
|
services:
|
|
jekyll:
|
|
build: .
|
|
volumes:
|
|
- .:/app
|
|
container_name: jekyll
|
|
ports:
|
|
- 127.0.0.1:4000:4000
|
|
command: bundle exec jekyll serve --host 0.0.0.0 --port 4000 --liveserve
|
|
```
|
|
{: file="docker-compose.yml" }
|
|
|
|
> Remove the `--liveserve` flag for production environments, or if hosting with a
|
|
> reverse proxy. Be sure to rebuild the image if needed. Otherwise, the
|
|
> connection might wait for the `liveserve` port (which will probably not exist).
|
|
{: .prompt-warning }
|
|
|
|
Now you should be able to start the docker container with Jekyll inside by using
|
|
`docker compose up`. Access your site on [localhost:4000](http://localhost:4000)
|
|
.
|