Walrus Site を公開しよう！

このワークショップでは、まっさらなPCから Walrus Site を公開 するところまで解説します。
分からない部分は気軽に講師(🐷ぶたさん/💧しずく)や､周りの分かっていそうな人に質問しながら楽しくチャレンジしてみよう！

---

目次

あなたのWebサイトをWalrus上に公開しよう！やることは 8つ です。

0. VS Code・Git・Node.js を入れる（基本的な環境構築）
1. Sui CLI を入れる
2. デプロイ専用の鍵とSuiアドレスを作る
3. GitHub にリポジトリを作ってNext.jsプロジェクトを作成
4. GitHub に鍵情報を登録する（Secrets / Variables）
5. GitHub Actions を設定して、自動でWalrusに公開
6. デプロイして確認する
7. SuiNSを紐づけて本番公開

---

0. 開発環境を入れよう（VS Code・Git・Node.js）

Walrus Site開発に必要な基本ツールを3つインストールします。

必要なもの

• VS Code：コードを書くためのエディタ
• Git：コードの変更履歴を管理するツール
• Node.js：Next.jsアプリを動かすための実行環境

すでに入っている人は、この章はスキップして大丈夫です。

0-1. VS Code（Visual Studio Code）をインストール

コードを書くためのエディタです。無料で高機能、拡張機能も豊富です。

Windows でのVS Codeインストール手順

1. 公式サイト にアクセス
2. 「Download for Windows」をクリック
3. ダウンロードした VSCodeUserSetup-x64-*.exe を実行
4. インストーラーの指示に従って進める
   • 「同意する」をチェック
   • インストール先は既定のままでOK
   • 「PATHへの追加」にチェック（推奨）
   • 「コンテキストメニューに追加」にチェック（推奨）
5. 「インストール」をクリック
6. 完了後、VS Codeが自動で起動すればOK

macOS でのVS Codeインストール手順

1. 公式サイト にアクセス
2. 「Download for Mac」をクリック
3. ダウンロードした VSCode-darwin-*.zip を展開
4. 展開された「Visual Studio Code.app」をアプリケーションフォルダにドラッグ&ドロップ
5. Launchpadまたはアプリケーションフォルダから「Visual Studio Code」を起動
6. 初回起動時に「開発元が未確認」の警告が出たら「開く」をクリック

Linux（Ubuntu/Debian）でのVS Codeインストール手順

方法1: .debパッケージを使う場合

1. 公式サイト にアクセス
2. 「Download for Linux」→「.deb」をクリック
3. ダウンロードした .deb ファイルをダブルクリックしてインストール

方法2: コマンドラインを使う場合

# Microsoft GPGキーを追加
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/

# VS Codeリポジトリを追加
echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list

# パッケージリストを更新してインストール
sudo apt update
sudo apt install code

インストール確認

VS Codeを起動して、Welcome画面が表示されればOKです。

2-2. Git をインストール

コードの変更履歴を管理するためのツールです。GitHubと連携する際に必要になります。

Windows でのGitインストール手順

1. Git for Windows公式サイト にアクセス
2. 「Download」をクリック
3. ダウンロードした Git-*-64-bit.exe を実行
4. インストーラーの設定（重要な部分のみ）：
   • Select Components: そのままでOK
   • Default editor: 「Use Visual Studio Code as Git's default editor」を選択（推奨）
   • PATH environment: 「Git from the command line and also from 3rd-party software」を選択（既定）
   • HTTPS transport backend: 「Use the OpenSSL library」を選択（既定）
   • Line ending conversions: 「Checkout Windows-style, commit Unix-style line endings」を選択（既定）
   • Terminal emulator: 「Use MinTTY」を選択（既定）
   • その他の設定は既定のままでOK
5. 「Install」をクリック
6. 完了後、コマンドプロンプトまたはPowerShellでgitコマンドが使えるようになります

macOS でのGitインストール手順

方法1: Xcodeコマンドラインツールを使う場合（推奨）

1. ターミナルを開く
2. 以下のコマンドを実行：

git --version

3. Gitがインストールされていない場合、自動でインストーラーが起動します
4. 「インストール」をクリックして完了を待ちます

方法2: Homebrewを使う場合

# Homebrewがインストールされている場合
brew install git

方法3: 公式インストーラーを使う場合

1. Git公式サイト にアクセス
2. インストーラーをダウンロードして実行
3. 指示に従ってインストール

Linux（Ubuntu/Debian）でのGitインストール手順

# パッケージリストを更新
sudo apt update

# Gitをインストール
sudo apt install git

# インストール確認
git --version

CentOS/RHEL/Fedoraの場合：

# CentOS/RHEL 7以前
sudo yum install git

# CentOS/RHEL 8以降、Fedora
sudo dnf install git

インストール確認：
コマンドプロンプトまたはターミナルで以下を実行：

バージョン情報が表示されればOKです。

0-3. Node.js をインストール

JavaScript実行環境です。Next.jsアプリケーションの実行に必要です。

Windows でのNode.jsインストール手順

1. Node.js公式サイト にアクセス
2. 「LTS」（長期サポート版）をダウンロード
3. ダウンロードした node-v*-x64.msi を実行
4. インストーラーの設定：
   • 「I accept the terms in the License Agreement」にチェック
   • インストール先は既定のままでOK
   • 「Automatically install the necessary tools」にチェック（推奨）
5. 「Install」をクリック
6. 追加ツールのインストールが求められた場合は「Y」を選択
7. 完了後、コマンドプロンプトまたはPowerShellでnodeコマンドが使えるようになります

macOS でのNode.jsインストール手順

方法1: 公式インストーラーを使う場合（推奨）

1. Node.js公式サイト にアクセス
2. 「LTS」（長期サポート版）をダウンロード
3. ダウンロードした .pkg ファイルを実行
4. インストーラーの指示に従って進める
5. 管理者パスワードを求められたら入力

方法2: Homebrewを使う場合

# Homebrewがインストールされている場合
brew install node

方法3: nvmを使う場合（複数バージョン管理したい場合）

# nvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# ターミナルを再起動または以下を実行
source ~/.bashrc

# 最新のLTSをインストール
nvm install --lts
nvm use --lts

Linux（Ubuntu/Debian）でのNode.jsインストール手順

方法1: NodeSourceリポジトリを使う場合（推奨）

# NodeSourceリポジトリを追加（Node.js 20.x LTS）
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

# Node.jsをインストール
sudo apt-get install -y nodejs

# インストール確認
node --version
npm --version

方法2: Snapを使う場合

sudo snap install node --classic

方法3: nvmを使う場合

# nvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# ターミナルを再起動または以下を実行
source ~/.bashrc

# 最新のLTSをインストール
nvm install --lts
nvm use --lts

インストール確認：
コマンドプロンプトまたはターミナルで以下を実行：

両方でバージョン情報が表示されればOKです。

0-4. 最終確認

3つのツールが正しくインストールされているか確認しましょう：

すべてでバージョン情報が表示されれば、開発環境の準備完了です！

---

1. Sui CLI を入れよう（suiup を使う）

Sui CLI は、Suiブロックチェーンと話すためのコマンドの箱です。
公式のツールマネージャー suiup を使うとカンタンです。

macOS でのSui CLIインストール手順

ターミナルで、次を上から順番に実行します。

# suiup を入れる
curl -sSfL https://raw.githubusercontent.com/Mystenlabs/suiup/main/install.sh | sh

# Sui CLIを入れる
suiup install sui

# バージョン確認（表示されればOK）
sui --version

sui --version を実行してsui 1.54.0-***のような表示がされれば準備完了です。

Linux でのSui CLIインストール手順

ターミナルで、次を上から順番に実行します。

# suiup を入れる
curl -sSfL https://raw.githubusercontent.com/Mystenlabs/suiup/main/install.sh | sh

# Sui CLIを入れる
suiup install sui

# バージョン確認（表示されればOK）
sui --version

sui --version を実行してsui 1.54.0-***のような表示がされれば準備完了です。

Windows でのSui CLIインストール手順

PowerShellで以下を実行します：

# === Suiup + Sui(testnet) 一括インストール for Windows ===
# PowerShell 7+ 推奨
$ErrorActionPreference = 'Stop'

# 1) ディレクトリ準備
$BinUser    = Join-Path $env:USERPROFILE  'bin'     # suiup.exe を置く
$BinDefault = Join-Path $env:LOCALAPPDATA 'bin'     # 既定バイナリ(sui.exe)の置き場
New-Item -ItemType Directory -Path $BinUser    -Force | Out-Null
New-Item -ItemType Directory -Path $BinDefault -Force | Out-Null

function Add-ToUserPath([string]$dir) {
  $dir = [IO.Path]::GetFullPath($dir)
  if (-not (Test-Path $dir)) { return }
  # セッション先頭に追加（優先度を上げる）
  if ($env:Path -notlike "$dir*") { $env:Path = "$dir;$env:Path" }
  # ユーザー永続 PATH にも先頭追加（null対策付き）
  $pUser = [Environment]::GetEnvironmentVariable('Path', 'User')
  if (-not $pUser) { $pUser = '' }
  if ($pUser -notmatch [regex]::Escape($dir)) {
    [Environment]::SetEnvironmentVariable('Path', "$dir;$pUser", 'User')
  }
}

# 2) suiup を導入（なければDLして配置、あればスキップ）
$suiupPath = Join-Path $BinUser 'suiup.exe'
if (-not (Test-Path $suiupPath)) {
  Write-Host "Downloading suiup..."
  $rel  = Invoke-RestMethod -Uri "https://api.github.com/repos/MystenLabs/suiup/releases/latest"
  $arch = if ([System.Runtime.InteropServices.RuntimeInformation]::OSArchitecture.ToString() -match 'Arm64') {'arm64'} else {'x86_64'}
  $asset = $rel.assets | Where-Object { $_.name -match "suiup-Windows-.*-$arch\.zip$" } | Select-Object -First 1
  if (-not $asset) { throw "Windows($arch)向けリリース資産が見つかりません。" }

  $zipPath = Join-Path $env:TEMP 'suiup_win.zip'
  Invoke-WebRequest -Uri $asset.browser_download_url -OutFile $zipPath
  $tmp = Join-Path $env:TEMP 'suiup_extract'
  if (Test-Path $tmp) { Remove-Item $tmp -Recurse -Force }
  Expand-Archive -Path $zipPath -DestinationPath $tmp -Force
  $exe = Get-ChildItem -Path $tmp -Recurse -Filter 'suiup.exe' | Select-Object -First 1
  if (-not $exe) { throw "zip内に suiup.exe が見つかりませんでした。" }
  Move-Item -Force $exe.FullName -Destination $suiupPath
  Remove-Item $zipPath -Force
  Remove-Item $tmp -Recurse -Force
} else {
  Write-Host "suiup.exe は既に存在します。"
}

# 3) PATH を通す（優先度高）
Add-ToUserPath $BinUser
Add-ToUserPath $BinDefault

# 4) suiup 動作確認
& $suiupPath --version
& $suiupPath doctor

# 5) Sui CLI を testnet でインストール（明示）
& $suiupPath install "sui@testnet" -y

# 6) 既定版を必ずセット
& $suiupPath default set "sui@testnet"

# 7) 確認表示（ここまででOK）
Write-Host "`n== Installed binaries (suiup show) =="
& $suiupPath show
Write-Host "`n== Default bin =="
& $suiupPath which
Write-Host "`n== where sui =="
where.exe sui
Write-Host "`n== sui --version =="
sui --version

Write-Host "`n完了！新しい PowerShell でも 'sui --version' が通るはずです。"

sui --version を実行してsui 1.54.0-***のような表示がされれば準備完了です。

💡 参考: 手動でダウンロードする場合は https://github.com/Mystenlabs/suiup/releases から最新版を入手してください。

---

2. デプロイ専用ウォレットを作ろう（鍵とアドレス）

ここでは普段使っているアドレスとは別に「デプロイ専用アドレス」を作って、安全に進めます。

2-1. キーペアを作成

ターミナルで以下のコマンドを実行します：

2-2. 重要な情報をメモ

実行すると以下のような表示がされるので、address（0x****）をメモしてください。：

2-3. 秘密鍵（Base64形式）を取得

秘密鍵をBase64形式で取得します。以下の2段階の手順が必要です：
ステップ1: 秘密鍵をsuiprivkey形式でエクスポート（アドレスは2-2でメモしたものを使用）

実行すると以下のような表示がされますので､exportedPrivateKeyの値（suiprivkey***）をコピーします。

ステップ2: suiprivkey形式をBase64形式に変換（suiprivkey***の部分は上記で得られた値を使用）

実行すると以下のような表示がされますので､base64WithFlagの値（ABCD***）をメモしてください。：

メモが必要な情報まとめ：

• address（Suiアドレス）: 0x****************************************************************
• 秘密鍵（Base64）: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz（base64WithFlagの値）

💡 Tip: Slush Wallet等で作成した既存アドレスを使用する場合は、秘密鍵（suiprivkey***形式）を直接sui keytool convertコマンドで変換して使用することもできます。

2-4. gas代配布のため､作成したアドレスを運営へ連絡

ワークショップではgasとして必要なsuiとwalを配布予定です｡作成できたウォレットアドレスをこちらより連絡下さい｡

---

3. GitHub にリポジトリを作ってNext.jsプロジェクトを置こう

3-1. GitHubでリポジトリを作成

1. GitHub にログインして「+」ボタンから New repository を選択
2. Repository name に任意の名前を入力（例: my-walrus-site）
3. Public を選択（差し支えなければ推奨）
4. その他の項目はデフォルトのままでOK
5. Create repository をクリック

3-2. VS Codeでリポジトリをクローンして開く

作成したGitHubリポジトリをローカルにクローンして開発を始めましょう。

1. VS Codeを起動
2. エクスプローラー タブで 「リポジトリの複製」 をクリック
3. 「GitHubから複製」 を選択
4. GitHubアカウントへのサインインを求められた場合：
   • 「GitHubでサインイン」 をクリック
   • ブラウザが開くのでGitHubアカウントでログイン
   • VS Codeへのアクセス許可を承認
   • VS Codeに戻る
5. リポジトリ一覧から先ほど作成した my-walrus-site (他の名前を設定した場合はそのリポジトリ名)を選択
6. クローン先フォルダを選択（デスクトップや開発用フォルダなど）
7. 「リポジトリの場所として選択」 をクリック
8. 「開く」 をクリックしてVS Codeでプロジェクトを開く

💡 ポイント: 初回のGitHub連携時は認証が必要ですが、一度設定すれば次回から簡単にリポジトリにアクセスできます。

3-3. Next.jsプロジェクトを作成

クローンしたリポジトリディレクトリでNext.jsプロジェクトを作成します。

1. VS Codeで メニューバー → ターミナル → 新しいターミナル をクリック
2. 画面下部にターミナルが開くので、以下のコマンドを実行：

3. Ok to proceed? (y)と表示されたらyを入力
4. Would you like to use TypeScript? … No / Yesみたいなのが複数出てくるので全て何も変更せずにEnter連打でOKです｡

3-4. GitHubにコミット&プッシュ(アップロード)

1. VS Codeの左サイドバーの Source Control（ソース管理） アイコンをクリック
2. 変更ファイル一覧で 「+」ボタン を押してすべてのファイルをステージング
3. コミットメッセージに 「Add Next.js project」 と入力
4. 「Commit」 ボタンをクリック
5. 「Sync Changes（変更の同期）」 ボタンをクリックしてGitHubに送信

3-5. 自己紹介ページのテンプレートを作成

src/app/page.tsx に以下をコピー

自己紹介ページテンプレート（コピー用）

export default function Home() {
  // ここを変更してください！
  const profile = {
    name: "{あなたの名前}",
    job: "{あなたの職業・専門分野}",
    bio: "{あなたの自己紹介文}"
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4">
      <div className="max-w-4xl mx-auto">
        {/* ヘッダー */}
        <header className="text-center mb-12">
          <h1 className="text-4xl font-bold text-gray-800 mb-2">
            {profile.name}
          </h1>
          <p className="text-xl text-gray-600">
            {profile.job}
          </p>
        </header>

        {/* メインコンテンツ */}
        <main className="max-w-2xl mx-auto">
          <section className="bg-white rounded-lg shadow-md p-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">
              🙋‍♂️ 自己紹介
            </h2>
            <p className="text-gray-600 leading-relaxed text-lg">
              {profile.bio}
            </p>
          </section>
        </main>

        {/* フッター */}
        <footer className="text-center mt-12 text-gray-500">
          <p>Built with Next.js & hosted on Walrus Site 🚀</p>
        </footer>
      </div>
    </div>
  );
}

3-6. profileオブジェクトをあなたの情報に書き換える

コードの上部の profile オブジェクト内の {} で囲まれた部分を自分の情報に変更してください：

3-7. Next.js設定ファイルを作成

プロジェクトルートにある next.config.js を以下内容にすべて書き換え：

3-8. ローカルで確認

VS Codeでターミナルを開いて、ローカルサーバーを起動しましょう：

1. VS Codeで メニューバー → ターミナル → 新しいターミナル をクリック
2. 画面下部にターミナルが開くので、以下のコマンドを実行：

3. ブラウザで http://localhost:3000 にアクセスして、自己紹介ページが表示されることを確認してください。

💡 ポイント: ターミナルに表示された http://localhost:3000 を Ctrl/Cmd を押しながらクリックすると、ブラウザで簡単に確認できます！

3-9. 変更をGitHubにコミット&プッシュ

3-4と同じ要領で、変更をGitHubにコミットしてください。コミットメッセージは 「Add self-introduction page」 とします。

---

4. GitHub に鍵情報を登録しよう（Secrets / Variables）

GitHub Actions に、さっき作った「秘密鍵」と「アドレス」を教える手順です。

4-1. GitHub リポジトリの Settings を開く

以下のURLにアクセスするか、GitHubのリポジトリページで Settings タブをクリックします。

4-2. Secrets と Variables の設定

1. 左サイドバーから Secrets and variables → Actions をクリック

2. Secrets タブで 「New repository secret」 をクリック

   • Name: SUI_KEYSTORE
   • Secret: ["秘密鍵（keystore の中身の文字列）"] をそのまま貼り付け
   • 「Add secret」 をクリック

   SUI_KEYSTOREは["KEY"]の形式（配列形式）で入力する必要があります。

3. Variables タブをクリックして 「New repository variable」 をクリック

   • Name: SUI_ADDRESS
   • Value: あなたの Sui アドレス（0x から始まる）
   • 「Add variable」 をクリック

   SUI_ADDRESSはそのまま0x***のみ貼り付ければOK

4-3. Actions の権限設定

1. 左サイドバーから Actions → General をクリック
2. Workflow permissions を 「Read and write permissions」 に変更
3. 「Allow GitHub Actions to create and approve pull requests」 にチェック
4. 「Save」 をクリック

---

5. GitHub Actions を設定しよう（自動でWalrusに公開）

5-1. 事前準備（Next.js用）

Next.jsをWalrus Siteにホストするために、以下の事前設定が必要です：

1. プロジェクトルートに walrus フォルダを作成
2. その中に ws-resources.json ファイルを作成
3. ファイル内容は {} のみ記述

5-2. GitHub Actions の設定

リポジトリ内に .github/workflows/deploy.yml を作成し､以下テンプレートを貼り付け：

GitHub Actions設定ファイル（コピー用）

name: Deploy Walrus Site

on:
  push:
    branches:
      - "main"

permissions:
  contents: write
  pull-requests: write

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install dependencies and build
        run: |
          npm install
          npm run build

      - name: Deploy to Walrus
        uses: MystenLabs/walrus-sites/.github/actions/deploy@main
        with:
          SUI_ADDRESS: ${{ vars.SUI_ADDRESS }}
          SUI_KEYSTORE: ${{ secrets.SUI_KEYSTORE }}
          GITHUB_TOKEN:  ${{ secrets.GITHUB_TOKEN }}
          DIST: out
          EPOCHS: 2
          SUI_NETWORK: mainnet
          WS_RESOURCES: walrus/ws-resources.json

---

6. デプロイして確認しよう（Githubへコミット&プッシュするだけ）

VS CodeのGit機能を使って変更をGitHubにPush(アップロード)しましょう。

6-1. VS CodeでGit操作

1. VS Codeの左サイドバーの Source Control（ソース管理） アイコンをクリック
2. 変更ファイル一覧で 「+」ボタン を押してすべてのファイルをステージング
3. コミットメッセージに 「add deploy workflow」 と入力
4. 「Commit(コミット)」 ボタンをクリック
5. 「Sync Changes(変更の同期)」 ボタンをクリックしてGitHubに送信

💡 参考: これは3-4で行った操作と同じです！

6-2. GitHub Actionsで自動デプロイを確認

1. GitHubのリポジトリページで Actions タブをクリック
2. ワークフローの実行状況を確認
3. 成功ログに New site object ID が表示されればOK！
4. 重要: New site object ID をメモしておく（次のステップで使用します）

6-3. 自動生成されたプルリクエストを承認

GitHub Actionsがサイトの更新情報を含むプルリクエストを自動生成する場合があります。

1. GitHubのリポジトリページで Pull requests タブをクリック
2. 「Update site object and domain records」 のようなタイトルのプルリクエストを確認
3. プルリクエストの内容を確認（新しいサイトオブジェクトIDなどが含まれています）
4. 変更内容に問題がなければ 「Approve」 をクリック
5. 「Merge pull request」 ボタンをクリックしてマージ実行
6. 「Confirm merge」 をクリックして確定

💡 ポイント: 自動生成されたプルリクエストには、通常以下の情報が含まれます：

• 新しいサイトオブジェクトID
• ドメイン設定の更新
• リソース情報の更新

⚠️ 注意: プルリクエストをマージする前に、必ず変更内容を確認してください。特にサイトオブジェクトIDが正しいことを確認しましょう。

---

7. ドメインを紐づけて本番公開（SuiNS）

最後に、SuiNS で「あなたの .sui ドメイン」と「サイト」を結びつけます。

1. suins.io にアクセスして、自分のドメイン一覧 を開く
2. 3点メニューから Link to Walrus Site を選ぶ
3. さきほどの New site object ID を貼り付けて適用

これで https://{あなたのSuiNS名}.wal.app でサイトが見られるようになります。

---

トラブルシューティング

• SUI / WAL が足りない
  → 1SUI以上, 5WAL以上持っておこう
• Secrets / Variables の名前ちがい
  → SUI_KEYSTORE（Secrets）と SUI_ADDRESS（Variables）を再確認
• DIST の指定ちがい
  → 実在するフォルダ名に（public / out / dist など）
• ブランチ名ちがい
  → on.push.branches をあなたのブランチ名に合わせる
• Windows で suiup が使えない
  → %USERPROFILE%\bin を環境変数に追加し、PowerShell を再起動

---

まとめ

• これで 編集 → コミット&プッシュ するだけで、自動でサイトが更新されます
• デザイン変更・ページ追加・画像最適化など、自由にカスタマイズしてみましょう
• うまくいかない時は、本手順の各章をもう一度ていねいになぞれば大丈夫です

おつかれさまでした！🚀