Getting away from Wordpress

My de-facto resource for creating static sites was generally with Wordpress. 

With a click of a button in CPanel, an instance was setup, deployed and running.

Then i'd have to go through the rigmarole of setting up templates, overriding styles and all the features i don't want and primarily disabling all the comments from spammers.

While using Wordpress gave many conveniences out of the box such as navigation, common menu's and a rich plugin set, as well as the new GUI for creating content, i just found it ever increasingly clunky for my use case - simple custom content and the occasional blog post.

In addition to this, my hosting provider now offers NodeJS hosting to now i can finally get away from managed PHP, woohoo!

SPAs and Angular

My go-to frontend framework is Angular.

The main problem i had with this stack (although not confined to Angular) was the limitation of SEO while being a SPA.

When putting a link online or utilising web crawlers, they would never render correctly as the page requires some JS to be run in order to populate the page content, which is poor.

One way to avoid this to set it to pre-render in the angular config: 

  Prerender: true

This will then pre-render and build everything server-side, creating a set of static files.

I still get a lot of the benefits of an SPA eg still use shared components across pages and routes, styling and all the goodies from Angular etc.

Another way to avoid this is adding some header checking on the server side and return back some some meta tag config eg with a title, tags image etc. i have done this before and works pretty well.

Either option still require some manual intervention for each page where the meta tag details need to be set - usually hard coded into the component or route itself.

Once the files are rendered locally they can then be uploaded to the server. The difference here is that there are now lots of files - one per page vs the SPA bundling into a set of single files.

I'm not too concerned about this as i can keep track of changed files using a hash and only upload what has changed.

Do i even need a DB?

The site was created as one normally would with shared components, good re-use and all that but the main area i want to touch on is the blog section.

Wordpress would provide a page where the blog is edited and the CRUD action would be via an API. This would require a server, some Auth and setting up a DB.

Do i really need a database for adding new blogs?

Given the deployment is a list of files any extra blog posts could be add to a flat file somewhere negating the need for a database.

While this is fine for my usecase, in order to do any updates i would need to the codebase. 

This solution does not scale well, it doesn't need to. Maybe if i decide to offer this as service then i can think about that.

For now, i am happy to create locally then deploy to the server. 

The plan

So my plan is run the site locally as my pre-production server. Creates blogs locally and when i'm happy, deploy the files to the server.

Given the project is running locally i can utilise a whole range of tools while not limited to a specific technology.

When deployed the server does not use any server side functionality it should be a static site.

In development the site will run on localhost:4200 and have a generic component to display blogs.

I want to run a seperate local server that will spin up a 'Blog Editor' which will be responsible for managing the blog content.

Create a deployment script to upload any changed files via smtp.

Gearing up with AI 

I pretty much have to start from scratch here with all the thing i took for granted such as slugs, dates, images - main images, resized preview images etc but you have to start somewhere.

Using Claude seemed like a good option, the code is fairly trivial and life is too short to spend my time writing basic logic.

I set about to tell it my requirements using a markdown file.

It came up with a rather simplistic solution and the WYSIWYG editor was some AI cranked text box with not much functionality.

The first change was to wire up ckEditor which has worked pretty well in the past for me. It also allows to view the source which also comes in handy at times.

So now i have a pretty rich text editor.

Images were lacking to i got the AI to spin up some logic handle image within the post. These basically link to the angular /public/assets file nicely sets them up for upload.

OG images and metadata fields were then add above the post to enable rich linking for social media and web crawlers.

Et voila

I have a nice little app running locally that i can use to create new blogs.

A script was created that will deploy new or changed files using sftp.

SEO

It's possible to check the details now eg using https://www.opengraph.xyz:

The tags are now being served correctly and SEO is active. Although there are further fine tweaks to do such as the correcy sizing.

Final thoughts

I now have an alternate to Wordpress where i can use an LLM to generate pages and have a dedicated tool to use create blog posts locally then deploy them live.

I have lost some functionality in terms of being able to create a blog online.

A DB is not required nor an API or any token security for the me access data.

SEO has now improved from a standard SPA.

Any changes require uploaded the files, it could range from a single file or the entire page-sets depending on the affecting changes.

While this new approach has its pros and cons, it's a good starting point for me to create new blogs.

I did ‘lose’ all my other Wordpress blogs as the data in Wordpress is diffiuclt to read outside of it - kind of locking users into Wordpress giving me more of a reason to can it.

With an LLM now doing the grunt work for me i don't have to wasted time messing around with Wordpress and get the LLM to manage that while i focus more on sharing content like this!

Thanks for reading.