ASU WS2.0 Hugo Theme

ASU WS2.0 is a Hugo theme from Arizona State University's Center for Evolution and Medicine that produces static websites for faculty, lab, and project pages using ASU's Web Standard 2.0 visual language.

What is the ASU WS2.0 Hugo theme?

The ASU WS2.0 theme runs on the Hugo static site generator and converts content written in Markdown or HTML into a fast, backend-free website. It implements atomic design methodology with blocks, partials, and shortcodes, and it automatically generates sitemaps. Because Hugo sites do not rely on PHP or a database, they load quickly and keep hosting costs low, a practical fit for faculty, lab, or project websites. The theme is created and maintained by the Center of Evolution and Medicine at Arizona State University.

Key Features

• Hugo static output — generates pure HTML/CSS/JS with no PHP or database, which keeps hosting costs low and pages fast.
• Custom content types — create a folder in your content directory, add an archetype file, and get list/single/card templates; an example events content type is included.
• Three bundled shortcodes — listFromJson reads a JSON data file and renders grouped tables, newMembers inserts a reusable HTML block, and rawhtml renders raw HTML inside Markdown.
• Flexible page authoring — create pages with either Markdown or HTML; HTML gives more control for complex layouts.
• Navigation via NavTree — edit the JavaScript object in themes/asu_theme/static/js/nav.js to customize the navbar.
• Custom CSS support — add your own rules in themes/asu_theme/static/css/custom.css.
• Data sources — pages can read data from local or remote files, and the theme auto-generates sitemaps.

Who is it for?

• Faculty and research labs — publish a project website that showcases awards, events, and publications without managing a CMS.
• Programmer-occasional developers — Hugo has no dependencies beyond itself, and a familiar workflow with hugo new and config files means you can stand up a site quickly even if you rarely build websites.
• University departments — use the included ASU branding and blocks to stay consistent with university web standards.

What can you do with the ASU WS2.0 Hugo theme?

• Lab websites: set up a homepage from _index.html and add event listings using the example events content type.
• Award programs: feed a JSON list of award recipients into the listFromJson shortcode to produce year-grouped tables of winners.
• Department intranet: reuse static HTML blocks (like newMembers) across multiple pages for consistent announcements.

How does the theme work?

Install Hugo, place the asu_theme folder in your site's themes directory, set theme = "asu_theme" in your config file, and run hugo serve to preview the kitchen-sink page at localhost:1313. Add pages with hugo new page_name.html, set draft: false in the front matter to publish, and customize navigation and CSS as described above.

FAQ

What do I need to know before using this theme?

Basic familiarity with HTML, CSS, and Markdown helps, but Hugo itself requires no knowledge of GoLang, package managers, or terminal tools beyond running commands. Patience and curiosity can make up for missing web experience.

How do I add a new page?

Run hugo new _index.html to create a homepage, or hugo new page_name.html for other pages. Change draft to false in the page's front matter so it appears on the live site.

What shortcodes are included?

The theme ships with three shortcodes: listFromJson (reads a JSON file and renders grouped tables), newMembers (a static HTML block), and rawhtml (renders HTML inside Markdown). They live in themes/asu_theme/layouts/shortcodes/.

Is this theme a replacement for a Drupal or WordPress site?

No. The Hugo theme is lightweight and fast, but the documentation states that while advanced features can be emulated, Hugo is not meant to replace a typical CMS.