Building the Scientist Rebellion website

It took me a while to do this so I thought it would be worth documenting how I did it for others.

Hetzner initial setup

• Make an account with Hetzner.
• Go to console.hetzner.cloud.
• Rename the default project if you feel like it, then click on it.
• Click add server. Default settings are fine:
  • I went for Ubuntu 20.04 because that's what I'm used to.
  • 40 GB storage + 4 GB RAM + 20 TB of traffic seemed like more than enough.
  • You don't need to add a volume! (Unless you eventually need more storage).

You'll be emailed the root password. You can ssh into the server using the given IP address:

ssh root@95.216.161.26 # Replace this number with the IP address that's sent to you

Make a new sr user with sudo privileges:

adduser sr
usermod -aG sudo sr
sudo usermod -a -G www-data sr # Possibly do this later
su - sr # login to sr

You may want to change some ssh settings, particularly to not allow root login and possibly also to change the SSH port.

sudo nano /etc/ssh/sshd_config

The next login you'll do:

ssh sr@95.216.161.26
ssh sr@scientistrebellion.be # Once you've set up the domain name

Let's install and set up Grav and Nginx now. I'm following this tutorial. The commands are listed below (a lot of them should be prefixed with sudo to run with root privileges):

apt-get install nginx php php-cli php-fpm php-common php-curl php-gd php-json php-mbstring php-xml php-zip php-opcache php-apcu unzip -y
php --version # should be 7.4
nano /etc/php/7.4/fpm/php.ini # Change the following lines:

memory_limit = 256M
upload_max_filesize = 100M
max_execution_time = 360
max_input_vars = 1500
date.timezone = Europe/Brussels

systemctl restart php7.4-fpm
cd /var/www/html
wget https://getgrav.org/download/core/grav-admin/1.7.34 # Update with the latest version of grav, see https://getgrav.org/downloads
unzip 1.7.34
mv grav-admin grav
chown -R www-data:www-data /var/www/html/grav
nano /etc/nginx/conf.d/grav.conf # and change the following lines

server {

listen 80;

server_name scientistrebellion.be;
root /var/www/html/grav;

index index.html index.php;

location / {
   try_files $uri $uri/ /index.php?$query_string;
 }

   location ~* /(\.git|cache|bin|logs|backup|tests)/.*$ { return 403; }
   location ~* /(system|vendor)/.*\.(txt|xml|md|html|yaml|yml|php|pl|py|cgi|twig|sh|bat)$ >
   location ~* /user/.*\.(txt|md|yaml|yml|php|pl|py|cgi|twig|sh|bat)$ { return 403; }
   location ~ /(LICENSE\.txt|composer\.lock|composer\.json|nginx\.conf|web\.config|htacces>

location ~ \.php$ {
   fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
   fastcgi_split_path_info ^(.+\.php)(/.+)$;
   fastcgi_index index.php;
   include fastcgi_params;
   fastcgi_param SCRIPT_FILENAME $document_root/$fastcgi_script_name;
 }

}

nginx -t # Check for errors
systemctl restart nginx # I had issues here, so I had to kill and uninstall apache
sudo netstat -tulpn # Find apache PID
sudo kill -2 apache_pid # Kill it
sudo systemctl stop apache2 # Also works
sudo systemctl disable apache2 # I think for startup entries?
sudo apt remove apache2 # Removes apache
sudo apt autoremove # cleanup
systemctl restart nginx # I had issues here, so I had to kill and uninstall apache

• Also set up LetsEncrypt:

apt-get install python3-certbot-nginx -y
certbot --nginx -d scientistrebellion.be # for prompts: A then Y then 2.

That's it! You can start setting up by going to 95.216.161.26 (the IP address of the server), though once you've setup the domain name you'll be able to go to scientistrebellion.be, so let's do that first.

Domain name set up

• Buy the domain / login on GoDaddy.com
• Go to DNS settings (Domeininstellingen -> DNS-beheer).
• For A-name, replace the value with your IP address e.g. 95.216.161.26

Done!

Grav setup

Initial

• Go to 95.216.161.26 in your browser, or scientistrebellion.be if it works already.
• Choose a theme. I went with quark, because the documentationr refers to it specifically and it allows you to drag and drop a header logo (which I appreciate).
• Install sass (maybe, I did this but then I'm not sure if I used it in the end):

cd /opt/
sudo wget https://github.com/sass/dart-sass/archive/refs/tags/1.53.0.zip
sudo unzip 1.53.0.zip
sudo nano /etc/profile # Add to path: export PATH="/opt/dart-sass-1.53.0:$PATH"
export PATH="/opt/dart-sass-1.53.0:$PATH"
sass source/stylesheets/index.scss build/stylesheets/index.css # Example useage, you need to learn scss first though

Theme customisation: changing the font

We want to use the Scientist Rebellion fonts, JetBrains mono and Linux Biolinium:

cd /var/www/html/grav/user/data
mkdir fonts
cd fonts
wget https://github.com/JetBrains/JetBrainsMono/releases/download/v2.242/JetBrainsMono-2.242.zip
unzip JetBrainsMono-2.242.zip
mv fonts JetBrainsMono # Rename that folder
# For Linux libertine, you'll have to do the same but copy paste the files from the sourceforge link: https://sourceforge.net/projects/linuxlibertine/
# To copy paste, you'll need to sftp into your server e.g. using FileZilla. 
# You may also want to use these files, which are in .woff format: http://linuxlibertine.sourceforge.net/fonts/
wget linuxlibertine.sourceforge.net/fonts/LinBiolinum_R.woff
wget linuxlibertine.sourceforge.net/fonts/LinBiolinum_RI.woff
wget linuxlibertine.sourceforge.net/fonts/LinBiolinum_RB.woff
wget linuxlibertine.sourceforge.net/fonts/LinLibertine_RBI.woff

Once we've done that, we want to apply this font to our CSS. We'll do this using theme inheritance. We're following the instructions here.

You probably have to fix permissions for the sr to use dev-tools CLI. See here and also the following commands:

#!/bin/sh
chown -R sr:www-data .
find . -type f -exec chmod 664 {} \;
find ./bin -type f -exec chmod 775 {} \;
find . -type d -exec chmod 775 {} \;
find . -type d -exec chmod +s {} \;

Note: the command From within the grav folder (/var/www/html), do:

bin/plugin devtools quark_sr # Remember to choose `inheritance` during the prompt questions.

I assume now that you've followed the documentation and got to the stage where you've created your _custom.scss file, added @import theme/custom to your theme.scss in user/themes/quark-sr/scss/theme.scss, you've installed npm, yarn and gulp). From the terminal, run gulp watch for automatic compilation of you scss files. What we want to do now is to change the fonts for the webpage to those of Scientist Rebellion (see above).

At this point, I must admit I struggled. I'm not familiar with SCSS (or how it's different from Sass), and honestly I don't care too that much. The following tips may help those in the same position:

• The default! argument for variable definition in SCSS appears to not let you overwrite existing variables, so don't use it.
• The order in which you do @import matters, but again, the variable overriding is a bit confusing.
• When pointing to local files for the fonts, keep in mind that eventually the compiled CSS will appear in quark-sr/css, so the paths should be defined relative to there and not quark-sr/scss/theme. I eventually ended up with the following theme.scss file:

// Core variables and mixins
@import 'theme/font_definitions';
@import 'theme/variables';
@import '../../quark/scss/theme/variables';
@import '../../quark/scss/spectre/variables';
@import '../../quark/scss/spectre/mixins';

@import 'theme/fonts';
@import '../../quark/scss/theme/mixins';
@import '../../quark/scss/theme/framework';
@import '../../quark/scss/theme/typography';
@import 'theme/typography';
@import '../../quark/scss/theme/forms';
@import '../../quark/scss/theme/mobile';
@import '../../quark/scss/theme/animation';

@import '../../quark/scss/theme/header';
@import '../../quark/scss/theme/footer';
@import '../../quark/scss/theme/menu';

// Extra Skeleton Styling
@import '../../quark/scss/theme/blog';
@import '../../quark/scss/theme/onepage';

@import 'theme/custom';

Font definitions (adapted from here and here (see this for how I got the first code link))

$jb-fonts-path: "../fonts/JetBrainsMono";
$lb-fonts-path: "../fonts/LinLibertine";

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 100;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-Thin.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-Thin.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 200;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-ExtraLight.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-ExtraLight.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 300;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-Light.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-Light.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 400;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-Regular.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 500;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-Medium.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-Medium.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 600;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-SemiBold.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 700;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-Bold.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: normal;
  font-weight: 800;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-ExtraBold.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
}

// italic fonts

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 100;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-ThinItalic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-ThinItalic.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 200;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-ExtraLightItalic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 300;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-LightItalic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-LightItalic.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 400;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-Italic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-Italic.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 500;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-MediumItalic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 600;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-SemiBoldItalic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 700;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-BoldItalic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: JetBrainsMono;
  font-style: italic;
  font-weight: 800;
  src: url($jb-fonts-path + "/ttf/JetBrainsMono-ExtraBoldItalic.ttf") format("truetype");
  src: url($jb-fonts-path + "/webfonts/JetBrainsMono-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: LinBiolinum;
  /* normal */
  src: url($lb-fonts-path + '/LinBiolinum_R.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: LinBiolinum;
  /* italic */
  src: url($lb-fonts-path + '/LinBiolinum_RI.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: LinBiolinum;
  /* bold */
  src: url($lb-fonts-path + '/LinBiolinum_RB.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: LinBiolinum;
  /* bold */
  src: url($lb-fonts-path + '/LinLibertine_RBI.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}

You will have to change the path of the fonts to match where you put them, e.g. in /var/www/html/grav/user/data/fonts/JetBrainsMono or similar (/usr/share/fonts is also a typical place to put fonts.).

New variable definitions:

$base-font-family: "LinBiolinum", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
$mono-font-family: "JetBrainsMono", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;

Typography:

// Paragraphs
p {
  font-family: $base-font-family;
}

The font changes are not applied everywhere, e.g. the links are still in some very boring sans serif, but this is good enough for me at this point.

Changing the favicon

• Download the extinction symbol with warming stripes from [here]().
• Create a favicon using e.g. this generator.
• Upload it to the server, e.g. using SFTP and FileZilla.
• Put it in /var/www/html/grav/user/themes/quark-sr/images/favicon.png.
  • The naming and location is very important!!! If you've done the theme inheritance right, this will overwrite the grav favicon.
  • I had issues copy pasting the image directly into the images folder, so I had to used sudo mv favicon.png images/favicon.png in the end.