Control Access for Hugo theme using Netlify

Using Themes
1

In order to build a private blog and control access, I found netlify identity widget could be a solution.

Which hugo theme file should I add netlify-identity-widget code into?

I also found the approach might be helpful: netlify-plugin-password-protection, which applies staticrypt

For reproducible example, the Hugo Theme I used in blogdown is pulp theme, the file structure is the following:

.
└── pulp
    ├── .editorconfig
    ├── .eslintrc.json
    ├── .gitignore
    ├── LICENSE.md
    ├── README.md
    ├── archetypes
    │   └── default.md
    ├── assets
    │   ├── css
    │   │   ├── markdown-dark.css
    │   │   ├── markdown.css
    │   │   ├── style-dark.css
    │   │   ├── style.css
    │   │   └── syntax-highlight.css
    │   └── js
    │       ├── jquery-3.3.1.min.js
    │       ├── jquery.mark.es6.min.js
    │       ├── lunr.js
    │       └── search.js
    ├── exampleSite
    │   ├── .gitignore
    │   ├── config.toml
    │   ├── content
    │   │   └── blog
    │   │       ├── emoji-support.md
    │   │       ├── markdown-syntax.md
    │   │       ├── math-typesetting.mmark
    │   │       ├── placeholder-text.md
    │   │       └── rich-content.md
    │   └── static
    │       ├── css
    │       │   └── custom.css
    │       ├── img
    │       │   ├── avatar.jpg
    │       │   └── favicon.ico
    │       └── js
    │           └── custom.js
    ├── images
    │   ├── logo.png
    │   ├── screenshot.png
    │   └── tn.png
    ├── layouts
    │   ├── 404.html
    │   ├── _default
    │   │   ├── baseof.html
    │   │   ├── list.html
    │   │   ├── list.json
    │   │   ├── single.html
    │   │   └── terms.html
    │   ├── index.html
    │   └── partials
    │       ├── footer.html
    │       ├── head.html
    │       └── header.html
    ├── package.json
    ├── resources
    │   └── _gen
    │       └── assets
    │           ├── css
    │           │   ├── style0.css_d11fe7b62c27961c87ecd0f2490357b9.content
    │           │   └── style0.css_d11fe7b62c27961c87ecd0f2490357b9.json
    │           └── js
    │               ├── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.content
    │               └── bundle0.js_d11fe7b62c27961c87ecd0f2490357b9.json
    ├── static
    │   ├── .DS_Store
    │   ├── categories
    │   │   └── img
    │   │       ├── avatar.png
    │   │       ├── clear.png
    │   │       ├── favicon.ico
    │   │       └── search.png
    │   └── img
    │       ├── avatar-border.svg
    │       ├── avatar.jpg
    │       ├── bu.png
    │       ├── clear.png
    │       ├── favicon.ico
    │       └── search.png
    ├── theme.toml
    └── yarn.lock
2

As per the README of the linked repo, you add it as a dependency and then you configure it in netlify.toml

In the Hugo project config you may need to also add these files in the ignoreFiles array.

As I understand it, the plugin comes with its own template for the password protected page.