What are some efficient methods to handle similarly structured web content?

I recently started working on a site as a side project. As I am not entirely sure yet what method should I use to handle/display content, I spent the last two days with trying to find the best method, unfortunately I found nothing useful - most likely because I do not know the correct terms to search by.

Basically, the site would use a menu system (unrelated to my question) to navigate the users to different categories which would let them select a piece of content. The site then would display that page.

Here is a mockup of the content display system I want to build:

Every 'article' would be displayed like this (with some modifications in a few special one): they have a simple background image, a title, a few paragraphs of information, one or two links to outside sources and an image which is sometimes can be interacted with (clicking on it plays a sound, for example). None of these can be modified by the users (and it won't be possible in the future, either) - the only way to edit content (currently) is to edit strings in the database or edit the images/sounds stored on the server.

My biggest problem is that I have not enough experience to be able to determine the best way to do it. Currently I use a lot of JavaScript - probably even too much. When the user clicks on a category, a code runs that generates a submenu (as it didn't exists before the button press) based on a database. This submenu is filled with buttons that are linked to different 'articles' and use the same method: on button press they generate and display the content.

I know this is a bad practice - during my research I read that I should not build the entire site from JS, but I used the same method in my previous project, where I had to make a system that lets the users view and modify a huge amount of DB entries in a quick and user-friendly way. Because of this I started to prototype the menu system using the same practices. But I plan to make a site that is available to a bigger user base and it entirely possible that I can't do it the same way - the previous site wasn't built to be usable by people with disabilities, for example.

Currently I have three options to manage content:

• 
  

  Use the same method as before: have a few pre-built elements then generate the requested content only when I have to, but do that every time the same content is opened. It's very JS heavy, but the user only have to download the necessary resources.

  
  


• 
  

  Create everything beforehand, so the site only displays the content. It does require less JavaScript and makes it possible to build most of the site with pure HTML and CSS. It comes with big(ger) downloads.

  
  


• 
  

  Combine the two methods: generate the content when the user needs it, but also store it, so returning to it only displays the already existing 'article'.

  
  

Could you advise me about best practice to use?