Alt Text

Welcome to part-5 of the series. As, you might know from earlier part that i am upgrading by personal blog site https://nabendu.blog/

I have four task to complete in this part.

  • Change my picture in the home page.

  • Adding some advertisement to the home page.

  • Integrate mailchimp for subscription

  • Change the favicon of the site.

Let’s start to add more features to my blog site. For this we just need to change the profile_img in site-metadata.json

metadatametadata

Now, adding google Adsense to a gatsbyjs site is a bit tricky and i didn’t found many articles on it. And if you don’t have an Adsense account activate it’s a different process.

First we should copy the html.js file in the src folder.

html.jshtml.js

Next, for Adsense activation i need to add the below script inside tag. You need to use your own googleadclient.

Update html.jsUpdate html.js

Next, once i deploy the site to netlify and click a checkbox in Google adsence to complete. It gives me the below message, which means i need to wait for a few days.

Waiting for Google Adsense approvalWaiting for Google Adsense approval

Now, it’s time to add Mailchimp to my blog. For this i need to register for a mailchimp account first.

After that i had followed the instruction in this blog to get my endpoint.

Then we need to install the plugin for mailchimp.

mailchimpmailchimp

After that need to add the below in gatsby-config.js file.

Mailchimp addMailchimp add

We now need to create a Subscribe component, but i want to use sass for styling in the project. So, will first add plugin for that.

sass installsass install

Next, add it in the gatsby-config.js file.

sass in gatsby-config.jssass in gatsby-config.js

Then create a file subscribe.js inside the components folder and update it with below content. Here, we are just creating a class based component and submitting it to addToMailchimp function.

    import React, { Component } from 'react';
    import addToMailchimp from "gatsby-plugin-mailchimp";
    import * as styles from './subscribe.module.scss';

    class Subscribe extends Component  {
        state = {
            email: "",
            statusMsg: "",
            statusMsgColor: "green",
            subscribing: false,
        }

    handleSubmit = (e) => {
            e.preventDefault();
            this.setState({ statusMsg: "", subscribing: true });
            let { email } = this.state;
            addToMailchimp(email)
                .then(data => {
                data.result === "success"
                    ? this.setState({
                        statusMsg: "Your subscription was successful!",
                        statusMsgColor: "green",
                        email: "",
                        subscribing: false,
                        })
                    : this.setState({
                        statusMsg: "This email has already been subscribed.",
                        statusMsgColor: "red",
                        subscribing: false,
                        })
                })
                .catch(err => {
                    this.setState({
                    statusMsg: "An error occured. Please re-try",
                    statusMsgColor: "red",
                    subscribing: false,
                    })
            })

    };

    render() {
            let { statusMsg, subscribing } = this.state;
            let btnCTA = subscribing ? "Subscribing" : "Subscribe";
            return (
                <form onSubmit={this.handleSubmit} className={styles.EmailListForm}>
                    <h2>Subscribe to receive updates on new posts!</h2>
                    <div className={styles.Wrapper}>
                        <input
                            placeholder="Email address"
                            name="email"
                            type="text"
                            value={this.state.email}
                            onChange={e => this.setState({ email: e.target.value })}
                        />
                        <button type="submit">{btnCTA}</button>
                        {statusMsg && (
                            <div className="col-12">
                                <p
                                className="text-left"
                                style={{ color: this.state.statusMsgColor }}
                                >
                                {statusMsg}
                                </p>
                            </div>
                        )}
                    </div>
                </form>
            );
        }
    };

    export default Subscribe;

Next, create a subscribe.module.scss in the same directory and the below content in it.

    .EmailListForm {
        display: flex;
        flex-direction: column;
        background: # f2f2f2;
        color: # 2a2a2a;
        font-family: -apple-system, Helvetica, Arial, sans-serif;
        padding: 2rem;

    h2 {
            margin-top: 0;
            margin-bottom: 1rem;
        }

    .Wrapper {
            display: flex;
            flex-direction: column;
        }

    input {
            color: # 2a2a2a;
            width: 100%;
            border: none;
        }

    input {
            padding: 1rem 1.5rem;
        }

    button {
            display: inline-block;
            border: none;
            background-image: none;
            background-color: # DD0505 !important;
            color: white;
            border-radius: 0;
            letter-spacing: 1px;
            transition: all 0.1s linear;

    &:hover {
                cursor: pointer;
                background: darken(# DD0505, 15%) !important;
            }
        }
    }

Next, we will add this component Subscribe in our post.js file, so that it is displayed after every post.

post.jspost.js

Once, pushed to github and deployed to netlify we can subscribe now in my blog site(Please do subscribe).

SubscriptionSubscription

Now, we will add favicon to the site. For this we need to use gatsby-plugin-manifest. Let’s first npm install it.

npm installnpm install

Then we need to add a favicon in any folder. I generated a 512x512 png image and created an images folder in src and placed it. Also, need to add the below in gatsby-config.js file.

imagesimages

One of the best thing about this plugin is that it auto-generate favicon of other sizes.

Other sizeOther size

Now the favicon is showing on my site https://nabendu.blog/

FaviconFavicon

Hope, you liked the changes in did in my site. Will come soon with the process to apply ads to a gatsby site. I ad applied for many ad networks and will do once i get approval.

You can find the code till this at my github repo here.

This post is also available on DEV.