I have to develop some static HTML page, but I don't want to repeat myself copy/pasting common parts so, for example, I would like to include header and footer in every page.
I don't need something too much sophisticated, just and include feature.
Using Gulp as build system I would like to have my templates in the src/ folder and after a processing task, getting the complete html inside the dist/ folder.
I thought to use something like handlebars, but I don't know if this is the right framework and I don't know how to integrate it in Gulp for workflow described above.
Any hint?
You could absolutely use Handlebars to render static chunks of markup. But, unless you're also building some data-driven content, it might be overkill.
It sounds like you want something akin to PHP's include.
For that, you might want to check out .KIT files. I recommend gulp-codekit (documentation here), which is based on the .KIT file compiler built into CodeKit.
Like in this other thread, using gulp-file-include is the easiest choice for my needs.
Thanks everyone!
Related
I feel as if I'm missing something. I've read through the documentation of Jekyll and Hugo, but am still confused as to why one would use them as opposed to something like Pug with Webpack or Parcel to create a static-site.
So, what do static-site generators provide that bundlers don't?
You are comparing apple with oranges here. While all those tools can technically be used to create static websites, they serve different purposes. To quote the header of Jekyll's homepage:
Transform your plain text into static websites and blogs.
Jekyll and Hugo are really designed for plain text and (mostly) blogs. As a user, you write articles in plain text or Markdown, and use those tools to turn them into static HTML sites. Besides generating HTML, the tools have a lot of functionality that is typically needed for blogs, e.g. they create an index of all articles and support categories.
With Jekyll (and probably Hugo, but never used it myself), you can also add pages to your site that are not blog articles. So theoretically, you can ditch the blog and use it to build a static website. But that is probably not why most people use it...
Compare that to Webpack: Webpack is first and foremost a build tool for Javascript. It doesn't care if you are building a static page, a progressive web app or a mobile app. It just bundles your assets based on the configuration you provide. With the right configuration, you can certainly use it for static pages, but Webpack will not offer more functionality than to bundle your files.
Depending on your goal, either of these tools might be better suited for you. Tools like Jekyll and Hugo make it very simple to get started and create a static website or a blog. You can style the HTML, sprinkle JavaScript on it and create your own design. Or you just grab an existing template that somebody else in the community created. Whatever approach you choose, you have something running in minutes.
Tools like Webpack on the other hand give you all the flexibility and a lot of power, but also require that you do everything yourself. It really depends on your use case whether or not it makes sense to build a static site with them.
I want to create my first statice html template to sell it on theme forest or somewhere else. But how can I create my templates without redudant html code, e.g. header or footer? In PHP you can use the include function, but this is a server side include and frames are the wrong way.
How do the professionals manage their static html templates? Do they use HAML to precompile the html code? Or do they really manage every single html file manually?
Thanks,
rjgamer
It depends a bit on what framework you are using. If you are on ruby you will likely use a layout file with a header and footer and a yield call where you want the specific content to appear. In rails this is done automatically for you by naming convention. Other frameworks may do it differently.
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 just started looking into sass and compass because I see a lot of code on codepen that uses it. I noticed in the documentation that you had to have something like a sass folder and it watches for changes in that folder and when a save event occurs it updates the stylesheet folder with the regular css. I'm used to writing my css, especially when I go through short tutorials or for practice in the style tag in the html file. Is it possible to write my sass in the HTML file? Do I have to now write my css in a different file? if not how would I do it?
No, you cannot to my knowledge. See Using SASS/SCSS syntax inside <style> tag.
The real question, though, is why would you want to use SASS at all? Some say it promotes and encourages poor CSS programming practice. The "features" it offers are in general of marginal usefulness. It adds another step to your workflow, and before you know it you will be fighting with gruntfiles and SASS versions and having Ruby installed properly. Personally I would also strongly advise against deciding to start using some CSS framework if it brings along the SASS/SCSS/LESS baggage.
Some preprocessors that we use in JS/HTML/CSS do have versions which can run in the browser, for development purposes. For example, you can run babel in the browser to convert ES6 to ES5. That is possibly because babel is written in JS, and it's not that hard to create a version which runs in the browser and does the transpiling on the fly. Or, to take one other example, you can arrange for Ember to compile templates from within the HTML. SASS, on the other hand, is not written in JS and there is no reasonable way to call it from the browser.
Can we include an HTML file / snippet from another HTML file?
My use case is related to how a website is built; in a simple form, a site typically has the same header and footer across the board. It is pretty straightforward if the site is equipped with e.g. PHP so you can do something like the include statement; we can contain the header and footer in separate files and include them later. But, what if the site is purely static i.e. no "back-end" support?
One thing that I had done in the past is to utilize templates in Dreamweaver. This worked but I'd prefer something that is more product-independent.
Thanks.
What you're looking for is Server Side Includes. It used to be available on most hostings, no idea what the situation is today.
Actually, a simple system based on a makefile and, why not, php's command line version, might also be helpful: a simple makefile that visits all php files in a directory, feeds it to php (eg, processes page decoration and stuff) and redirects the output to a corresponding html file should be enough to generate a set of uploadable, 100% static html files.
SSI is a great option if it is available to you as already suggested, I have always used PHP personally but as PHP is not available and if SSI isn't available then there is a JavaScript option as well.
The great thing with the JS option is the server doesn't need to have support for it due to the include scripts being client side. The bad thing is if the client doesn't have JS enabled in the browser the includes won't work. In saying that the vast majority of website users have JS enabled and this is displayed by most websites in the world who employ JS in 1 way or another.
Examples, the first one I found with a 2 second Google uses jQuery, have a look at the info here
There are also some AJAX plugins that could potentially be used for this at the jQuery website if it is a path you're interested in going down.
I hope this helps you :-)