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
Related
I've been trying to find a way to write HTML partials (header.html, nav.html etc.) and include them inside another HTML page as a part of my build process.
I know about server-side includes in Apache or includes in PHP but I was wondering if there was a way to do it in Node ? I've tried using template engines like Jade or Handlebars but they were not really built for that. Jade was the closest to what I'm trying to achieve but I don't want to use the syntax and there's no good way to use regular HTML. With every other one you have to include a script tag in your HTML, which I would have to strip for production.
I'm just trying to build a static website and would like to keep my build process simple (I'm using NPM scripts). Do you know any other way around copy-pasting the common parts of my website for every page ? How do you manage this in your workflow ?
Here is a recap (a bit overdue) of what seem to be the best solutions for a simple use case: preprocess (has more options, can use custom or environment variables) and ssi (mentioned by #Alex K., it is very simple and sticks to Apache-style server-side includes). I ruled out jade since it added a lot of features I didn't really need.
This actually is really a perfect use case for jade or some other tempting engine.
Layout
The basic approach would be to create a layout.jade file with all the stuff that doesn't change and dictates the general layout of the site.
layout.jade
doctype strict
html(xmlns='http://www.w3.org/1999/xhtml')
head
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
title some title
body
| Static content like nav
block pageContent
Content based on the route
Within the layout file you can define a series blocks as place holders for content to be injected from other templates. That template will extend the layout and inject the relevant blocks, something like this:
some-route-template.jade
extends layout
block pageContent
| I am content from the relevant page
Compilation
The only thing left at this point is to compile template that matches the requested route using the jade library
I started creating web pages in plain HTML. I have a header, main content and a footer. The main content is divided into two, left and right content. Everything is the same on all pages except for the right content. Now I have about 15 pages. This is very tiresome if I make some changes on the other static pages (header, footer and left side content) as I have to go through all pages.
How can I create one HTML file for each static area and how am I going to integrate it?
There are, essentially, three places you can do this:
At build time. Run a script that puts the pages together and outputs static HTML. Then upload the static HTML to the server. Back in 2013 I recommended ttree, but these days static site builders are common and more powerful. My projects tend towards Gatsby (for complex projects) and Metalsmith (for simpler ones). Jekyll is very popular (and Github provides documentation for using it with GH Pages).
At runtime on the server. This could be a simple SSI, a PHP include or a full template system (of which there are many, including Template Toolkit and mustache), possibly running inside an MVC framework (such as Catalyst or Django). This is the most common approach, it has less time between making a change and putting the result life then doing the templating at build time.
At runtime on the client. This adds a dependency on client-side JavaScript (which can be fragile and unfriendly to search engines), so I wouldn't recommend it unless you already had a server-side or build-time solution in place. Gatsby, for example, is a static site generator that builds a React frontend backed by static pages.
There are a couple of ways to do this.
If you are working purely with HTML, then you can use a 'server side include' -- this is a tag which allows you to load a file into the page (see http://en.wikipedia.org/wiki/Server_Side_Includes). Whoever is hosting your website has to support this.
<!--#include virtual="../quote.txt" -->
If youe web host happen to use PHP, you can do this using the include method (see http://php.net/manual/en/function.include.php):
<?php include('path_to_file/file.htm');?>
This will include the file at the point you place the tag. But again, whoever is hosting your site needs to support this.
There are other methods of doing this, bit these are the two I make use of.
Well... what you’re looking for is called "Master Page" and unfortunately it isn’t available in html however you can use the <iframe> tag but it would make your website look really ugly. i would suggest you to use a programming language such as PHP its much easier that way.
but if you want to use <iframe> then They’ll load remote pages into your website, so you could define a "Master Page" like this:
<body>
<div id="content">
<iframe src="content1.html"></iframe>
Now, inside of content1.html, you could just write the content without the main layout
I am converting mockups to HTML + CSS. Then this will be used as a template for a PHP system by other people (actually it can be any server side language, PHP is not important)
There are, for example, 10 different type of pages. But in each page, many blocks can differ in many cases. For example a block can be displayed differently for anonymous and logged in users. But I dont want to copy the whole html file and just change that block and have another html file. I know php can be written to include parts of the page from many files. But there is no php yet in my design workflow, and I want to have full HTML design before ever passing the files to PHP guys.
Basically, what I want is a "CASCADED" html structure for design purposes. So in a "container" html file, I can include all the different parts from different HTML files.
Does anyone know a method / tool / process to design dynamic pages?
I can think of two ways of accomplishing this. First pull in each of the various components on the page with ajax calls, jquery will make this relatively easy.
Or if you don't want to use javascript then iframes. But the iframes method is extremely prone to buggyness and in some layouts just will not work. Also keep in mind that since you aren't directly injecting html into the page each page would have to keep track of its own styles.
Let say you are working on a website template that has many pages (index.html, blog.html, contact.html...). You start by designing the home page and then move on to other pages. While you are on other pages, you think of some improvements and these improvements must affect the whole website.
So I return to each page and make the change. This is quite unproductive especially when you have 6 or more pages and sometimes you forget to update the change.
If it were PHP, I would do
require ('header.php');
This worked for me well. But right now, I'm working on HTML and don't really like to transform to PHP and then again to HTML.
So do you have a specific method/way of doing this?
You can use server-side includes to get the effect you want, if your server supports them.
You can use PHP to include a number of smaller HTML files. The PHP script is minimal. No "transform" is required. Just something like require('header.html'); require('body.html'); require('footer.html'); or some such.
If what you're worried about is having to write a lot of PHP, you can use a templating engine such as Smarty TPL to clearly separate the code from the pages and minimize the amount of coding you have to do. This has the added advantage of having HTML "generators" that will automatically do things like producing radio buttons for you or obfuscating email addresses.
You can use CSS to centralize styles for your page so you can make site-wide appearance, layout, and design changes by modifying the stylesheet.
If you're working with HTML pages, (e.g. including extensions .htm and .html), consider using Server Side Includes. This approach works with basic HTML parsing, and is supported by most/all major web servers, including Apache and IIS.
Simply include this text in your .html file:
<!--#include virtual="header.html" -->
The web server will then fetch the markup in that file, and will insert it inline in the page it's currently serving.
You could use PHP as a pre-processor, a code generator. Run the PHP on your local computer, then save the static HTML pages it produces and post them to production. You could write a little script to visit each of your PHP pages and save the corresponding HTML. Then you could have the convenience of PHP at design time and the simplicity of HTML in production.
I'm designing a simple website with no dynamic content that I want to be light and portable — no PHP or other server-side scripting needed, or wanted. I'm running into a question that I've had a few times before.
I'd love to be able to write common elements (head, foot, navigation) once and write the individual pages on the site with content only, then run this mysterious utility to compile everything it into a set of HTML files ready for uploading. A page might be written like this:
Title: Our Services
Top Navigation: Yes
Scripts: jquery, lightbox
<p>
Example, Inc. offers a wide range of…
It'd be great if the engine also had logic that lets me include or exclude elements (like Top Navigation above) from each page, and automate tasks like labelling the current page in the navbar:
<a href="/services"{page == 'services' ? ' class="current"' : ""}>Services</a>
Are there any engines out there like this?
I'd head directly towards Template-Toolkit for this. It comes with the ttree utility for building a static site.
You can handle the last part of your question with something like:
[%
INCLUDE 'navbar.tt'
page = 'services'
%]
To be honest, this is where things like PHP come in handy... to include common elements
Option 1: Use a language and enjoy it.
Option 2: Use the language to make the site... but then point a crawler at your site to grab the generated "static" content. e.g. WinHTTPTrack
Webby is fantastic for exactly this.
Another great option is Jekyll.
Adobe Dreamweaver's Templates do what you need if a non free tool is fine for you.
Basically you create a Template page where you define which parts are editable, then you create all your pages based on the template. If you change the template and save it all the associated pages are updates.
The templating system also has the ability to define default attributes and change them in a specific page. You can use this for labeling the current page, though for this IMHO a couple of lines of jquery code are much better.
You could write a program in any language you are familiar with that outputs static html files. You could have a basic structure and then for the customized stuff, you include it from a separate file.