Network Graphs in Hugo

This is a simple toy to see how a network graph can be added in a Hugo article. I’ll be testing new features on it as I learn new things.

Relative to the root of the Hugo website directory, here’s some basic files to make this interactive. Note that The JSON data and CSS is added inline here to make the scope of this tutorial focus on Hugo-specific structures.

1. The javascript file lives in this page bundle:

   • toy-network.js

2. This file accesses data for the nodes and edges from two JSON files in this page bundle:

   • nodes.json
   • edges.json

3. In the shortcodes directory /layouts/shortcodes/:

   • toy-network.html

     <div id="mynetwork" data-nodes-path="nodes.json" data-edges-path="edges.json">
         <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
         <script src="toy-network.js"></script>
     </div>
     

4. Do the normal way of making a post in Hugo, but invoke the shortcode within the body of your markdown:

   • index.md

     {{< toy-network nodesPath="nodes.json" edgesPath="edges.json" >}}
     

This will provide the simple network graph above.