DEV Community

Cover image for Getting Reacquainted with Wyam
Ryan Rousseau
Ryan Rousseau

Posted on • Updated on • Originally published at blog.rousseau.dev

Getting Reacquainted with Wyam

I attended .NET Unboxed back in 2015. While there, I met Dave Glick who presented a lightning talk on his project Wyam.

Wyam is a static content generator powered by Roslyn. Static sites are the most common case, but Wyam can generate other types of content using modules.

That lightning talk was my first introduction to static site generators. I was immediately taken with the idea. Since then, I've kept up with Wyam and given it a few trials, but I haven't published any sites with it until today.

Two of the features that are new to me are Recipes and Themes. You can use a Recipe to reduce the configuration and input required to generate a site. The blog recipe will generate a blog complete with an archive, tags, and feeds. You can combine a recipe with a theme to customize the layout and style. These commands will generate an empty blog using the default theme and then serve it locally.

> wyam -r Blog
> wyam preview

Blank blog generated by Wyam

This is a great starting point. I read through the docs to find how to add a post. The blog recipe looks for files in a posts folder under the input folder. It takes those files and runs them through the recipe to generate the post html files. I created the posts folder and added getting-reacquainted-with-wyam.md with some placeholder content.

Title: Getting Reacquainted with Wyam
Lead: Creating a blog with Wyam in 2019
Published: 3/2/2019
Tags:
  - wyam
---

Content goes here.

I like the look of the Stellar template so I used that when I rebuilt.

Blog with post generated by Wyam

It looks pretty good, but I want to change the background image. You can overwrite files used by the template by placing new versions in the input folder. I grabbed a copy of the main CSS file from the GitHub repo, dropped it in input/assets/css, and made the updates.

The image is from Unsplash, a resource found in Wyam's documentation. I need to credit the photographer so I copied down the footer template and added the credit.

Blog with footer updates" title="Blog with footer updates

The text isn't very readable against the picture, but that's something I can work on later. The last change to make for the initial version is the title and description of the site.

These can be set through the config.wyam file.

Settings["Title"] = "blog.rousseau.dev";
Settings["Description"] = "Ryan Rousseau";
Settings["Intro"] = "Tech, Comedy, Cats";

I also modified the navbar layout to use "Home" instead of the blog title for the first link.

Blog with all updates

I might add in a comment system, but that's best left for another day. In total, I made the following changes to get a blog site up and running.

  • Install Wyam
  • Customize one CSS file and two layouts
  • Take a few screenshots
  • Write a post in Markdown
  • Build the site using a recipe and theme
  • Deploy to my hosting

I'm hosting on Firebase. I have a few projects hosted there already so it's an easy choice. I'm deploying manually now. I'll cover automating deployments to Firebase in future posts.

This post was originally published at blog.rousseau.dev. Cover photo by Davide Cantelli on Unsplash.

Top comments (0)