How to properly organize the files and folders of the site?

Question

css

Hello!
I decided to optimize the site layout process (actually, I have little experience with grunt. I haven’t taken on gulp yet). Connected grant tasks for minification and concoction, connected image optimization. less.
Everything seems to be normal, but I wanted more, like: including html files, copying, preparing .html for the server.
But then I looked around and realized that I have 200 lines of code in the grant and this is just the middle of what I wanted.
In general, I quickly became confused about all this (what to connect to, etc. The fact is that when I wanted to add another page of the site (which is similar to others, but has a difference in the main block (since it looks like other pages, I I spend 5-10 minutes through include html, etc.)) I figured out for 5-10 minutes what to add to grant tasks, what structure, etc. And the question arose whether all this was worth the time that I spent on setting up the grant?
Maybe it’s just that I don’t have much experience, I’ll get used to it in time or am I doing something wrong?
The thought arose: “I’ll take the most necessary things from the grant, and I’ll do the rest with my hands”
But still, if, for example, the header changes, I will need to use his hands change things on 10 pages (its html code), etc.
P/S.
Maybe there are some good articles on this topic?.

Answer 1

The fact is that when I wanted to add another page of the site (which is similar to others, but has a difference in the main block (since it is similar to other pages, I do all this through html inclusion, etc.))

You are doing extra work that has already been done.
You should not create pages without interacting with the software product. This part will be taken over by the backend template engine.
And what you describe has already been implemented in them for a long time.
If, nevertheless, you should have a certain number of html pages at the output, then just take any template engine and router and write a microsite of 10 lines on them. It will be less than yours.

Answer 2

What you want is static site generators. Their wagon and another cart on the side.
Here are a few:
For ruby: Middleman , jekyll , octopress
For node.js: DocPad , codex , harpjs etc etc.

Answer 3

I recommend that you study how this is implemented in TARS, just your task is being solved.
You can learn about how it all works from the report ( https://vimeo.com/123924728 20 minutes) or from the docks to TARS. Everything is described in great detail there + articles on Habré .