目的

WebAssembly 略称 WASM に興味があったので、Go で Web ツールを作成しました。 Web ページを無料で作れるところを探したところ、 github pages が良さそうだったのでこれを使ってみました。

ページの構成

コードと最終的な成果物

コード

https://github.com/ludwig125/githubpages/tree/main

最終的に作ったページ

https://ludwig125.github.io/githubpages/

環境と言語

私は Windows 上の WSL で Ubuntu20.04 を使っています。

$cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.3 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.3 LTS"
VERSION_ID="20.04"

なお、この記事に登場する言語は Go、HTML、Javascript ですが、私は Go は数年の開発経験があるものの、HTML と Javascript はほぼ無知の素人 なので、手探りでの開発となりました。

githubpages の作成

https://docs.github.com/ja/pages/quickstart

を参考に進めます。

この状態で https://ludwig125.github.io/githubpages/ を見ると以下の通りです。

この時点では code は以下の通りです。

このコードをいじるために、ターミナルから操作してみます。

[~/go/src/github.com/ludwig125] $g clone git@github.com:ludwig125/githubpages.git
Cloning into 'githubpages'...
warning: You appear to have cloned an empty repository.
[~/go/src/github.com/ludwig125] $
[~/go/src/github.com/ludwig125] $cd githubpages

gh-pages ブランチに以下のファイルがあります。

[~/go/src/github.com/ludwig125/githubpages] $ls
_config.yml index.md

_config.yml を以下のように書き直してみます。

theme: jekyll-theme-cayman

title: ludwig125's homepage
description: ludwig125's homepage by githubpages

これで commmit して git に push します。すこし，待つと https://ludwig125.github.io/githubpages/

以下のようにページに上の説明が加わわりました。（title はタブの上にカーソルを重ねると浮かび上がる）

ここまでで、基本的な github pages については理解できました。

ludwig125のブログ

頑張りすぎずに頑張る父

github pages でWASMを使ったGoのWebツールを動かす【その１】（github pages導入）

目的

ページの構成

コードと最終的な成果物

環境と言語

githubpages の作成