computerscot.github.io

Website without JavaScript

July 31, 2023

This is a method for building a website that works without JavaScript. It uses Hugo with the yihui/hugo-xmin theme. Since that theme includes a full example site, a working website can be produced very quickly.

Install prerequisites

You need to start out with a small Ubuntu 22.04 VPS. 1 GB of RAM is plenty.

Get your server up to date, and install Git and Nginx:

apt update && apt upgrade -y
apt install -y git nginx

Install Hugo

Install Hugo extended from whatever is the latest release at https://github.com/gohugoio/hugo/releases:

wget https://github.com/gohugoio/hugo/releases/download/v0.115.3/hugo_extended_0.115.3_Linux-64bit.tar.gz
tar -xf hugo_extended_0.115.3_Linux-64bit.tar.gz
cp hugo /usr/local/bin/
hugo version

Typical response:

hugo v0.115.3-5c2e014a5150553a9fa4f9c1eb7dc4db89c0f1ab+extended linux/amd64 BuildDate=2023-07-13T16:11:34Z VendorInfo=gohugoio

Create site

With just a few commands, you can initiate a hugo site named quickstart.

hugo new site /var/www/quickstart
cd /var/www/quickstart
git init

Install theme

There are a few choices for no-JavaScript or low-JavaScript themes that render even with JavaScript disabled in the client browser. The first tutorial used de-souza/hugo-flex. Another choice would be stevenengler/no-js-hugo-theme. Here we will use yihui/hugo-xmin and remove the JavaScript from it.

git submodule add https://github.com/yihui/hugo-xmin.git themes/hugo-xmin
cp -r themes/hugo-xmin/exampleSite/* .
rm hugo.toml

Generate public HTML

hugo

The last command generates your public HTML in the public directory underneath quickstart. Therefore edit the default Nginx server block inside /etc/nginx/sites-available/default. Make the web root point to your Hugo public HTML:

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	root /var/www/quickstart/public;

	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		try_files $uri $uri/ =404;
	}
}

Reload Nginx with this configuration:

systemctl reload nginx

If you want your site to be super-secret, you would never open port tcp/80 to the public in your firewall. But if you are okay with some public exposure, then at this stage you can open port tcp/80, and check how your site looks by pointing at your server's IP address.

Hugo theme yihui/hugo-xmin example site

Remove JavaScript

Edit the file layouts/partials/foot_custom.html. Delete all the lines in it, but save the resulting empty file.

Regenerate the public HTML:

hugo

You will see that the math equation does not render without JavaScript, but that is okay, providing you're not intending to include math equations in your final content.

Optionally simplify fonts

To produce a consistent appearance across all platforms, simplify the fonts to just the most basic. Create a directory for overriding CSS:

mkdir static/css
cp themes/hugo-xmin/static/css/fonts.css static/css/

Edit the file static/css/fonts.css. Make it look like this:

body {
  font-family: sans-serif, sans-serif;
}
code {
  font-family: monospace, monospace;
  font-size: 85%;
}

Save the file. Regenerate the public HTML:

hugo
Hugo theme yihui/hugo-xmin example site with simplified fonts

Next steps

At this point you can take your site in different directions: