I'm currently tinkering with various Static Site Generators (Jekyll, Hugo, Pelican), and wondering about the methods they use for gather site-wide data.
In Jekyll's case, there is site.posts, which contains data for all posts in the site (for building index pages, etc. I'm wondering about the inner workings.
Is Jekyll holding all of the site content + metadata in memory during building the site?
The naive way I'm imagining this seems very inefficient, but I'm having trouble wrapping my head around a better, more "asynchronous" methods. How else would site.posts be populated and available for all generated pages?
Do you have any "small" examples or insight into how Jekyll tackles this problem, specifically?
Related
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
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 am building my own website with Angular2 coupled with Spring boot and postgres as Backend.
The login/logout features are built to perfection but I have trouble understanding how to develop a site like geeksforgeeks where there are multiple links in a page and each page hosts different kind of content.
The idea is large scale and I intend to have lot of pages(topics) as I develop further.
My question is :
1)Should I be creating as many HTML Pages
2)Or What is the standard way of doing it.
I just want to know the right direction, have been scratching my head for quite some time with unsatisfactory solutions.
You should not create as many HTML pages.
Plan to make a category of your type or section of posts
Define templates for each category (e.g. Review something, generic blog post, some solution, etc)
Get the post json from backend along with section or type
Bind it to preferred template to your view
I'm using static html pages and incline js to generate dashboard. The backend is go.
However, as number of pages growing, I have to maintain a lot of html pages, and many of the block elements are duplicated.
I'm wondering whether there're some cases to use jekyll to generate dashboard pages, since jekyll can convert pieces of elements into complete htmls? So that I can modify one part and the modification take effect on every html pages that generated.
Are there better framework to do so?
Thank you!
If you're duplicating elements, then those are the perfect pieces of markup to put into a layout and/or include. That's exactly what those are for.
Each individual page you need can reference a specific layout in its front matter. Includes can be used within the individual pages or within the layouts or both (and can be nested).
The Jekyll Documentation is ok for this, but to wrap your head around it I find it easiest to look at the documentation together with a few existing Jekyll templates to understand how it all fits together.
after a bit more dig. I found that packages such as Grunt and Gulp can be used to generate htmls from separate parts.
Some websites like for example http://www.idealo.co.uk seem to serve only static html, although their content is dynamic.
For example if I navigate through a certain category, I get a link to a static html page:
http://www.idealo.co.uk/cat/5666/electric-guitars.html
Now if I apply a custom filter, again I get a link to something that seems to be static html:
http://www.idealo.co.uk/cat/5666F456496-735760-1502100/electric-guitars.html
How is this achieved? Are there any frameworks out there that help to "pre-generate" all possible dynamic pages, in such way that whenever a new input is given, the page already exists (i.e. the static html is already available)?
Background: we run a small search engine for real estate offers. Offers are updated by our scraper once a day (the content is static through the day). The content is searchable on a Ruby-on-Rails website.
As the traffic increases, performance is becoming an issue. I'm wondering if there is any framework / tool that could batch-generate all our searches so that we could serve static html.
Their site isn't dynamic. They're using URL rewriting (e.g. mod_rewrite) to translate the input URLs into a request that can be satisfied by a script.
For example:
/cat/5666/electric-guitars.html
Might be rewritten to:
/cat.php?id=5666
A quick trick to test this is to go to /cat/5666/foo.html
The use of .html in this case is probably to hide what kind of scripting is used on their site, as a weak security-through-obscurity measure.
In response to your problem - no, there's no (easy) way to generate all possible results into static HTML files. You're looking at potentially billions of permutations. If you're having performance issues, look into performance profiling, caching, query optimisation, etc.
What you're describing is, in a sense, caching. With caching your application will generate pages (and even parts of pages) only when their content has changed. Rails has a lot of cache functionality built in, which you can tune to fit your needs. Start by reading the Rails Guide on caching which describes the Rails' capabilities as well as common add-ons. Google around for "Rails 3 caching"—there's tons of information out there. Finally, you can add software to your server stack that does additional caching, such as Squid and Varnish. With the right tools (and research) you can get 95% of the benefit of a static site without the effort of turning your site into a quasi-static Frankenapp by hand.
I finally found this blog post, which points to a few tools that do what I was looking for. I'm adding it here just for future reference:
Hyde
"Hyde is a static website generator powered by Python & Django. Hyde supports all the Django template tags & filters and even has a few of its own. The built-in web server + auto-generator provide instant refresh and unlimited flexibility..."
Jekyll
"Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through Markdown (or Textile) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server..."
blatter
"Blatter is a tiny tool for creating and publishing static web sites
built from dynamic templates..."