In this part we will learn in detail how to use Gatsby to create components for a website and take the data for each component from Wordpress.

<aside> 👉 The final source code: https://github.com/dinhanhthi/wordpress-gatsby

</aside>

<aside> 👉 Part 1: Build a website with Wordpress and Gatsby (part 1)

</aside>

Getting started to style your site

<aside> ⚠️ I do not talk too much about how to make your website like mine. That's something personal! I also do not talk about React syntax (The official document is great enough and it's out of scope for this post!). I am just talking about the techniques and tips I use to build the parts of the site.

</aside>

Useful packages

Some descriptions are taken directly from the introduction of the projects.

• cntl: If you use a library like Tailwind css where you compose your styles by providing lots of class names this utility tool can help you a lot.
• React Icons: Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Using Fontello

Fontello is an icon font generator that you can see as an alternative to Fontawesome. It includes several free icons from various services and allows you to upload your own icons (svg files) and create the appropriate icon fonts for you.

👉 IcoMoon is another wonderful alternative.

npm install -g fontello-cli

On fontello.com, upload the configuration file from /src/fontello/config.json. Add any other icons you want. After making your selection, click "Get config only".

Create a shortcut like this in package.json,

{
  "scripts": {
    "ud-fontello": "npx rimraf .fontello-session && fontello-cli --config src/fontello/config.json --css src/fontello/css --font src/fontello/font install"
  }
}

If you have any updates, just go to the source folder and run npm run ud-fontello!

<aside> ⚠️ Sometimes, there are duplicates of hex/decimal codes (although the names are different). Navigate to the "Customize Codes" tab on the fontello website, find the duplicates, and change them. Note that, on this tab, the codes are displayed in hexa-base, while in the downlowded configuration they are displayed in decimal-base ("code" field). On this site you can convert the two formats.

</aside>

• Add a custom icon?

Finally, add the following line to gatsby-browser.tsx,