Brunch works with almost the all template languages and has plugins for them, but I could't work with vanilla HTML. I just want that on every build brunch just copy my html files(wherever they are located) and paste under that appropriate location on public folder. I don't want to use jade, handlebars or whatever I just want to copy clean HTML files without any modification. Is that possible?
Put them in the assets folder like so:
app
assets
something.html
All files in the assets folder simply get copied.
That being said, unless your doing a single page website or don't plan on updating the HTML very often, it seems less than ideal to not use a template language if for nothing else than to avoid repeating yourself.
Also, note that you can use something like jaded-brunch, to have the files compile to static html files rather than JS. This is rather nice when you want the ease of working with HTML files server-side and still enjoy the benefits of using a template engine for development.
There is a plugin exactly for your use-case, which will compile, validate and minify your HTML templates located outside of assets directory, which is a must if you're working with templates in a folders-by-feature structure. The plugin also provides a default optimization, ready to be used in production environment.
Related
What do you want exactly?
I have a website in Hugo. However I have a peculiar situation.
Scientists and Electrical Engineers and others may have specific needs. For Eg: Having a single page that shows a simulation. Or in my case using webbluetooth and webusb that I have written from scratch in HTML, CSS and JS. Moreover these pages may be generated by custom scripts. So you can have git submodules inside your hugo site that specifically cater to generating these custom, single page html that you just want to add to your website.
So all I want is to have a menu item or sidebar whatever the existing theme supports, but instead of showing the default html, it should show my custom, hard-coded, already ready and prepared html file - which may as well be an index.html file in a folder with all the necessary contents ready and cooked - something like the _site folder that jekyll creates.
What do you mean by custom html?
I mean it doesn't take the formatting of the hugo theme. It has its own formatting, but because its just a single page in the whole website its not fruitful to have its own layout written in Hugo or maybe its just worth the effort to do that cause you already have it working using some other technology.
What have you done so far and what works?
I am actually coming from a Jekyll background where it's as simple as changing the layout frontmatter and making it nil or even something that doesn't exist at all and jekyll does a great job of showing custom HTML in an existing theme. Tried the same with Hugo but that didn't work.
What are you testing on?
hugo-coder and(or) hugo-academic
Any specific requests?
Ideally I would like to have submodules in my hugo site folder where those submodules generate custom html in known folders and then somehow make a corresponding markdown file in Hugo that is responsible for showing the custom html.
I want to avoid writing the whole html in the markdown itself. But if no other solution is possible then I guess I don't have a choice.
Do let me know if its possible and worthwhile to pursue this and any references that might help.
So I don't know if this is the perfect solution but it somehow works for the moment. I will not accept it as its not perfect and I am waiting for some of the more experienced folks to answer.
I got something working by doing the following -
I had a page built using Jekyll. Jekyll builds the site in a folder called _site.
I copied the _site folder into static folder of Hugo and renamed it correspondingly to CustomHTML OR you could use the flag -d <destination folder> or declare it in the _config.yml file : destination: <destination folder>
Since I am testing it on hugo-acdemic theme, for that I added the following to the config.toml file to show it in the menu -
[[menu.main]]
name = "CustomHTML"
url = "CustomHTML/index.html"
weight = 50
hugo serve And it worked.
Cool thing is that I didn't have to bother about CSS and anything else. Hugo rendered the index.html in _site properly.
EDIT
Looks like the Hugo folks also suggest doing the same way.
I have multiple language versions of my website from the root folder as
en-ca/*
fr-ca/*
en-us/*
etc.
I have created a _resources folder that contains css common to all sites.
I would like to copy the content of the _resources folder into en-ca/*, fr-ca/*, en-us/*, etc. at build time.
Hmmmm.... Are you sure you want to do that? That doesn't seem like a good idea.
If the CSS is identical across the different languages, why would you make the end-users download the same file again when switching to a different language, if they already have the same file cached in their browser?
It would be better to have the common CSS in a single place, and have your HTML templates reference that instead, and leverage the browser cache, etc.
Anyway, to answer your question, if you want to use pure Jekyll (without a plugin), you can create empty common.css files inside each language folder, and use the tag include_relative to copy the contents of the common.css to it.
Jekyll Includes / include_relative
https://jekyllrb.com/docs/includes/#including-files-relative-to-another-file
Alternatively, you can write a plugin that copies the file to the folders you want. In the answer below there's a small example of a plugin that renames files... You can adapt it to copy files instead:
https://stackoverflow.com/a/48600246/211672
I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.
In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.
Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?
P.S. It should be noted that I am not looking for cache-related solutions.
you can use grunt-angularjs-template
it does concatenates all templates in one file. as per its docs
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache
If you’re using gulp then a good option would be gulp-angular-embed-templates
I finished my Ruby on Rails project and I get extra credit for making it "look good." I made an HTML template with some images and css styling on my local machine (not the RoR server). I've tested it out in plain HTML and it looks good.
I can't figure out how to incorporate it into my RoR project though. I thought i'd be able to create a directory in my views, called "images" to hold the images for my template.
Before transferring all of the code for my RoR to the tags for my template, I wanted to make sure the images were in the right location. I added to my index.html.erb file, but it won't display. I tried moving that images directory to a few other directories and tried again, same thing!
I thought it would be easy to incorporate a template haha but now I'm thinking not?
Is there a way to simply do this like an ordinary HTML website?
There are two main options for this...
You can use the asset pipeline and serve up assets from a location like app/assets... So, app/assets/images.
You can put them in public/images and just serve them up that way as well.
If you feel like learning a bit more, I'd dig into the asset pipeline. If you're just ready to be done, public/images for a small project should work just fine. :)
I am a newbie webdeveloper. Though, I understand what html5 boiler-plate brings to the table, I would like to know how can I extend/customize it to use it in all my html files?
As of now, it provides an index.html.
So, what is the convention/method to create a new html file?
Should I create a separate html folder?
How do I inherit the properties of the index.html file?(Copy-paste?) Can't there be something like Django where I can inherit the baseurl?
Though, I have some understanding of dealing with javascript and css, anything else I should take care of while dealing with html5 boiler plate and cross browser compatibility?
In the beginning there is no real rhyme or reason to where you store your html files, because usually its just that plus some css file, or whatever.
However, when you get into real development, as in with a framework for front end + back end code, you will find that there is a need to separate things out as server side and public for the benefit of file access control and naming conventions.
When that is the case, you end up with an "Assets" folder, or "public" or something like that. Boilerplate tends to follow that convention.
In order to make boilerplate be automatically extended to all of your html files, you must develop your view files to be modular.
Main template file
|
----header (contains all the references / includes to boilerplate)
----content
----footer
Also, please note that at that point, your html will no longer be stored as .html file type; you must use a language that is capable of combining files as chunks. PHP does this nicely, and as you know, django can handle that as well. Ruby on rails, etc. you're gonna need to decide what language you want to work in for that. OTHERWISE, the old method of combining html chunks is server side includes (aka SSI or .shtml)
The issue of a base url is solved by having your server side language of choice work with the directives of your web server. For apache, you use mod_rewrite, and then you can pass an arg in the url that targets some classes / models / views, etc. MVC frameworks actually have already solved that problem for you, if you dont mind using one.
"You can override what folders and files you want to operate on in project.properties. All the default configuration is in default.properties." http://html5boilerplate.com/docs/Build-script/
default.properties is in /build/config
You need to add the pages to the line that starts with "file.pages", like this:
file.pages = new-page.html"
The core of HTML5 Boilerplate
HTML — A guide to the default HTML.
CSS — A guide to the default CSS.
JavaScript — A guide to the default JavaScript.
.htaccess — All about the Apache web server config (also see our alternative server configs).
crossdomain.xml — An introduction to making use of crossdomain requests.
Everything else.