The Monospace Web

Monospace fonts are dear to many of us. Some find them more readable, consistent, and beautiful, than their proportional alternatives. Maybe we’re just brainwashed from spending years in terminals? Or are we hopelessly nostalgic? I’m not sure. But I like them, and that’s why I started experimenting with all-monospace Web.

Here are a few example websites built using the Monospace Web:

• Official Website: https://owickstrom.github.io/the-monospace-web/
• Lucien Hinderling's Website : https://hinderling.github.io/
• AZETTL Websolutions: https://azettl.net/

Installation & Usage

👩‍💻 Advanced Users

1. Clone the repository.
2. Build using Nix:

nix develop # or `direnv allow .`
make

🙍‍♂️ Regular Users

1. Install Pandoc. If you are running Windows, the version of the installer that you want is windows-x86_64.
2. Ignore the other dependency. It has no easy install method and all it does is automatically refresh your website when you make edits.
3. From this repository, download the following files:
   • reset.css (This file ensures everything works, don't touch it)
   • index.css (This file controls the visual style for the website, modify only if you understand CSS)
   • template.html (This defines the structural layout for Monospace Web, don't touch it unless you understand HTML)
   • To download files from a repository, click on its name and it will allow you to inspect the individual file, then, on the right side of the page there should be a tiny button (next to a button that says "RAW") to download it.
4. Create a folder anywhere in your computer and place the downloaded files inside. Your website will live here.
5. Create your website as a markdown file, using Pandoc's markdown formattng. Here is an example file, compare it to the live website to figure out what makes what. You can also click here to see a more in-depth formatting guide.
6. Open your command line, navigate to your project's folder, and write the following command pandoc --toc -s --css reset.css --css index.css -i yoursourcefile.md -o output.html --template=template.html
   • You'll need to replace the file names with your own.
   • You can and should automate this process with a batch script.
7. Congratulations! Open output.html to see your built website!

License

MIT