github pages でWASMを使ったGoのWebツールを動かす【その1】(github pages導入)
目的
WebAssembly 略称 WASM に興味があったので、Go で Web ツールを作成しました。 Web ページを無料で作れるところを探したところ、 github pages が良さそうだったのでこれを使ってみました。
ページの構成
- github pages でWASMを使ったGoのWebツールを動かす【その1】(github pages導入) - ludwig125のブログ
- github pages でWASMを使ったGoのWebツールを動かす【その2】(WebAssembly導入) - ludwig125のブログ
- github pages でWASMを使ったGoのWebツールを動かす【その3】(WebAssemblyでの計算機) - ludwig125のブログ
- github pages でWASMを使ったGoのWebツールを動かす 【その4】(WebAssemblyでのUnixTime変換ツール作成) - ludwig125のブログ
- github pages でWASMを使ったGoのWebツールを動かす 【その5】(UnixTime変換ツールのTinyGoへの置き換え) - ludwig125のブログ
- github pages でWASMを使ったGoのWebツールを動かす 【その6】(WASM の Web ツールを github pages で公開する) - ludwig125のブログ
コードと最終的な成果物
コード
最終的に作ったページ
環境と言語
私は 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 については理解できました。