
Four months into a medical thing, the summary of which is “the human body can be spontaneous and inconvenient”. Still got a way to go yet, and much of my time and energy is spent doing some sort of pain management. It is exhausting. I have reduced endurance, increased malaise, and just about everything is a chore as I retrain myself back into having focus and being functional, and I’m hanging out to get back to some of the fitnessy stuff I used to do.

So, how can I make other parts of my life suck less?

## Infrastructure

I run a bunch of websites from various projects I have accumulated over the years.

I have plans for the ones which were on WordPress to be migrated *somewhere*. I’ve got nothing against WordPress. It’s a great CMS that’s highly extensible, but for most of my clients I feel there are better options for what they want to do that they can self-manage. For my own projects, I’m trying to reduce the amount of time I spend on administrative tasks, and WordPress management is something I simply don’t want to do anymore. I’m leaning towards Ghost or some other headless CMS. It’s been a while since I reviewed this and I need to address it before the renewal date of my VPS.

This website and my podcast websites for [STEAM Powered](https://www.steampoweredshow.com) and [The Rejection Economy](https://www.rejectioneconomy.com) used to be on [Gatsby](https://www.gatsbyjs.com/). But as I’ve been doing other development with [NextJS](https://nextjs.org/) and rather like it, a while ago [Michele Ong](https://www.micheleong.com) was moved to that combination as a trial. This was nice. So last weekend STEAM Powered was migrated, and this weekend The Rejection Economy joined the fold. Both podcast websites now share the same code structure and an almost identical theme for consistency and ease of maintenance.

The podcast content is also managed using [Sanity.io](http://Sanity.io) as a headless CMS with an API that I intend to leverage so that I can automate website updates when I release new episodes. More about this on [Ask Me About My Podcast](https://askmeaboutmypodcast.substack.com/) when I get around to implementing it.

After the success of the migrations to NextJS, there is a strong possibility that those WordPress sites will also be moved to NextJS with markdown for the content. Given they’re being managed for posterity and will no longer be updated, I’m looking for something as low effort and maintenance as possible.

## Administrative

### CRM

I used to host my podcast email accounts on Gmail with custom domains. For Reasons(TM), I’ve now shifted to other mail providers. When I was using Gmail, I also used [Streak](https://www.streak.com/) as my CRM for managing my guest communication workflows. Streak is great and does exactly what I need it to, and helps me keep on top of my various lines of communication, but doesn’t seem to have a non-Gmail dependent version. So I needed a replacement.

A few platforms offer companion CRM services, but I’d rather have something that isn’t bound to the mail service.

I’ve been using [Notion.so](http://Notion.so) on and off for a few years and rather like the idea of being able to have my notes and documentation in one place. I also happened upon this [Simple CRM Dashboard](https://www.notion.so/7fd27cd680bc46119cf470d93eab3791?pvs=21) template (detailed post by its creator [here](https://zapier.com/blog/notion-crm/)) which meets my needs with a few minor adjustments and I’m trying it out as part of my workflow. Will see how it goes.

### Content

As a content creator, I also have a tendency to jot down ideas for things to write or talk about, but don’t quite get around to executing them due to the mound of other things on my list. Also, once it’s jot down, it is not longer plaguing my brain so I forget about doing anything about it.

As part of my shift to using [Notion.so](http://Notion.so) more for documentation and as a CRM, I also found a default template [Content Calendar](https://www.notion.so/templates/content-calendar) (under the Marketing category) which now gives me a repository for dumping all of my content ideas, but also allows me to see them in context with each of my content mediums so that I can know what’s floating about waiting to be written and get them actively into a publishing workflow that’s also calendared for scheduling.

This post is first off the ranks with this new workflow so we’ll see how that holds up over time as well.

### Research

One other thing I’ve struggled with is that I treat my wanderings on the internet as a learning exercise, but without any real structure, so I have hundreds of open bookmarks across multiple browser workspaces, other things stashed in places like Instapaper, Pocket, and similar bookmarking services, and other media like podcasts saved and marked in other random and unhelpful ways.

It is not uncommon for me to be in conversation with someone, be reminded of something I saw or read online a while ago, and have no reasonable way of locating that article or bit of media again. Very frustrating.

But I learned about [Zotero](https://www.zotero.org/). It’s a research tool, often used by academics, but if you do research for anything, be it as an author, screenwriter, or in my case, science communication, interviews, and general knowledge hoarding, this is a great repository for storing all sorts of things you may find online or otherwise digitally. It’s fantastic and I can tag and note and search for things I’ve stumbled on to my heart’s content, provided I diligently add things I think may come in handy later.

## Conclusion

Baby steps, but perhaps this will help nudge me back into thoughtfully managed productivity.

Also, much love for Zotero.

An revision of tools for improved productivity and workflow management.

Recently, in workflow optimisation


I have a few old self-hosted [WordPress](https://wordpress.org/) sites that need to be migrated off a VPS. I’m still
happy with the content and don’t want to just dump them, but I also don’t want to have to keep managing a WordPress
installation for what are now static sites.

The core requirements for my migration are:

1. Markdown support
   No more fussing with a database or headless CMS. I need flatfile.
2. URLs to match WordPress
   Some of my posts seem to get hits still and perform quite well, I don’t want to mess with the SEO or anyone’s
   bookmarks.
3. Colocated images
   One thing that drives me batty about a lot of these frameworks is the poor support for colocated images with posts.
   Why is this such a massive issue?
4. Off the shelf themes, preferably [TailwindCSS](https://tailwindcss.com/) because that’s what I’m using predominantly
   at the moment, but I’ll take anything nicely structured and easy to manage and tweak.

I’ve been using [NextJS](https://nextjs.org/) for most of my other projects, but those have more complexity, this is
just a blog. NextJS feels like overkill.

[Zola](https://www.getzola.org/) seemed like a good idea at first glance, but they don’t support permalink
customisations, and the structure is quite restrictive. The themes available are also thin on the ground and mostly
unsuitable for what I wanted.

Searches suggested [Eleventy](https://www.11ty.dev/), although there are several complaints about the challenges of
colocation of images, usability of documentation, amongst other things. I have taken a look at it before as a framework
for my other sites, but as others noted, the documentation isn’t as approachable as with other frameworks.

That said, a starter is worth a shot and there
is [this helpful guide](https://www.smashingmagazine.com/2020/12/wordpress-eleventy-static-site-generator/) by Scott
Dawson for migrating WordPress to Eleventy and deploying to [Netlify](https://netlify.com/), which is exactly what I
intended to do.

And thus, we press on. Or unWordPress on.

## Step 1. Export WordPress

Use the built in WordPress export tool to dump the entire site to xml.

## Step 2. Convert WordPress export to markdown

Thank goodness for tools
like [`wordpress-export-to-markdown`](https://github.com/lonekorean/wordpress-export-to-markdown).

Does exactly what it says on the tin. I used the options to create year, month, and individual post directories, save
the attachments and scrape for external images.

## Step 3. Set up Eleventy

The guide by Scott Dawson recommended a different starter project, but I
found [vredeburg](https://github.com/daflh/vredeburg) which incorporates TailwindCSS and looks almost the way I want for
a simple blog.

Clone it.

The theme works as is out of the box, but you can’t quite just drop in your converted posts. Will get to that shortly.

Still, you can move the converted posts in now. Copy the converted `output/posts/` into `src/posts/`. The conversion
also puts pages in date folders but they don’t need to be in that structure in Eleventy, so copy the leaf folders
in `output/pages/` into `src/`.

### Site configuration

- Update `_site/author.json` and `_site/site.js` with your own details.
- Update `menu.json` with your intended navigation items.
- Update `tailwind.config.js` to suit your tailwind theming preferences.
- Update the images in `src/assets/img`.

Easy enough.

## Step 4. Image colocation support

This is the where the bulk of the work needs to occur.

1. Install the following packages:

    ```jsx
    npm i -D markdown-it-modify-token
    ```

2. Update `eleventy.config.js`with (comments inline):

    ```jsx
    // Import this
    const modifyToken = require('markdown-it-modify-token');
    
    module.exports = function (config) {
        ...
      // Pass a custom instance of markdownIt into eleventy.
      config.setLibrary("md", markdownIt({
          // html, breaks, and linkify are default options from eleventy.
          html: true,
          breaks: true,
          linkify: true,
          // This will prepend the colocated image path with the built asset path
          modifyToken: function (token, env) {
            switch (token.type) {
              case 'image':
                // Only apply this transform to relative image paths
                // Regex explained: https://regex101.com/r/EM83AR/1
                if (token.attrObj.src.match(/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/).*/)) {
                  // https://www.11ty.dev/docs/data-eleventy-supplied/#filepathstem
                  const stem = env.page.filePathStem.split(path.sep);
                  stem.pop();
                  token.attrObj.src = path.resolve(stem.join(path.sep), token.attrObj.src)
                }
                break;
            }
          }
        })
          .use(modifyToken)
      );
    
      // This copies your images from where they are colocated to a similarly pathed location in `dist`
      // It allows the modifyToken above and colocatedImagePath filter below to work.
        config.addPassthroughCopy('src/posts/**/images/*');
        
      // This adds a filter that performs a similar transform as modifyToken that you can use in templates
      config.addFilter('colocatedImagePath', (src, filePathStem) => {
        const stem = filePathStem.split(path.sep);
        stem.pop();
        return src ? path.resolve(stem.join(path.sep), src) : '/assets/img/no-image.svg';
      });
        ...
    };
    ```

This allows you to colocate your images and makes pointing them to the right place in `dist` build’s problem and not
yours.

You can keep using `![]()` syntax and it will ‘just work’, however, the WordPress conversion will

In the `post-grid.njk` partial or wherever you put your post loop, you can also modify the cover image tag to use
the `colocatedImagePath` filter:

```html
<img src="{{ post.data.coverImage | colocatedImagePath(post.filePathStem) }}" alt="{{ post.data.title }}" />
```

## Step 5. Update markdown files

There are a few changes you will need to make to your markdown, sorry.

1. If you use WordPress galleries, you will have to manually convert the shortcodes to markdown image syntax and map the
   asset IDs to the colocated files.
2. If WordPress uses a resized image instead of the original, you will need to remove the `-widthxheight` portion of the
   filename. You can use a regex here.
3. You will need to search for any other shortcodes to replace them with something else.
4. None of my `code` or `pre` content seems to have been converted into markdown. Those had to be found and wrapped with
   the necessary backticks.
5. I had some draft posts, apparently. These get converted
   by [`wordpress-export-to-markdown`](https://github.com/lonekorean/wordpress-export-to-markdown) without a clear
   indication that they’re draft. I didn’t want to publish them, but they were fleshed out enough that I didn’t want to
   delete them either. For each of these I added `draft: true` to the frontmatter, snaffled `eleventy.config.drafts.js`
   from [`eleventy-base-blog`](https://github.com/11ty/eleventy-base-blog) and updated `eleventy.config.js` to use it:

    ```jsx
    const pluginDrafts = require("./eleventy.config.drafts.js");
    
    module.exports = function(eleventyConfig) {
        ...
        eleventyConfig.addPlugin(pluginDrafts);
        ...
    };
    ```

## Step 6. Implement categories and tags

Eleventy uses ‘tags’ to represent the internal collections. Apparently, it’s not taxonomy the way categories and tags
are used in WordPress. To keep these separate, you can create a new collection for them.

Replace frontmatter references to `tags` with `hashtags` to give them a separate namespace. You can use a regex here.

The following gist contains the collection definitions, their paged equivalents, as well as sample index and individual
pages for each. These have been based on the existing files for posts and tags from the starter.

<Gist id="61685cfd85b0cd301ec9608610695b4c" />

## Step 7. Deployment to Netlify

This was pretty painless. Hook up Netlify to the repo and it’ll trigger a build. The `netlify.toml` that came with the
starter probably helped, but it really just took care of itself.

After that, I just had to update the DNS to point to the Netlify deployment, hook up the Lets Encrypt SSL cert through
Netlify and off it went.

---

## Additional changes

- I replaced the search box in the header with a link to `/search` because I couldn’t get the form to pass the query
  param or it otherwise lost it once it reached search page.
- Modified the footer to make the year dynamic using this helper in `eleventy.config.js`:

    ```jsx
    config.addHandlebarsHelper('currentYear', () => {
      return DateTime.format(new Date, 'yyyy');
    });
    ```

- Some of my images are smaller than the post width, so I added the following blanket fix to `assets/css/main.css`:

    ```css
    .prose img {
        @apply w-full mx-auto;
    }
    ```

If your blog is still active, there’s some other good stuff you can snaffle
from [`eleventy-base-blog`](https://github.com/11ty/eleventy-base-blog) like RSS feed support. So it’s worth poking
around that starter to see else you might find useful.

## Caveats:

This method does none of the optimisation things that [`eleventy-img`](https://www.11ty.dev/docs/plugins/image/) does
because build time took forever, I’m impatient, and I honestly don’t care so much about this right this minute. My
priority is to get the sites off before my VPS expires. If image optimisation is a priority, you should be able to
integrate `eleventy-img` possibly with `eleventy.config.images.js`
from [`eleventy-base-blog`](https://github.com/11ty/eleventy-base-blog/) as a foundation but I don’t know how compatible
that will be with the above, YMMV.

## Resources:

- [How To Migrate From WordPress To The Eleventy Static Site Generator](ty-static-site-generator/)
- [wordpress-export-to-markdown](https://github.com/lonekorean/wordpress-export-to-markdown)
- [vredeburg](https://github.com/daflh/vredeburg) Eleventy and TailwindCSS starter

How I migrated old WordPress blogs to Eleventy with colocated image support.

Migrate WordPress to Eleventy with Colocated Images


Can't access the router in `generateMetadata`, and using `params` is inadequate if you need the actual path. Guess
we have to pass it through from middleware.

[NextJS Discussions](https://github.com/vercel/next.js/discussions/50189#discussioncomment-6899338) suggested invoking `set` directly on `request.headers` but that was returning `null` in `generateMetadata`.

Had better success modifying the `NextResponse.rewrite` as documented in [this Vercel demo](https://vercel.com/templates/next.js/edge-functions-modify-request-header).

Example below:

<Gist id="d04df6cbb69d0b688db122e2b0296712" />


An annoying hack to get access to the current pathname in NextJS 13 app router generateMetadata function.

Accessing pathname in NextJS generateMetadata