← Back to All Posts

Dev Journal - Jan 11, 2021

6 min read

Dev_Journal

Nuxt

GitHub

Alright! After a few rough days, I finally got my site reconfigured and have a pretty nice little setup improvement going. :)


I haven't been super satisfied with my post writing setup lately. Working in markdown in VS Code has been somewhat nice, but I couldn't easily see what it was going to look like on my site. So the first thing I did was take a little time to improve my setup. I turned the live edit feature of Nuxt off, so now when I run my dev server I can actually see how the posts will look. I also get an extension called Markdown Preview Enhanced that's helped a lot too - I was able to apply a large majority of my site's styles, so I can see a live updating preview directly in VSCode! The only things I couldn't get working were my link styles (since they use background-clip: text which I'm guessing isn't supported in VSCode previews) and I couldn't get a second font family to load for my heading style. But, it's close enough that it gives me a nice view of how it will look. So this part of the experience is much, much better!


I also wanted to be able to remove my posts from my main site repository, and somehow store them separately. I wanted to improve the folder structure so I can keep these dev journal posts separated, and keep drafts in their own folder, and generally just be able to find things better. So I decided on a new folder structure and file naming convention, and made the updates.

Then I found these two posts by Maya Shavin, one on using Git submodules to work with multiple repos and the follow up on automating updates with GitHub Actions. Using these, I was able to get my posts pulled out into a separate, private repository and get a workflow going to be able to write my posts in their own repo, and when a new post is pushed, triggering a change to my main site so it updates as well. It took some trial and error, but I'm really pleased that I've finally got it working!


Most of the trouble shooting involved adjusting my routing with Nuxt. Since Nuxt and the Content module handle generating routes themselves, and I was now using several nested folders, it took a lot of testing to finally get a setup that would work. At first, I made a few path name changes and things seemed to be working locally, but when I deployed to Netlify it couldn't see the posts. I tried all sorts of different ways to grab and/or generate the file paths, but ultimately I ended up going the more direct route. It's a little more repetitive than I'd like, but for now it's working which is what matters! lol

Screenshot of the folder structure described below

Basically, my content structure is a writing folder that has two nested folders - blog and notes. Notes doesn't have any internal folders, since those will be fairly specific for the foreseeable future. But for the blog folder, I have three nested folders - devJournal, drafts, and posts. (I know, the naming is repetitive too and I'm not crazy about it - but I've already used writing a few other places and I could NOT get my brain to come up with another name that seemed to work lol).

So for my page routes, I ended up having to create a posts folder, that has a blog folder (which in turn has a devJournal and posts folders), and a notes folder. And each of those folders has a _slug file that details how the post is viewed.

I already had the notes file as a separate view before starting this task, since it does have a few differences in how it displays. But journal and regular posts had been using the same slug file. However, to help make accessing the routing easier, this just seemed to work. It would be great to maybe split this out into it's own component at some point - the files would still need to exist this way, but updating small changes would be a lot easier. However, for now it is what it is.

This change also meant that instead of directly getting the post, it now returns an array with one item. So I had to go in and find every instance of my post variable and add [0] to the end of it. Which was not the most fun I've had. lol 😉


Once I finally got the routing fixed and showing locally and on my live site, the last piece was getting the GitHub Actions to work! Surprisingly, given that I've never used Actions before, this part ended up taking less time. :) I was having an issue when I initially set this all up with using HTTPS to update the submodule - even though I had a deploy key set, Netlify wasn't getting the submodule data. So I had switched my .gitmodules file to use the ssh version of the URL. But now that I was back to messing with the setup, my Actions were failing because it couldn't find the repo. So I switched the URL back to the HTTPS version, and wouldn't you know - now it worked! lol Must have just been a caching or time issue.

The last bit was trying to get a Netlify Deploy Action to build in the right spot. I honestly couldn't get this part to work - it kept trying to build my site in a github/workspaces folder, which didn't have any of my site information. However, since Netlify automatically deploys my site when a change is pushed to the main branch, this wasn't necessary! I just have the GitHub Action triggered from my content / writing repo whenever I publish a new post, which emits an event that my main site repo is listening for. Then the main site's Action triggers, which updates the submodule reference so it shows the new post, and commits that change to main. Then Netlify picks up that commit, and rebuilds the site!

It's event triggers all the way down. lol 😆


So that's been my past few days! But now I have a nicer folder structure to store my posts, an easier way to keep drafts, a better preview and editing experience, and some automation setup so I can write with less distractions. Which I'm hoping will be helpful in writing more often! Because I want to share more of what I'm working on and learning.

If anything in this doesn't make sense to you (and the posts I shared didn't help either), feel free to reach out with questions! I'm happy to try to explain better or link to other resources.

← Back to All Posts

Webmentions