How to Embed a GitHub Pages Project in Blogger
One of the most useful things I learned while building small web projects is that you can host a project on GitHub Pages and then embed it directly into a Blogger post or page.
This is especially helpful if you are making small tools, browser games, JavaScript experiments, generators, calculators, or interactive pages. Instead of only writing about the project, you can let people try it directly on your blog.
For example, I use this workflow for some of my own web tools. I build the project with HTML, CSS, and JavaScript, publish it with GitHub Pages, and then place it inside a Blogger page using a simple iframe.
What you need
To embed a GitHub Pages project in Blogger, you need three things:
- A working GitHub Pages project
- A Blogger post or Blogger page
- A little bit of HTML knowledge
You do not need a complex setup. The main idea is simple: GitHub Pages hosts the actual project, and Blogger displays it inside your blog using an iframe.
What is an iframe?
An iframe is an HTML element that lets you display another webpage inside your current page. You can think of it like a small window inside your blog post.
The iframe does not copy the project into Blogger. The project still runs on GitHub Pages. Blogger only shows it inside the post or page.
A basic iframe looks like this:
<iframe
src="https://your-username.github.io/your-project/"
width="100%"
height="600"
style="border: none;">
</iframe>
The most important part is the src attribute. This is where you put the link to your published GitHub Pages project.
Do not use the normal GitHub repository link
One common mistake is using the normal GitHub repository URL. That will usually look something like this:
https://github.com/your-username/your-projectThat is not the link you want to embed. That link points to the source code repository, not the actual published website.
For the iframe, you need the GitHub Pages URL. That usually looks like this:
https://your-username.github.io/your-project/That is the public website version of your project. If you open that link in your browser and your project loads like a normal website, then it is the right link to use inside the iframe.
How to enable GitHub Pages
Before you can embed the project, you need to publish it with GitHub Pages.
In your GitHub repository, go to:
Settings → Pages
Then look for the GitHub Pages build and deployment settings. In many simple projects, you can choose to deploy from a branch, usually the main branch, and select the root folder or the /docs folder depending on where your project files are.
For a simple HTML, CSS, and JavaScript project, your project usually needs an index.html file. That file is the entry point of the website. When someone opens your GitHub Pages URL, GitHub Pages loads that file first.
After you save the GitHub Pages settings, GitHub will publish your project. Sometimes it takes a few minutes before the page is available.
Embedding the project in Blogger
Once your GitHub Pages project is online, go to Blogger and create a new post or page.
Then switch from Compose view to HTML view. This is important because the iframe is HTML code.
Now paste this code where you want the project to appear:
<div style="margin: 20px 0;">
<iframe
src="https://your-username.github.io/your-project/"
width="100%"
height="650"
style="border: none; max-width: 100%;"
loading="lazy">
</iframe>
</div>Then replace the example URL with your own GitHub Pages link.
What the iframe code does
Here is the same code again:
<iframe
src="https://your-username.github.io/your-project/"
width="100%"
height="650"
style="border: none; max-width: 100%;"
loading="lazy">
</iframe>
The src value is the page you want to embed. This should be your GitHub Pages URL.
The width="100%" part makes the iframe fill the available width of the blog post. This is usually better than using a fixed pixel width because it works better on different screen sizes.
The height="650" part controls how tall the embedded project appears. If your project is small, you can use a lower number. If your game or tool needs more vertical space, you can increase it.
The style="border: none;" part removes the default iframe border. Without this, the embedded project may have an old-looking frame around it.
The loading="lazy" part tells the browser that it can load the iframe later, when the visitor scrolls near it. This can help the page feel lighter, especially if the embedded project is not visible immediately.
A cleaner Blogger embed example
For Blogger, I like wrapping the iframe inside a div. This makes it easier to add spacing around the project.
<div style="margin: 24px 0; text-align: center;">
<iframe
src="https://your-username.github.io/your-project/"
width="100%"
height="700"
style="border: 0; max-width: 100%;"
loading="lazy">
</iframe>
</div>This version gives the embedded project some space above and below, which usually looks better inside a blog article.
Optional: Add a button below the iframe
Sometimes it is useful to add a direct link below the embedded project. That way, if the iframe does not load properly on someone’s browser, they can still open the tool directly.
<div style="margin: 20px 0; text-align: center;">
<a
href="https://your-username.github.io/your-project/"
target="_blank"
style="background: #333; color: white; padding: 12px 18px; border-radius: 6px; text-decoration: none; font-weight: bold;">
Open Project in New Tab
</a>
</div>I think this is a good idea because it gives visitors a backup option. Some embedded projects may feel better in a full browser tab, especially games.
Common problems
The iframe is too small
If your project looks cut off, increase the height value:
height="800"You can test different values until the project fits nicely.
The project does not load
First, open the GitHub Pages URL directly in your browser. If it does not work there, the problem is not Blogger. The project itself is probably not published correctly yet.
Also make sure you are using the GitHub Pages link, not the GitHub repository link.
The project works on desktop but feels bad on mobile
This usually means the project itself needs better responsive design. Blogger can show the iframe, but the project inside the iframe still needs to be mobile-friendly.
For small tools and games, it helps to design the project with flexible widths and simple layouts.
The iframe has weird spacing
You can adjust the wrapper div:
<div style="margin: 20px 0;">
iframe goes here
</div>The first value controls the top and bottom spacing. The second value controls left and right spacing.
Why this workflow is useful
I like this workflow because it connects coding projects with blogging. A normal blog post can explain the idea, the process, and what I learned. The embedded GitHub Pages project lets the reader actually try it.
This is much better than only showing screenshots. Screenshots are useful, but interactive projects make the post feel more alive.
It also helps organize small projects. Instead of having random GitHub repositories that nobody sees, you can turn each project into a blog post, a tool page, or both.
Example workflow
A simple workflow could look like this:
- Build a small HTML, CSS, and JavaScript project.
- Publish it with GitHub Pages.
- Create a Blogger page for the tool.
- Embed the GitHub Pages project with an iframe.
- Write a blog post explaining how and why you built it.
- Link the blog post and tool page together.
That last step is important. The tool page gives people a place to use the project, and the blog post gives search engines and readers more context.
Final thoughts
Embedding GitHub Pages projects into Blogger is a simple way to turn small coding experiments into real interactive content.
You only need a published GitHub Pages project, a Blogger post or page, and a small iframe snippet. Once you understand how the iframe works, you can reuse the same structure for games, generators, tools, calculators, and other small web projects.
For me, this makes Blogger much more useful. It is not just a place for writing. It can also become a small hub for projects, experiments, and interactive tools.
No comments:
Post a Comment