Hello!
Is there a way to have some dynamic data fetched on index page with using Hugo?
It makes no sense as it’s static, but well, I’m still learning and maybe I’m not aware of something.
I would like to have all benefits of static, and one tiny script to fetch data from an api (just two numbers i swear ).
So is it possible to mix Hugo with dynamic content? Why wouldn’t that make sense?
Sure, just use your favorite Javascript library. For instance, I use Isso to add comments on single pages, and I also query it directly with jQuery to insert comment counts into the article headers on both single and list pages:
<script type="text/javascript">
$(document).ready(function(){
$("a[thread-uri]").each(function(){
var url = "https://example.com/isso/count?uri=" + $(this).attr("thread-uri");
var me = $(this);
var query = $.get(url, function(c) {
me.text("Comments: " + c);
});
});
});
</script>
Well, I don’t even need a library. Just fetching some numbers from 3rd party API that change every minute or so. I thought I would need to rebuild the website for this. So I was wrong I guess?
If your favorite Javascript library is “none at all”, that works, too.
You can pull in dynamic data using data templates, but fetching it directly with JS is often better than rebuilding the entire site. I only rebuild my blog when I edit an article, but JS keeps my comment counts up to date.
-j
1 Like
As @jgreely said, you could do something like schedule a cron job on a server, to re-build a Hugo site every x minutes or whatever, to get the latest info, and maybe another cron job to pull some json or csv into your /data/
folder, but, it’s up to you.
Since this same question about “dynamic data” comes up periodically, for the record, Hugo just assembles your site astoundingly quickly. It assembles per the instructions you put in its templates. There’s nothing that happens on the server side, unless you build that in with some script.
As others mentioned above, it’s pretty common to use some javascript to grab some data point like you’re mentioning.