Well hey, everyone! I haven't updated the site in a bit. That's okay - I have lots of little projects I've been working on, some more successful than others! But we're here now to talk about the website and some updates I've made to it.

Background

If you've seen the home page, you'll notice that the comments have been reset. That's because when I wasn't updating the site, it was filled with a whole bunch of spam. Them's the breaks with forms on the internet these days... So I decided to just wipe the slate clean and start over, completely overhauling how the comments work. This involved three components: creating a database to store the comments, creating a way for me to interact with the database easily on my computer, and creating a system to alert me when a comment is posted so I can determine if it's spam or not before it posts. I'll go through how I did each of these in this blog post.

Creating a database

Here's what you might be thinking: wait a minute, if the comments weren't stored in database, how were they stored originally? Well... I just had a server-side json file with all of the comments. Not the best system, but it worked for my needs. But when I was trying to figure out how this moderation would work, I figured it would be easier to store the comments in a database rather than keep reading and writing the same file over and over. That way, I could easily delete comments that were spam. I could create a value in the database that stores whether the comment is published as well, and only show those comments that were published.

First - let's set up the database! To tell you the truth, this was pretty difficult. I started trying to use a Digital Ocean development database. I had decided to use prisma to interact with the database in my server side code. But for the life of me I could not figure out how to connect to the database. Eventually I said fuck it, I'll make my own.

I set up a new Ubuntu Digital Ocean droplet to use as my database server. I decided to create a postgresql database. This article was super helpful in figuring out how to set things up, as was this Digital Ocean article. Once I got the database all set up, I tried to access it from my machine - no dice. Turns out you need to change some settings in the postgresql.conf and pg_hba.conf files: this and other StackOverflow questions helped me figure it out (Although I did get stuck for a long time after doing this - the database wasn't even active. Turns out I made a typo when editing the files -_-). But I finally got it working and could access it on my computer!

Interacting with the database

At first, I was going to set up a little Admin section on my page. However, I was worried it wouldn't be secure enough, as I don't know much about authentication and authorization. Most of the work I do in my real life adult job I do in WPF and C#, so I figured I could just make a desktop application to interact with the database. I used the nuget package npgsql to connect. I had signifcantly fewer problems this go around, and set up a little application that let me view all the comments and choose to delete or publish them. It's pretty barebones, but it's just for me so it doesn't need to be super fancy.

Setting up email

Now, all I had to do is figure out how to get an email sent to me whenever a comment is posted! I decided to use nodemailer as it seemed to be the most common choice. On the nodemailer site, they mentioned Forward Email, an open-source email service. I figured I could use that to send emails from my website. I got everything set up on Forward Email, which wasn't too difficult. They have pretty detailed instructions for how to do everything. Then I had to send an email telling them what I was using it for - I believe because there are some terms to using their service. That wasn't a problem for me since I'm just sending emails from my website to my own personal email. Once all that was done, it was pretty easy to set up nodemailer - they had easy to follow instructions on their website. Just make sure your port number is correct, that's something I ran into.

Putting it all together

Once I had all the pieces, all that was left was making sure they functioned correctly together on the website. I set up a redirect page for the comments to let people know that their comment was received, but that it would need to be moderated. Once that was done, the moment of truth: I wrote a comment and submitted it. A few seconds later, an email appeared in my inbox telling me I had a comment! Success! I went to my database application and there it was, a comment from me. I hit publish, then waited a few seconds - the website updated! Woohoo! Success!

Conclusion

This was a great learning experience. There was a lot that I had never really done before that I figured out how to do because of this, and I'm happy with how everything turned out. I'm also glad there aren't a bunch of spam messages filling up my comments anymore. I hope I get some actual real life people to comment soon! Thanks for reading this long, long blog post!

First Blog Post!

Hello everyone! This is my first blog post! Exciting!

It was pretty fun trying to get this working. I am writing my blog posts using markdown. I store it in a folder on the server. When the page loads, the website looks in that folder and generates html for each markdown item in there. Using frontmatter in the markdown file, I can save information like the title of the post and the date, and whether I want it published or not. If you want to learn more about frontmatter, you can check this out: Front Matter. Also helpful to me was the tutorial for Dynamic Routes in Next.js, even though the tutorial is out of date if you want to use app routing instead of page routing.

Now that I actually have blog posts set up, what do I blog about? Well, the blog itself!

Right now, the blog posts will populate in the order that the files are in the folder. Not ideal... So next steps are trying to get things populated in reverse chronological order! Once that's done, I want to change up how the blog looks. I want there to be a grid of blog posts at the top with the blog title and date, and once you click on one of those, that post is pulled up underneath the grid of all blog posts.

I think this might be a bit annoying if there are a lot of blog posts, so I might end up putting the grid underneath the blog post. Also will probably have a max of like, ten on the screen at once before you have to scroll. But that's a problem for later. For now, the blog is up and running!

One more thing I'd like to learn is how to set up RSS feeds, so that whenever my blog is updated, the RSS feed will be updated! I know absolutely nothing about RSS feeds though, so that might be something farther in the future. I don't even have any readers yet!

Well, if you somehow ended up here, thanks for reading! I plan to add a lot more blog posts about projects I'm working on in the future. I'd like to make a post about my cane that lights up, and other microcontroller projects I want to work on. I'm moving right now though, so I might not update for a little bit. But once I'm all moved in, I'll have nothing stopping me from working on my silly little projects! See you soon!