Is this achievable without a framework like Angular/React?

Problem I'm running into is I'm creating a blog and I want to minimize the amount of code I'm using and there's two things I'm looking at:

Changing text on each file

For example, for each blog page, they share the same features such as: header, footer, logo, etc. However, imagine my blog has 100 posts and now I want to change the text of a link in the footer. This would be applied to every page and instead of going to each page and changing the footer manually, I'd like to be able to change it in one file (i.e. footer.html or footer.json) and it's applied to all the pages. I discovered handlebars.js and unless I'm mistaken, I could use this to achieve this problem I'm facing.

Minimizing page bloat

However, I would like to minimize the page even more. As far as I understand, using something like handlebars wouldn't allow me to shorten the amount of HTML code itself. I'd like to have one blog-post-template.html file and each time the user clicks a link to a post, it would use the blog-post-template.html file and the only thing that would change is the actual blog-post.

For example, in pseudocode for blog-post-template.html:

{header} (gets this from header.html)
{blog-post} (gets this from link attribute and searches for that blog-post-number in database)
{footer} (gets this from footer.html)

I'm pretty sure I know the Angular way of doing this through templating and components but since I decided to create this blog with vanilla JavaScript and possibly jQuery plugins, but I was wondering if this was achievable without using a framework like Angular since I've heard about Angular and SEO not getting along well with each other. Or if it's more advisable to use a tool like Angular/React to create something like this in my example.