Making this blog

Posted on 9 June 2023, last changed on 7 December 2024

This blog is a glorified markdown processor, so in this post I'll explain how to make a markdown site similar to mine.

Requirements

1: Set up project and HTML template.

First, we need to initialize the project. To do that, run these commands:

mkdir mymd && cd mymd
mkdir md
touch index.html
touch style.css
touch Caddyfile
cd md
touch error.md
touch .md

Now we can make an HTML+template file to do the following:

Luckily, I've already made this file for you here, so you can copy-paste it into your index.html:

<!DOCTYPE html>
{ { $filePath := printf "/md%s.md" .OriginalReq.URL.Path } }
{ { if not ( fileExists $filePath ) } }{ { $filePath = "/md/error.md" }}{ { end } }
{ { $file := ( include $filePath | splitFrontMatter ) } }
{ { $title := default $filePath $file.Meta.title } }
<html lang="en">
  <head>
    <title>{ { $title } } | MyMD</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 fill=%22%2360af94%22 font-size=%2290%22>🐢</text></svg>">
    <link rel="stylesheet" href="/style.css" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <header aria-labelledby="tm">
      <p id="tm">my markdown thingie!</p>
      <nav><a href="/">home</a> · <a href="/list">list</a></nav>
    </header>
    <main>
    	<h1 id="maintitle">{ { $title } }</h1>
	    { { markdown $file.Body } }
    </main>
  </body>
</html>

Now we can save this and leave for now. (Remember to remove the spaces in the curly brackets, I did that as to not recurse the templating.) (You can do more than this, this is a basic example!)

Step 2: Basic styling

Now you can style the project. I reccomend at least adding dark mode support, fixing images, and making it easier to read. Here's how I'd do that:

:root {
    --fg: #181818;
    --bg: #fafafa;
}
@media only screen and (prefers-color-scheme: dark) {
    root {
        --fg: #fafafa;
        --bg: #181818;
    }
}
body {
    color: var(--fg);
    backround-color: var(--bg);
    max-width: 50rem;
    margin: 0 auto;
    padding: 1rem;
}
img {
    width: 100%;
}
#tm {
    font-size: 2rem;
    margin: 0;
}

(You may also come back and do more advanced styling once you're finished!)

3: Initialize Caddy

In the Caddyfile, put this:

{domain} {
    templates
    root * {path to directory}
    handle_errors {
        templates
        rewrite * /index.html
        file_server
    }
    file_server
}

Replace {domain} with your domain (that's pointed at your server) and {path to directory} with the folder location of your markdown project on your vps. Now we can run caddy start and focus our attention on the markdown.

4: Markdown time!

For our special titles to work, we can't just put a # before the title. We have to do this on the very top of each file (yes, even the home and error files):

---
title: My Special Title
---

With this in mind, write the following files for these purposes:

Now your site should be ready to visit! I hope this has been helpful to you.