I want to use my hugo empowered blog with the hyde theme to display little one off coding projects i’ve done. Such as neat things I’ve made in d3.js.
I feel this should be a fairly simple thing to do but I don’t even know where to start looking for how I can do this. Do I need to make a new template? Can I have script/html pairs in my content path somehow? Its ok if I just embed the script in the html file, i’m ok with that but how do I set this up?
Is there a better theme to use? Should I just use links and host them on my project site?
All I really want is a signpost that says “Yeah its possible look over here.” Any help would be appreciated from this awesome community.
first of all you need to copy all assets like d3.js into the static folder in the root of your site, let’s say under static/js/d3.js.
Now we need to link this file(s). One option would be to add them into the header. There is a partial (which represents the header) that will be included in each page. Move to themes/hyde/layouts/partial/head.html. Now we need to reference the script file.
All static files are relative to the base url of your website. This means, we can access d3.js under example.com/js/d3.js. Now let’s link the file(s) in the templates. Within head.html add the following:
That’s it. Note, that {{ .Site.BaseURL }} represents example.com/. This way the browser knows where the linked files can be found.
Putting js files into the header isn’t maybe the best option, since the processing of javascript could slow down the rendering of the page. Alternatively, we could link them at the bottom of each file by creating a new partial.
Inside layouts/partials create a new file called assets.html. Inside this partial you can link all assets like above.
Now we need to include the assets.html partial in all templates, that are used as layout for a complete page. In this case this would be the following templates:
layouts/_default/single.html
layouts/_default/list.html
layouts/index.html
At the top of each template you can see our head.html partial from the beginning included. We need to do the same for assets.html
Move to the bottom of each template and insert the following line before the closing </body> tag.
{{ partial "assets.html" . }}
That’s it.
PS: I don’t think that you need d3.js in a 404 file. If so, you know how to add the partial
It is very much a work in progress, but you might be interested in taking a look at my upcoming personal site: https://github.com/hnarayanan/harishnarayanan.org. It too attempts to showcase different sorts of things I’ve worked on.
Maybe you will get some ideas over there, including things like
conditional JS includes in some pages and not in others,
usage of variables (“front matter”) for all sorts of things, e.g. sometimes linking externally and sometimes linking to local content, and
using different templates for different sections.
If you’re interested in seeing it in action:
git clone git@github.com:hnarayanan/harishnarayanan.org.git
cd harishnarayanan.org
$PATH/hugo server --buildDrafts --watch
And head to http://localhost:1313 in your browser. I apologise that the repository is quite large because of a ton of static files.
@digitalcraftsman, I’ve come back to this after other troubles with using a theme and I’m just going to build a whole portfolio from scratch.
I’ve gotten a lot of things down but I can’t get {{ .Site.BaseURL }} to work right. What I mean is that when I use
{{ .Site.BaseURL }} it works in the index for the root to my assets.html. However when I put it in a content single.html the file isn’t referenced at localhost:1313/js/d3.js, what I get is localhost:1313/content/mycontent/js/d3.js.
So I can get it to work at the main index page, but I can’t get it to work where it counts, where I’ve put my code examples and portfolio items to show off.
Can you explain this further. I’m not sure what you mean, and the answer depends on what you are trying to do.
You also don’t need to define localhost:1313 in your config file. hugo serve does that automatically
Is the code available online somewhere where you could reference specific files and lines so we can have better visibility into what you are trying to do?
