I am developing a simple static website with just HTML and CSS. On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
I am aware of doing it via PHP on the server side or via JS on the client side. But as it is a simple static website, there is no need to create it over and over again either on the server side or on the client side. I think it would be the best to somehow generate the finished HTML code once and upload it to the webserver. Just like compiling C code and shipping the ready to use executable.
I can also imagine, that such a compiler is able to remove comments from HTML and CSS, optimize (minimize) the code, or realize variables in CSS (e. g. for colors) etc. There are a lot of similar questions, just to name some:
Make header and footer files to be included in multiple html pages
Need an efficient way to get rid of my duplicate HTML code in multiple HTML files
How to include header/footer in a static website?
But they are all about doing the compiling over and over again by PHP, JS or server side includes, which are wasted resources for a static website.
So I am wondering, is there no such thing as "compiling a website"? How is it done nowadays? What am I missing?
On several HTML pages, I will have the same header and footer, for example. For better maintainability, I'd like to write them only once and have them somehow included on every page.
This use case fits very well with template engines, such as Handlebars, Mustache or Pug, just to mention a few. Template engines simplify your development by letting you re-use components across multiple files.
Besides, template engines are (also) good at being complemented with data feeds. This simplifies the process of creating your HTML files even more. Let's look at an example why:
// example taken from Pugjs.org
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
The sample code will render 3 <li> DOM elements from data that can be generated with JavaScript. This allows your website to be dynamic in content. That is exactly the key difference with Static Site Generators.
Static Site Generators (SSGs) can also compile HTML files with reusable components. However, these tools (i.e. Jekyll, Hugo, etc) emphasize more on the "static" compilation of the website, rather than the dynamic data complement. Just to elaborate more on this, Jekyll uses Liquid, which is a template language for HTML. Let's say Jekyll is the engine in charge of the layouts, HTML files, deployment etc. Whereas, Liquid a template language, allows you to do loops similar to Pug (template engine):
{% for post in site.categories.podcasts %}
<li>{{ post.title}}</li>
{% endfor %}
If your website has a lot of static content like blogs with articles, tutorials, images, and even writing documentation or basic text information, SSGs should be your option. For more dynamic content, i.e. fetching from server communication and databases, a template engine is definitely better.
If you want even more robust options, then you have Gatsby which is a framework using React for CMS, and again, a static content generator with more capabilities.
No compiling.
You need a static site generator (SSG). BTW I recommend 11ty, It is the best if you want simplicity & no limitaion on template languages (html, md, nunjucks, liquid, handlebars, etc are supported)
EDIT 1:
If you want to get started quickly then comment below, I have ready to use code to with HTML, CSS, JS minification, concatination
I'm using static html pages and incline js to generate dashboard. The backend is go.
However, as number of pages growing, I have to maintain a lot of html pages, and many of the block elements are duplicated.
I'm wondering whether there're some cases to use jekyll to generate dashboard pages, since jekyll can convert pieces of elements into complete htmls? So that I can modify one part and the modification take effect on every html pages that generated.
Are there better framework to do so?
Thank you!
If you're duplicating elements, then those are the perfect pieces of markup to put into a layout and/or include. That's exactly what those are for.
Each individual page you need can reference a specific layout in its front matter. Includes can be used within the individual pages or within the layouts or both (and can be nested).
The Jekyll Documentation is ok for this, but to wrap your head around it I find it easiest to look at the documentation together with a few existing Jekyll templates to understand how it all fits together.
after a bit more dig. I found that packages such as Grunt and Gulp can be used to generate htmls from separate parts.
What's a simple way for me to write HTML files that have several "includes" that pull other HTML files into certain DIVs (which can in turn pull HTML files into certain of their DIVs, i.e. nesting)?
I would certainly want a CLI tool where I say "compile these files into plain old HTML" and it just works.
Lots of templating languages. Freemarker, google closure templates (soy), but if you want something simple and fast without lots of setup, try "Server Side Includes".
Wikipedia Article On SSI
I found the way Jinja2 extends works quite inadequate or I'm possibly not using it in the correct way.
I would like to break down my templates folder into smaller, manageable pieces and include them into a bigger page. For example, I would like the index.html page to be made up of:
header.html
content.html
signup.html
footer.html
While my dashboard.html would be:
header.html
dashboard.html
footer.html
I can create a base.html template and include header/footer etc. in it but, that still leaves me with a rather large chunk of html that I don't want. I want as small pieces of html in one file as possible.
Please suggest a way to achieve this. Or guide me to some best practices, etc.
I created a jinja CMS to generate child templates like your index.html and dashboard.html. A child templates holds one or more small html blocks. This html is stored in the db. I use App Engine.
The first version of this CMS can be found here:
https://codereview.stackexchange.com/questions/5965/review-request-jinja-cms-for-energiekantoor-nl-on-google-app-engine
I created an HTML website in dreamweaver it has a index page, nav-menu and around 10 other linked pages. I did not build the website from templates I just copied and pasted.
I want to upload this website using Wordpress and Ive never done it before. I'm still learning but need help figuring thing out;
I saw that in order to upload the page to Wordpress I need to create a so called theme and in order to do that I need to create different files like index.php, header.php, footer.php etc
My question is do I have to do that process with all my pages?
I mean about.html contact.html jobs.html?
What is the ideal way to do it?
A WordPress template is essentially a set of PHP pages and CSS that defines how your WordPress site looks. Template Development Link
Manually converting your site is going to take time. The advantage of the WordPress site will be that your site will be easier to update down the line.
How difficult building your template and pages is really going to depend on how clean your original css and pages are built.
First, build your template. You are going to try and pull your CSS and apply it to the template pages.
Next, you will need to use the WordPress GUI interface to add pages and include the content from your original site.
Again it is going to come down to how much of your formatting was done inline and how much you leveraged CSS in your presentation. A lot of table formatting for example will be more difficult to translate.