Is the Web page you made sleeping away without being published? | Ohayou Kanojo #62

I received this comment on the article where I published Ohayomi.

Thank you, KITAcore-san.

But this isn't something I could do just because I'm a professional. If you use GitHub Pages, anyone can publish a Web page for free.

You don't need Git or commands.

What is GitHub Pages?

It is a free hosting service for static Web pages provided by GitHub.

Just by placing an HTML file in a GitHub repository, anyone can access it via the URL https://username.github.io/repository-name/.

All you need is a GitHub account.

Publishing steps (No Git, browser only)

1. Create a GitHub account

If you don't have one, create it at https://github.com. It's free.

2. Create a repository

Click the "+" in the top right → "New repository".

Key settings:

• Repository name: Any name you like (this will become part of the URL)

• Public (⚠️ If you choose Private, you cannot use Pages on the free plan)

• Check "Add a README file" (If you don't check this, a branch won't be created, and you won't be able to upload files from the browser)

3. Upload the files

On the repository page, click "Add file" then "Upload files".

Simply drag and drop the HTML, CSS, JS, and other files from your PC.

The most important one is index.html. This will be your top page.

Once uploaded, write a commit message (a description of the changes) and click "Commit changes".

4. Enable GitHub Pages

Go to the "Settings" tab of your repository, then select "Pages" from the left menu.

Set "Source" to "Deploy from a branch", set the Branch to "main", set the folder to "/ (root)", and click "Save".

5. Publication complete!

Wait a few minutes, and the URL will appear at the top of the page.

https://username.github.io/repository-name/

With this, it is published to the entire world.

You can also edit files directly in the browser

"I published it, but I want to fix it a little."

No Git commands are needed. You can do everything on the GitHub website.

Let's try changing the text on the page you just published.

Click on index.html in the repository, then click the pencil icon (✏️) in the top right.

You can edit the code directly in your browser.

    <h1>こんにちは！</h1>
    <p>GitHub Pagesで公開したページです。</p>

Change this to that.

    <h1>ようこそ！</h1>
    <p>GitHub Pagesで公開したページです。</p>
    <p>ブラウザだけで更新できました！</p>

Click "Commit changes..." in the top right, write a commit message, and save.

Wait a few minutes and reload the page, and the changes will be reflected.
https://username.github.io/repository-name/

Other things:

• Add: Add new files via "Add file" -> "Upload files"

• Delete: Open the file and select "..." -> "Delete file"

• Replace: Upload with the same filename to overwrite

Once you have more files or start updating frequently, introducing Git (a command-line tool) will significantly increase your efficiency. But for now, just the browser is enough.

If you make it a PWA, you can place it on your smartphone's home screen

So far, this has been about publishing a webpage.

Taking it a step further, if you make it a PWA (Progressive Web App), you will be able to add it to your smartphone's home screen as an app.

There are two additional things you need.

manifest.json

A file that defines the app's name and icon.

{
  "name": "My First Page",
  "short_name": "MyPage",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#667eea",
  "theme_color": "#667eea",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

sw.js (Service Worker)

A file that controls offline behavior and caching. This is all you need for a minimal configuration.

const CACHE_NAME = 'my-app-v1';
const urlsToCache = ['./index.html'];
​
self.addEventListener('install', e => {
  e.waitUntil(caches.open(CACHE_NAME).then(c => c.addAll(urlsToCache)));
});
​
self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});

Load the manifest in the <head> of index.html and register the Service Worker with a <script> to finish.

<link rel="manifest" href="manifest.json">
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
  }
</script>

How to add to your smartphone's home screen

Just open the published URL on your smartphone and perform the following steps.

For iPhone: Open in Safari, tap the share button (the icon with a square and an arrow pointing up) → "Add to Home Screen"

For Android: Open in Chrome, tap the menu in the top right (︙) → "Add to Home Screen" or "Install app"

With this, you can launch it with a single tap like an app without opening the browser.

Pitfalls

Service Worker caching

Even if you update the files after publishing, old cache may remain in the user's browser and the changes might not be reflected.

The solution is to increment the CACHE_NAME version in sw.js.

const CACHE_NAME = 'my-app-v1';  // ← これを v2 にする

It is a specification that there is a lag until the Service Worker is updated on the browser side after an update.

CORS issue: If you want to call an API

If you want to call an external API like the note API from a page published on GitHub Pages, you will hit a wall called CORS (Cross-Origin Resource Sharing).

Due to browser security, this is a mechanism where calling APIs from different domains is blocked.

To solve this, you need to insert an API proxy in between. You can build one for free using Cloudflare Workers, but that is a separate topic, so I will only introduce the mechanism here.

ブラウザ（GitHub Pages）
  ↓ リクエスト
Cloudflare Workers（プロキシ）
  ↓ 中継
note API

Calling the note API directly from a browser results in 🚫.
Inserting a proxy in between results in ✅.

This becomes necessary when you want to "automatically retrieve note data," but it is irrelevant if you are just publishing a static web page or PWA.

Summary

You don't need specialized knowledge to publish the web pages you've created.

1. Create a GitHub account

2. Create a repository (as Public)

3. Upload your files

4. Enable Pages

That's it. You can do it in 5 minutes.

If you have pages sitting idle, try publishing them today. Once you publish, you can receive feedback, which will lead to your next steps.

This article is part of the following collaborative magazine.

[Mugiya] note x AI Utilization Promotion Magazine

A magazine that shares practical applications of AI x note, such as article creation and research using AI.

👉 "Ohayo Kanojo" is posted at @ohayo_kanojo every morning at 7:30.

#GenerativeAI #AIIllustration #Programming
#PersonalDevelopment #DevelopmentDiary
#Record #RealExperience #MorningActivity