No Place Like Home
Our last two blog posts — Lets Start Reacting and Unburying the Lede — were rather anticlimactic. In the first one, we updated our file processor to generate HTML pages from React components. In the second one, we set up a crawler to fetch metadata from our posts and populate it into a
But we haven’t actually done anything with those tools. That changes today!
Let’s build a homepage
cheerskevin.com tries to serve the
index.html file. Prior to this post, I had a manually-created file sitting there, just pointing to the most recent blog post. But now we can automatically build it as a React component:
There’s a lovely little static page. Though we don’t have to keep everything in a single file like this. The only constraint for our renderer is that whatever we
export default down at the bottom, needs to be a renderable React component. Content like the
<html lang='en'> is stuff I think we’re going to find ourselves reusing on most pages. So I’m going to go ahead and extract that to a new file,
Here, we’re creating another component that expects
children and a
title field, which it conveniently inserts for us. Now we can go back to our Homepage component and shrink it down a little bit!
Much nicer - and now we can reuse the PageWrapper component for other pages. We can just change the contents of that tag, and pass it a different title.
<PageWrapper title="About CheersKevin.com"> for an about page would work nicely!
Note that we use
import PageWrapper from './PageWrapper'; to pull in the wrapper component. Let’s use the same technique to pull in our article metadata we gathered in the last post.
Snagging the metadata
Our article metadata lives in a file called
manifest.yml, but if we try to import that outright, we’re going to run into a small issue: we can’t really just require a
js-yaml, so let’s install that!
This library will convert YAML markup into a JS object, but importantly, we still need to read the YAML from the file ourselves. Thankfully, Node comes with the
fs filesystem library which can do that for us. Let’s update our Homepage component to pull in this information:
We grab the
manifest.yml file with
fs.readFileSync, then pass that to
map to transform each record into some HTML of its own. Here’s the result:
Not bad for a small amount of work! Of course, the manifest also has stuff like lead image and color scheme information, post dates, and more. So we can definitely expand on this (not to mention, style it up a fair bit). But now that we have our
manifest.yml set up, and the ability to create static HTML from React components, we’re all set to move forward with our great and awesome homepage!
That is, of course, outside of the scope of this article, so you’ll just have to come back later to see the fancy styled page in a week or two!