Hello! This post is me documenting how I got Material Components for the Web working in a Hugo theme. I’m sure there are better-written posts out there, but I wanted to write this one myself, for myself, because for sure in about a week or so I will have forgotten how exactly I was able to get this done.

I am writing this as I go along, so I’m not actually sure I will succeed, so fingers crossed!

Really getting started

I am starting this on a new empty Hugo site, with a new empty Hugo theme.

$ hugo new site my-site
$ hugo new theme my-theme
$ hugo new post/hello-world.md
$ hugo server

This won’t display anything, because we have no layouts defined as yet.

A few files to get us started:

<!-- my-theme/layouts/_default/baseof.html -->
{{ partial "header.html" . }}
{{ block "main" . }}
{{ end }}
{{ partial "footer.html" . }}

<!-- my-theme/layouts/header.html -->
<!DOCTYPE html>
<html{{ with .Site.LanguageCode }} lang="{{ . }}"{{ end }}>
<head>
</head>
<body>

<!-- my-theme/layouts/partials/footer.html -->
</body>
</html>

<!-- my-theme/layouts/index.html -->
{{ define "main" }}
  {{ range first 1 ( where .Site.RegularPages.ByPublishDate.Reverse ".Type" "post") }}
  <!-- Display LATEST published blog post  -->
    {{ .Title }}
    {{ .Content }}
  {{ end }}
{{ end }}

These should be enough to get us started. Running $hugo server should let us see something when we navigate to localhost:1313.

Setting MDC up

Following along with the instructions on the material website (using yarn instead of npm):

# in mytheme/
$ yarn init 
$ yarn add material-components-web
$ yarn add webpack@3 webpack-dev-server@2 css-loader sass-loader node-sass extract-loader file-loader

and adding a few scripts to my package.json

"scripts": {
  "dev": "webpack --watch --config webpack.config.js",
  "build": "webpack -p --config webpack.config.js"
}

…and I’m good to go!

I could/should probably use gulp or similar so I can run hugo serve and yarn run dev in one go, but for now this works well enough for me and I can focus on actually putting a theme together.

Using Material Components for the Web

byPointy Far

Really getting started

Setting MDC up