I have a small static website and every page of this site has a menu and a footer.
What is the best way to make sure changes in the menu and the footer only need to be done in one place and enable me to easily update all my pages which consist of them.
I am looking for some kind of simple template system that enables me to combine files together.
I have looked a bit into ruby .erb files but they seem too complicated for what I want to achieve as I would have to install rails and enable my webserver to use that.
For a simple site, there's nothing wrong with doing server side includes. Simply create the HTML snippets (they don't even have to be fully formed HTML) for your menu and footer. Then on each page, add the appropriate
<!-- #include virtual="/footer.html" -->
statement in the proper location. Since you're on a Debian server, I'm pretty sure Apache wil already have this enabled by default.
It may seem antiquated, but my wife works for a company that does a lot of maintenance for small websites and they still take this approach and it works just fine.
If your site goes above 10 pages, then I'd say look into some of the templating systems, just to alleviate the need to remember to add your SSI on each new page you create.
you could have a look at some Web Templating Systems and decide based on the language/platform you are familiar with
I use Octopress. It's a static site generator built on top of Jekyll which uses markdown for content markup and specific template language for constructing pages. So if you only need a site with a few pages you should try jekyll.
It requires for your system to have ruby since all site generation is done on client side and afterwards the site is deployed via rsync.
Try searching the internet for static site generator. It gives dozen of solutions in all sort of languages: Python, Ruby, PHP, Haskell, Sh, Bash…
Do you need to combine those on the server side?
For a small static site I simply created a little local script (I used PowerShell, but feel free to use whatever you want or have at your disposal) that does deployment from the local source files which represent the templates. While maybe not as flexible on the template side as full-blown templating engines it's easy, fast and works well for quite a while. Also it runs locally and doesn't need anything except a simple web server on the server side, cutting down on potential vulnerabilities.
I've used WML ("Website Meta Language"; NB nothing to do with the WML associated with mobile and WAP!) on Debian for years to maintain consistent templated header/sidebar/footer boilerplate for pages on my ISP's static page hosting.
Related
A local nonprofit needs a new website. It's a very basic website that simply presents information, nothing past basic HTML/CSS is needed to make the actual site.
The marketing manager would like to be able to edit text sections (upcoming events, jobs) regularly. How would I go about creating the site in HTML/CSS and then allowing them to edit just the text in those sections in an easy way? is that even possible, or would this require more advanced knowledge of actual programming/database languages?
Thanks
No, you can't edit the site with just HTML and CSS. Even if you have JavaScript, you'll need server side code (ASP.NET, PHP, Ruby on Rails, Node.js etc) to store the changed text, since HTML, CSS, and JS run on the client (excluding server side JavaScript based frameworks).
The easy solution is to just use simple HTML and tell him to directly edit the HTML. If he's just a little bit technical, an hour or two of explanation of how HTML works might be enough to get you going.
A CMS solution that is prebuilt and has simple menus for editing things might work nicely. There's plenty of various options to suit your needs.
Otherwise, you can either build a custom site. A custom site that reads text from simple text files might be all it takes (Markdown might be preferable to plain text.) Of course, you can scale it up if you want until you've basically built your own CMS.
You can't do that.
HTML pages are stored on a server (which is just a computer accessible by other computers via an internet connection), when you type in an address in your browser's address bar it sends a request to a server to fetch the corresponding HTML page. Then this page is displayed in your browser.
Now, say you managed to change a text in your browser somehow using HTML/CSS, but you still need to find a way to send these changes back to the server so that these updated pages are accessible by other remote browsers, and the only way of doing this is to use server side languages. They are not really that difficult, you can quickly learn that.
You might like to take a look at this sourceforge project.
This is a file-based system that uses conventional HTML for the webpages, but allows online editing with CKEditor. Requirements are Apache 2 and php 5.3 or later.
There is a testdrive available.
Login with guest.
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've been told I have to make a 100% HTML CSS Javascript site for a project at school. I'm used to the master pages of asp.net and I'm worried about how I'm going to do a huge website without the use of them.
After thinking about it for a while, I came up with what I think is an ok solution. Using iframes...
Would it be safe to make one page that has an iframe instead of a content area to connect to other pages to make it appear as if we used a master page?
It seems kind of hacked up so, is there a better way? Is there any software (hopefully free) that provides a decent system of master pages?
Thanks!
You could use a js-based template engine, such as jQuery templates.
You could just dreamweaver and use dreamweaver templates.
Template-Toolkit includes the ttree utility, which will do what you want. You can build the site from templates to get plain, static HTML documents. Since this takes place at build time, you do not need anything like ASP / PHP / Perl / etc on the server at runtime.
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 :-)
In the past I have created websites with navigation that is aided by php $_GET variables. There was a layout that was implemented, and then content that was included based on the variable passed into the URL.
I am now creating a website without any server-side help. I am wondering what are good ways to navigate pages without the redundancy of having the layout repeated in multiple html files.
What kind of navigation methods have you used in the past, and what did you think was the most acceptable/cleanest?
It's not very clear what kind of limitations you've been stuck with, but let's try:
if you've got a web server and the server is Apache consider Server Side Includes;
if you're running a static site from a CD or such you can use a preprocessor to create the static pages including the menu at compile time. Google for 'HTML preprocessor', there are scores of them;
they're rightly despised and 'so last century', but have you considered HTML frames?
You mean you have all static files? Maybe you can use AJAX?