conf
Talks and workshops from 2022
9:00am — 9:45am PDTLive Q&A
Live Q&A with Hugo creator - Steve Francia
Learn the origin story of Hugo and how it's progressed into the flourishing open source project it is today.
9:45am — 10:10am PDTTech Talk
Giving your Content Team Full Autonomy with a Hugo CMS
Hand over the reins of your Hugo site to your content team with CloudCannon. In this talk we will learn how to build pages visually, use a custom component library, and simplify collaboration on your Hugo projects.
10:15am — 10:40am PDTTech Talk
How Hugo handles your pages (technically speaking): Lexer, Parser and Goldmark
We will reverse engineer Hugo and study its internal structure. We will focus on the three main components devoted to process Markdown content:, the lexer, the parser and Goldmark. We will find out where in the code each one of these components is located, what they take as input and what they produce as output. We will discuss some of the technical choices made by the developers and their pros and cons. This is a great starting point for anybody who would like to help develop Hugo or would like to know more about its inner structure.
10:45am — 10:50am PDTLightning Talk
Supercharge your Deployment with Cloudflare Pages
Cloudflare Pages is a super-fast way to deploy your sites directly from your Git provider. This talk will cover how to set up your Hugo websites with Cloudflare Pages, and we’ll explore all the features you get out of the box using Pages for deployment.
10:50am — 10:55am PDTLightning Talk
Making News Apps with the THANG Stack
News never stops, so it’s important to be able to make maintainable sites quickly. The THANG Stack (Tailwind, Hugo, Alpine.js, Netlify, and Go) helps me launch on deadline.
10:55am — 11:00am PDTLightning Talk
Implementing conditional processing in Hugo
Some of the Nuance TechPubs content is shared between products. In particular, many components are available both in hosted and on-premises environments. And while most of the content is similar between both environments, some content is environment-specific, and we needed to find a way to tag that content and include or exclude it as needed. To solve this issue, we created our own shortcodes and updated the theme to be able to show and hide content as needed. This presentation will give a quick demo of how we implemented this approach.
11:00am — 11:25am PDTTech Talk
Helping Humans at Scale with Continuous Delivery of Hugo on AWS
Noah Gift
Executive in Residence, Master in Interdisciplinary Data Science
Duke University
Learn to create Hugo websites that continuously deploy to AWS S3 Static Hosting and Amazon CloudFront CDN. One of the advantages of building on top of the AWS cloud is that it is a globally distributed highly available system. In this talk, I walk through how to create and then continuously deploy training content-based websites through AWS technologies and Github.
11:30am — 11:55am PDTTech Talk
My journey from LAMP stack to Jamstack with Hugo!
Miguel Useche
Freelance Web Developer
After doing websites with LAMP stack for 2 decades I decided to give a try to JAMStack with Hugo, and I fell in love with Hugo at first sight. This talk will show the first steps and results of working with Hugo from the perspective of a LAMP stack developer. People will know the difference between the platforms, why I chose Hugo, how Hugo improved the development process, the quality of the website and how it reduced my deployment time without investing too much time on learning it.
12:00pm — 12:05pm PDTLightning Talk
HABIT Stack — an elegant solution for component-driven development
In this talk I’ll discuss the stack I use to create websites for Twitch (and also the HugoConf website) — comprised of Hugo, Alpine.js, Bookshop, and Tailwind CSS. With this stack I’m able to create sites that show the best of component-driven workflows, ideal for both efficient development and for non-technical content editors to add content, build pages, and keep the sites up to date over time.
12:10pm — 12:15pm PDTLightning Talk
Get started with Front Matter CMS to manage your site
Are you looking for a CMS to manage your site? Front Matter is a Visual Studio Code extension that provides CMS functionality, so you never have to leave your editor. In this lightning talk, Elio will guide you through the installation and configuration process to know the proper steps when you start using it.
12:20pm — 12:25pm PDTLightning Talk
Word to Web with Hugo in 5 Minutes
Software Developer
For good or bad, the work world's predominant application for word processing is Microsoft Word. Given that a great deal of enterprise knowledge is stored in Word, and that same information is useful for many other purposes, it is beneficial to understand how to use Word to quickly create web pages that can be shared across the organization. This talk will show you how, using Hugo. The talk’s public repo: https://github.com/m2web/word-to-web
12:30pm — 12:55pm PDTTech Talk
Introducing Pagefind: static low-bandwidth search at scale
In this talk I’ll introduce Pagefind, a new open-source library for static websites that provides efficient search at scale without any extra infrastructure. I’ll demonstrate the process of adding Pagefind to a new site, and also show how well it works at scale — for example, Pagefind can return a search query against the entirety of MDN with a network payload as low as 300KB.
1:00pm — 1:25pm PDTTech Talk
Limitless HTTP requests with Hugo: from basic GET to GraphQL
In this talk, we’ll explore resources.GetRemote, the new HTTP request solution for Hugo! We’ll cover basic GET requests and see how to process their response data or handle their errors. Then we’ll experiment with more complex POST and UPDATE requests in the context of managing a search index with MeiliSearch REST API. Finally, we’ll use the Shopify Storefront API as a case study for performing GraphQL requests with Hugo!
1:30pm — 1:55pm PDTTech Talk
Going wild with Hugo modules
The Nuance TechPubs team produces documentation for multiple products. Because these products are stand-alone, they require their own Hugo projects. But we needed to reuse content between projects and ensure that products in the same line share the same look and feel. To implement this, we went wild with Hugo modules! This presentation will show how we: created a module that contains the building blocks that apply to all projects; stored project-specific assets, layouts, and content in this module; created modules for components that are shared between products; and used the Hugo configuration files to pull in the correct content.
2:00pm — 2:05pm PDTLightning Talk
Making Image Uploads Faster with Figmage
A picture speaks a thousand words. But it's also tough to write a thousand words right on the first try. The colors are off, the sizing can be wrong, or maybe the image just doesn't vibe with your content as well. And of course, every time you tweak the design, you have to export it, re-upload it, and re-deploy. Re-upload, re-deploy. In this talk, learn about Figmage, and how it saves you from the image upload cycle.
2:05pm — 2:10pm PDTLightning Talk
Resize all images
Images are an important part of your page load (20% on average). I will show you how you can resize all images in your Hugo project, even when you are using an external CMS for content and when you have clients uploading these images. Every byte counts when you want to get a 100% Google Lighthouse Score.
2:10pm — 2:15pm PDTLightning Talk
Why PaperCut went static with Hugo and Cloudcannon
We discuss minimizing waste with print management software, the value of coffee, and our process of migrating and consolidating PaperCut’s sites from legacy stacks to Hugo.
2:20pm — 2:25pm PDTLightning Talk
Meet Quiqr
Quiqr in nutshell. A tour through all major CMS and publishing features. After these five minutes, it will take you only another ten minutes to have your own Quiqr maintained Hugo website live.
2:30pm — 2:55pm PDTTech Talk
Demystifying Internationalization with Hugo
Preparing a website for an international audience comes with lots of technical complexities. How do you manage multiple languages flexibly and efficiently using Hugo? How do you make the appropriate design adjustments for each language in a way that doesn’t result in duplicative CSS? In this talk, we’ll answer these questions while walking through the technical details behind the new Arabic edition of Laws of UX (lawsofux.com/) and exploring Hugo’s Multilingual Mode, how to translate content based on i18n configuration, and CSS logical properties.
3:00pm — 3:25pm PDTTech Talk
Mistakes I want to avoid for my next Hugo theme
Initially, I had built the Toha Hugo theme for my own portfolio. Then, I shared the theme with the community. When the theme got popular, I started to get feature requests that I hadn't planned before. People started using the theme for different use-cases that weren't intended initially. As a result, I had to keep changing the theme to accommodate their needs. However, it is hard to change something that is being used by hundreds of people. In this talk, I will share the experience I have gained as I maintain the theme. I will share the mistakes I have made, and how can we avoid them.
3:30pm — 3:55pm PDTTech Talk
Beyond the Static: Adding Interactivity to Your Hugo Sites
We all know Hugo as one of the best static site generators available today, but whether you're using Hugo to host your personal blog, marketing website, or other web application, sometimes you want to add a little bit of interactivity. In this talk, we'll explore how you can go beyond the static and add interactivity with built-in Hugo capabilities as well as explore how you can augment your Hugo site with serverless functions to get the best of: performance, speed, and productivity.
4:00pm — 4:25pm PDTTech Talk
Reduce, reuse, reward: How to not repeat yourself in your docs
Aaron Collier
Technical Education Manager
Platform.sh
Keeping documentation up to date can be a big task. It's even harder when you need to change one detail in many places. This talk will look at how to take advantage of features in Hugo to effectively reuse content in documentation. That way you can update once and have it apply to multiple locations. The talk will also touch on some of the potential pitfalls to look out for and how to organize for success.
4:30pm — 4:55pm PDTTech Talk
Custom Shortcodes for the Win
Senior Software Developer
Shortcodes provide a nice clean way of making reusable functionality within your content pages. We will focus on explaining their syntax and some of their constraints while demonstrating how to create dynamic image placeholders using some of Hugo's existing image manipulation tools. These placeholders improve the User Experience of a site in several important ways that we will go into more depth about.
5:00pm — 5:05pm PDTLightning Talk
How to build a Developer profile
As a Developer, there are the things that we want to share with others. It might be a code snippet, tech concept, use cases, solutions, or to showcase your projects and experiences. As a terminal lover I was always concerned whether I can write my blog in Vim, or whether I could release my blog in the same way I release my features. In this talk, I am going to share some tips on how to set up the platform in a developer environment only. Also, I will discuss some tools which helped me to build my profile at ashish.one.
5:10pm — 5:15pm PDTLightning Talk
Using PurgeCSS with Hugo
A quick guide to setting up PurgeCSS with PostCSS to automatically optimize the CSS on your site by only including the classes that you use. The sample repo for this talk is available at https://github.com/coliff/purgecss-test
10:00am — 10:45am PDTWorkshop
Build an Open Source Blogging Platform With Appwrite and Hugo
We will see how we can build a blogging platform in a few minutes with Hugo and Appwrite. We will use Appwrite to store the content and use Hugo to build with the content that is stored in Appwrite.
11:00am — 11:45am PDTWorkshop
Editing Hugo live in the browser: how to bring page-building workflows to your Hugo sites with Bookshop
This workshop will demonstrate how to add Bookshop, a component development workflow for static websites, to a Hugo site. Bookshop helps you develop and reuse components across your site, browse a local component library, and create a rich live-editing experience in the browser. Most importantly, Bookshop works with Hugo templates, improving your DX while shipping a #leanweb to your users.
12:00pm — 12:45pm PDTWorkshop
Using GitHub Pages with Actions to deploy Hugo sites in seconds
If you've used GitHub and Hugo, you've probably heard of or maybe even use GitHub Pages. Until recently, the only way to deploy a site to Pages using something other than Jekyll was to run the build externally and commit the output back to a special branch of your repository. In this workshop, I'll cover a new workflow that treats all static site generators the same, and unlocks the potential of using GitHub Actions to build and deploy a Hugo site in seconds, without ever leaving your browser.
1:00pm — 1:45pm PDTWorkshop
Quiqr workshop for Hugo site developers
This workshop shows how to quickly develop websites for non-technical customers. We're going to add a Quiqr CMS layer on top of an existing Hugo Theme. I'll show some CMS developing patterns and best practices. As a bonus we will move the theme styling from code to a non-technical user interface. Finally I'll show how to share a Quiqr made website to the end user.
2:00pm — 2:45pm PDTWorkshop
How to Achieve Perfect Google Lighthouse Scores Using Hugo
I will provide a step by step breakdown on how to find the easter egg in Google Lighthouse when you achieve perfect scores by using Hugo.
HugoConf 2022 Wrap up video