chapter nine

9 Accessing APIs to enhance functionality

 

This chapter covers

  • Enhance the website using APIs accessed at compile time as well as runtime.
  • Embedding Tweets into a web page at compile time
  • Create working forms using third-party APIs.
  • Using form APIs to create dynamic forms with total control with the content author.
  • Creating a JSON-based API for our website at compile time using Hugo’s output formats.

In the first half of this book, we worked on the Hugo website in isolation. This chapter involves using Hugo to get access to data from outside of our website. We will also be adding dynamic features and learning how the Jamstack can perform tasks that require server intervention without sacrificing the website’s performance.

In this chapter, we will focus on APIs, the "A" of the Jamstack. APIs or Application Programming Interfaces are mechanisms with which systems or components within a system can interact with one another. A service exposes certain functionality through an API, and the client can use the API to consume it. APIs are everywhere in the web ecosystem. When a web page like localhost:1313/index.html is requested, the web browser sends a GET API request for /index.html the localhost server at port 1313 using the HTTPS protocol. We can use APIs in our websites to request data processing or access information stored on a service. For example, we can access the Tweet or an Instagram image using a given Tweet id using the HTTP-based API exposed by these services.

9.1 Build time vs. runtime API access

9.2 Embedding Tweets at compile time

9.2.1 Understanding the Twitter API

9.2.2 Understanding Hugo’s functions for compile-time API access

9.2.3 Rendering a Tweet as a testimonial

9.2.4 Managing content lifetimes

9.3 Hugo and REST APIs

9.4 Creating a contact us page the Jamstack way

9.4.1 Setting up a contact form

9.4.2 Choosing a form provider

9.4.3 Using Netlify forms for the contact us page

9.4.4 Using Formspree for contact forms

9.5 Building dynamic surveys

9.6 Commenting using the Jamstack

9.6.1 Displaying a comment form:

9.6.2 Displaying comments

9.7 Pseudo APIs with compile to JSON

9.7.1 Custom output formats in Hugo