Not sure whether this is the best place for this question.
Is there a way to template a block of HTML code and then reuse it across multiple HTML files.
I know you can do it with PHP include.
But what is the industry standard now?
I have heard of Handlebars and Moustache. Are these the tools for this purpose?
And what is Jekyll and Middleman trying to do? What is static site generator?
Refer back to the above problem, which will solve my problem?
There are a number of templating engines these days that you can use. Mustache and Handlebars are both templating libraries with ports in different languages. There are a number of other templating engines: http://en.wikipedia.org/wiki/Comparison_of_web_template_engines
The library to use depends on your needs. Mustache emphasizes logic-less templates. This means that you should try and minimize the number of conditional statements (if/else) in your templates. Often, conditional if/else are used for determining what to render. Other libraries like Handlebars allow for logic. Choosing the right library will come down to the application requirements, how you want to use your templates, who will be maintaining them, and perhaps the language(s) that you are using for your application.
Jekyll, Middleman, Pelican and other static site generators use templating engines to help you generate a static site. When you write themes for these systems, you write the templates for the theme in the designated templating engine's syntax. For example, Jekyll uses the Liquid templating engine, and Pelican uses Jinja2. Static site generators started as a way to reduce the complexity of data management in blogs and websites. With some other blogging platforms, your posts and content would be stored in a database. This made migrating your work and backing it up a bit more complex, especially if you did not have in-depth technical knowledge of the blogging platform that you use. With static site generators, you can write all of your content in a text editor, using a simple file format like Markdown. To create a website, you just have to configure the system using a basic conf file, and follow the suggested project structure.
After writing your content, the static site generating system has the capability to automatically builds your website folder for you, making deployment easier. This is usually done through some kind of script/automation. All of your content is built into static .html and .css files (.js and image files as well, if you have them). This also can improve page load speed, since a static resource can be cached by the browser, and there are not as many operations on the server happening for each page request.
Using a static site generator will also help you configure how you manage content. A templating engine will be more for how you render content. Since rendering content is a subset of how you manage content, most static site generators will come packaged with a templating engine.
Related
I have a webpage, actually a blog, posted with Github Pages. It's a simple HTML&CSS page. Normally, I create new files with my new posts in them and upload these files to my repository. However, I want to create an admin panel. Especially in order to post easily, and manage my blog (like adding tags, comments etc). I don't know where to start or what to use. I know how to program in C & C#, so it's not a problem if I have to learn a new language.
Any help would be appreciated.
You may be able to use a Headless CMS. These approaches normally are driven by git or some kind of API (you don't have to write any backend code) to add content to static sites such as yours. Although most of them work with markdown, so you may need some way to render the markdown into your HTML.
Headless CMS is normally used within Jamstack projects, so I'd suggest checking that out if that is something you're interested in.
I learned that I need server-side processing with languages like PHP or Phyton. However, Github Pages is a static site service and does not support dynamic web sites. So I will whether keep writing locally or consider another hosting services.
I am into this react.js and gatsby.js issue since a while.
But as a senior symfony developer I wonder if there are options
like TWIG even for gatsby sites?
Now I want to create sites with graphQl data and gatsby.
Is templating not possible with this new stack?
React is a JavaScript Library for building user interfaces, according to their website. It simply provides a clever wrapper UI to build component-based building blocks for an app. Once you grab content or/and data from somewhere—e.g. CMS, file system, Graphql DB, etc—you'll have to render them in a format you'd need. You could build a template-like structure via JSX, but I don't think React/Gatsby supports a templating engine like Twig.
If you're looking for a JavaScript-based static site generator, 11ty might be a good alternative, as it supports a whole bunch of templating languages. See this link.
After ditching Wordpress, I've been experimenting with Jekyll to create a blog. I chose it (over Ghost) to help learn the basics of web development while I blogged. Also, the free hosting on GitHub Pages is neat and free.
What exactly is a static site generator (like Jekyll), and why do they exist?
From Build a Blog with Jekyll and GitHub Pages course on Treehouse:
A static-site generator takes a set of templates and raw text files, runs it through a converter and renderer, then generates a plain HTML website that's ready to publish on any web server.
Advantages:
Sites load fast since we're serving regular pages to the browser and don't need to talk to a database on each request.
Sites are more secure because there's no database or dynamic content that can be hacked.
Less maintenance involved. No database means no need to configure and maintain a database or content management system (CMS).
Free hosting on GitHub Pages
Use your own domain name
Course Link: https://teamtreehouse.com/library/build-a-blog-with-jekyll-and-github-pages
A static site has 3 components:
HTML files (or other content to serve via the web, like .txt files)
referenced assets (js, images, css)
a web server
There is no database from which data is retrieved, compared to something like wordpress where all of your posts and pages live in a database. There is no server-side scripting engine with which to process information and render content.
Static site generators exist to provide you with tools like templating, shared data, and custom tags to assist in the creation of the static HTML pages that your web server will be serving.
The benefits of a static site are:
Security. The web server is the only moving part.
Portability. The HTML files will render the same when served from your local machine as they will on the web.
Speed. When almost everything is cacheable, compressed, and doesn't require any data crunching, things load very fast.
Currently I have a web site full of static pages. This minimizes web server load and guarantees that this site will run even on tiny Linux-based hardware web server.
I am seeking for an ability to make master pages for my site and I like the way used by Ruby on Rails, but this technology is redundant for a simple web site and is too heavy for a simple hardware web server.
I like the SSI, it is really lightweight and cross-platform, but it does not provide master pages, it only makes includes that each document should maintain by oneself.
I like an AJAX technology, but it is client-side dependent.
The IFRAME technology does the opposite to what I want - it references from master page to slave page, and I need the reverse.
Is there something else left?
Template-Toolkit, specifically the wrapper directive, should do the trick.
You can use ttree at build time to generate static pages, avoiding the need for any server side technology beyond a simple HTTPD.
Em.. php includes?
So: CSS, Javascript, Includes directories detailing reusable styling, client scripting, and markup respectively?
There is no way to get any form of master page in the way that you are talking about without server side scripting I'm afraid. The best you can hope for is a JavaScript file that loads other JavaScript files, and external stylesheets (one unusual method I saw was the creation of a universal stylesheet that imported many others - but I didn't see all that much benefit to organisation myself). You could always use iframes... but iframes, as you point out aren't designed for that sort of functionality. That sort of functionality was within the scope of frames, and that had unpleasant results.
If you want to use something like php your server will naturally have to support php, but it is a simple way to produce easy organisation of your pages without having to dive neck deep into a complicated framework like Rails. In my experience adopting a CMS, particularly that developed by somebody else can be more trouble than it's worth.
Right now I have a site that uses Perl and Template Toolkit (using the Template module) for pages that require calculation and/or database access but regular HTML files for the the rest of the pages. However, I have discovered that it would be nice if I had access to templating goodness for even the "plain HTML" pages, if only for the convenience of "including" standard headers and footers, etc.
What is the easiest way to introduce this with the least amount of disruption to the current site? (i.e. I would prefer not to have to change all the filenames and links).
The two approaches that spring to my mind are:
Process the static files off-line using ttree
Write some sort of mod_perl hander to run all .html files through TT before outputting