COVID19 Lockdown Dev Log – Day 6
What I Worked On
Using React Helmet with Gatsby and implementing the design for the portfolio with CSS.
What I Learned
I learned to add custom HTML in the <head> of a Gatsby site using React Helmet. I needed to use custom fonts from Google Fonts, which required me to load them via the CDN in the <head> element.
React Helmet is the recommended approach for this. The alternative is to modify your HTML through ‘html.js’. This will be “hard coded”, meaning that you won’t be able to modify it dynamically. In this case I could actually do it like that, because I don’t have more than 1 page to render. I will use React Helmet though, as it is the recommended approach.
Installing React Helmet is done like so:
npm install --save gatsby-plugin-react-helmet react-helmetThen we add it to our plugins list in ‘gatsby-config.js’:
//gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
]
}All there’s left to do is import it into our page:
import Helmet from "react-helmet";
export default () => (
<Helmet>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@700&family=Yanone+Kaffeesatz:wght@400;500;600;700&display=swap" rel="stylesheet" />
</Helmet>
... more code
)The <link> I’m using here is the one that goes to the Google Font CDN and requests the fonts.
What Distracted Me During The Day
- Was reminded to reactivate my sale ad on DBA.dk
- I somehow ended up on Honkify.js when looking through the creator of Gatsby’s Github – https://honkify.netlify.com/ 😀
- GF wanted input on our meal plan for this week
Resources
- Gatsby custom HTML https://www.gatsbyjs.org/docs/custom-html/
- Gatsby and React Helmet https://www.gatsbyjs.org/tutorial/part-eight/#add-page-metadata