Static sites are wonderful. I’m a big fan.

They also have their issues. Namely, static sites either are purely static or the frameworks that generate them completely lose out on true static generation when you just dip your toes in the direction of server routes.

Astro has been watching the front-end ecosystem and is trying to keep one foot firmly embedded in pure static generation, and the other in a powerful set of server-side functionality.

With Astro Actions, Astro brings a lot of the power of the server to a site that is almost entirely static. A good example of this sort of functionality is dealing with search. If you have a content-based site that can be purely generated, adding search is either going to be something handled entirely on the front end, via a software-as-a-service solution, or, in other frameworks, converting your entire site to a server-side application.

With Astro, we can generate most of our site during our build, but have a small bit of server-side code that can handle our search functionality using something like Fuse.js.

In this demo, we’ll use Fuse to search through a set of personal “bookmarks” that are generated at build time, but return proper results from a server call.

Starting the project

To get started, we’ll just set up a very basic Astro project. In your terminal, run the following command:

npm create astro@latest

Astro’s adorable mascot Houston is going to ask you a few questions in your terminal. Here are the basic responses, you’ll need:

• Where should we create your new project? Wherever you’d like, but I’ll be calling my directory ./astro-search
• How would you like to start your new project? Choose the basic minimalist starter.
• Install dependencies? Yes, please!
• Initialize a new git repository? I’d recommend it, personally!

This will create a directory in the location specified and install everything you need to start an Astro project. Open the directory in your code editor of choice and run npm run dev in your terminal in the directory.

When you run your project, you’ll see the default Astro project homepage.

We’re ready to get our project rolling!

Basic setup

To get started, let’s remove the default content from the homepage. Open the  /src/pages/index.astro file.

This is a fairly barebones homepage, but we want it to be even more basic. Remove the  component, and we’ll have a nice blank page.

For styling, let’s add Tailwind and some very basic markup to the homepage to contain our site.

npx astro add tailwind

The astro add command will install Tailwind and attempt to set up all the boilerplate code for you (handy!). The CLI will ask you if you want it to add the various components, I recommend letting it, but if anything fails, you can copy the code needed from each of the steps in the process. As the last step for getting to work with Tailwind, the CLI will tell you to import the styles into a shared layout. Follow those instructions, and we can get to work.

Let’s add some very basic markup to our new homepage.

---
// ./src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---


  

    
My latest bookmarks
    
This is only 10 of A LARGE NUMBER THAT WE'LL CHANGE LATER
  

Your site should now look like this.

Not exactly winning any awards yet! That’s alright. Let’s get our bookmarks loaded in.

Adding bookmark data with Astro Content Layer

Since not everyone runs their own application for bookmarking interesting items, you can borrow my data. Here’s a small subset of my bookmarks, or you can go get 110 items from this link on GitHub. Add this data as a file in your project. I like to group data in a data directory, so my file lives in /src/data/bookmarks.json.

[
  {
    "pageTitle": "Our Favorite Sandwich Bread | King Arthur Baking",
    "url": "",
    "description": "Classic American sandwich loaf, perfect for French toast and sandwiches.",
    "id": "007y8pmEOvhwldfT3wx1MW"
  },
  {
    "pageTitle": "Chris Coyier's discussion of Automatic Social Share Images | CSS-Tricks  ",
    "url": "",
    "description": "It's a pretty low-effort thing to get a big fancy link preview on social media. Toss a handful of specific  tags on a URL and you get a big image-title-description thing ",
    "id": "04CXDvGQo19m0oXERL6bhF"
  },
  {
    "pageTitle": "Automatic Social Share Images | ryanfiller.com",
    "url": "",
    "description": "Setting up automatic social share images with Puppeteer and Netlify Functions. ",
    "id": "04CXDvGQo19m0oXERLoC10"
  },
  {
    "pageTitle": "Emma Wedekind: Foundations of Design Systems / React Boston 2019 - YouTube",
    "url": "",
    "description": "Emma Wedekind: Foundations of Design Systems / React Boston 2019 Presented by: Emma Wedekind – LogMeIn Design systems are in the world around us, from street...",
    "id": "0d56d03e-aba4-4ebd-9db8-644bcc185e33"
  },
  {
    "pageTitle": "Editorial Design Patterns With CSS Grid And Named Columns — Smashing Magazine",
    "url": "",
    "description": "By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.",
    "id": "13ac1043-1b7d-4a5b-a3d8-b6f5ec34cf1c"
  },
  {
    "pageTitle": "Netlify pro tip: Using Split Testing to power private beta releases - DEV Community