[Gemini × Google Sites] I Made a Web Page for Hands-on Materials with Gemini Even Though I Don't Know HTML!

I'm chicca from the Cloud Business Division, Operations Department, Customer Support Group, Account Team.

To promote the use of the replaced "Knowledge Base LM," I conducted a hands-on workshop on NotebookLM within our team.

https://dev.classmethod.jp/articles/ai-notebooklm/

This blog summarizes the preparation work for that workshop.
During preparation, I wanted to try using Gemini's feature to output to Google Sites (web pages), so I'll share that experimental record as well.

*Note: The hands-on workshop was held in early July 2025. While the interface may have changed since then, I'm describing it as it was at that time.

1: Introduction

First, let me outline the workshop overview.

• Target audience: Account team members (non-engineers), about 30 people
• Purpose: Introduce AI usage methods and promote AI utilization in daily work
  • Understand NotebookLM's basic features and operations, and envision business applications
  • Experience the efficiency of using AI for information gathering and organization
• Hands-on content:
  • Adding documents to NotebookLM sources
  • Creating notes using the Studio feature
  • Creating audio summaries and mind maps

I chose a hands-on format because I wanted everyone to actively use AI in their work going forward.

Writing it out makes the purpose and content seem quite impressive.
In reality, it was much more casual, like "Let's all try out this new AI together~".

Additionally, I had a personal goal of testing "creating materials in Google Sites with content generated by Gemini."
(*At that time, the Google Slides output feature hadn't been implemented yet, so I used Google Sites)

2: Creating an explanatory web page with Google Sites

For the workshop, I first needed to deepen my own understanding of NotebookLM.
I consulted with Gemini and tried outputting to Google Sites.

I participated in an online NotebookLM seminar hosted by Google on June 23, 2025. I fed those materials into Gemini to create an explanatory web page.

https://cloudonair.withgoogle.com/events/intro-notebooklm-q2/

Procedure:

1. Enable the "Canvas" feature in Gemini
2. Enter the following prompt

Prompt

I'm planning a NotebookLM hands-on workshop for IT beginners. Please create workshop materials from the uploaded documents.

3. Select "Web page" from "Create" in the upper right of the preview screen
4. Check the web page preview that appears
5. Select "Code" and click "Share," then "Copy content"
6. Open Google Sites, select "Blank page" > "Insert" > "Embed"
7. Paste the copied HTML code in the "Embed code" tab

Just like that, the explanatory web page was completed in no time. This base is sufficient.

3: Organizing differences between NotebookLM and Gemini and outputting to HTML

Next, I researched the "differences between NotebookLM and Gemini" that I wanted to explain on the day. I asked Gemini.

Prompt

I'm conducting a NotebookLM usage workshop in-house.
The audience is IT beginner team members.
Please create a table showing the merits and demerits to help them understand the difference between when to use NotebookLM versus Gemini.

Gemini created the following comparison table:

I wanted to include this table in the explanatory web page, so I asked about display methods.

Prompt

I want to display this table in Google Sites. How should I do it?

Gemini's response

Method 1: Paste directly as text (simplest)
(omitted)
Method 2: Embed Google Spreadsheet (recommended)
(omitted)
Method 3: Embed HTML code (more advanced method)
This method involves directly writing the table using HTML and CSS, then embedding it in Google Sites. This might be a bit difficult for IT beginners, but I'll include it for reference.
To create HTML code:
Copy the following HTML code to a text editor.

NotebookLM and Gemini Comparison Table (HTML)
(rest omitted)

Since our previous conversations assumed an "IT beginner" audience, it offered three methods of varying difficulty.

I don't have HTML knowledge, but I wanted to integrate with the explanatory web page I had already created, so I tried "Method 3: Embed HTML code."

I copied the HTML code of the explanatory web page to a text tool and adjusted the placement while looking at the preview.
The headings are inconsistent, but I'm not concerned about that.

4: Creating operational instruction materials for the workshop

Next, I created the actual operation instructions (tutorial) section.
Here too, I used Gemini's "Canvas" mode.

Prompt

I want to create a NotebookLM tutorial with screenshots.
Please explain how to use the following features:

1. Creating notebooks and adding sources
2. Using the chat function to ask questions
3. Using the memo function to organize information
4. Automatically generating output with the Studio feature

I output Gemini's generated content as a "web page" again and converted it to HTML.
I checked the content for hallucinations, and finding no issues, adopted it as workshop material.

5: Setting up links on the created web pages

I pasted the output HTML code into Google Sites, completing two web pages: one explanatory and one for the hands-on tutorial. Next, I connected them.

Specifically, I set up a link so that clicking the "Experience basic features" button would take you to the hands-on tutorial web page.
Not being familiar with HTML, I referenced link descriptions in Gemini's generated code and set up hyperlinks by trial and error.

Link description I referenced

<a href="https://notebooklm.google.com/" target="_blank" rel="noopener noreferrer" class="...(omitted)...">
    Try NotebookLM
</a>

I inserted the URL of the hands-on tutorial web page after "a href=" in the "Experience basic features" code line.

With that, I completed a decent-looking material web page with buttons.

Finally, I selected the web page's publication scope in "Share."

6: Preparations for the day

The workshop time was 30 minutes.
For a smooth experience on the day, I asked participants to prepare the following in advance:

• Create a document storage folder for "Sources"
  • Create a folder called "20250710Source" on the desktop
• Prepare documents for "Sources"
  • Select two pages from procedure manuals
  • Convert the selected pages to PDF and store them in the created folder

The aim was to help participants realize the usefulness by using documents related to their daily work.

I also made preparations for myself:

• Creating a workshop overview page (Notion)
• Including all necessary links for the day, such as slide material URLs that everyone would add as "Sources," on the overview page
• Setting up a casual discussion thread in Slack

7: Conclusion

That's the full scope of preparations for this workshop.
I was able to create web pages without writing code, using Gemini and Google Sites.

I conducted two team study sessions.
The first was the NotebookLM hands-on workshop introduced here, and the second was an explanation of "Knowledge Base LM" usage.
By using procedure manuals and other sources that team members regularly interact with, I think they were able to form concrete images of using AI in their work.

Personally, I gained significant learning in two areas:

1. Experiencing the ease of outputting to Google Sites
2. Organizing the distinctive features of Gemini and NotebookLM

Sorting out how to use different AI tools was a valuable input that proved helpful in preparing for the internal briefing held in November.

https://dev.classmethod.jp/articles/gemini-notebooklm-ai-prepdocuments/

While I can't quantitatively track how much participants are using AI, they dedicated 30 minutes × 30 people = 900 minutes of work time, so I hope writing this blog balances the scales a bit.

I hope this blog serves as a reference for someone.
Thank you for reading to the end.