ut.code(); Learnへ戻る

作ったサイトを公開してみよう

直接配信

Vite + TS

SvelteKit

プロジェクト作成

GitHub Pagesにデプロイする

プロジェクト作成

このページでは、SvelteKitでプロジェクトを作り、GitHubのリポジトリを作るところまでやります。ut.code(); LearnのWSLのセットアップ(Windowsのみ)LinuxコマンドはじめてのNode.jsを確認して、(Widnowsの方はWSLと、)Node.jsをインストールしてください。また、GitとGitHubのセットアップの内容も終わらせておいてください。

モジュールとnpmGitを用いたバージョン管理GitとGithubを用いた共同開発の知識も使うので、わからなくなったら参考にしてください。

1.GitHubのリポジトリを作成する

まず、GitHubにサインインし、画面右上の+ボタンを押し、New repositoryを選択してください。(赤い丸)

githubの画面1

Repository nameは、GitHub Pagesで公開したい場合は(ユーザー名).github.io、それ以外の場合は好きな名前をつけてください。Choose visibilityは、GitHub Pagesで公開したい場合はpublic、そうでなければ好きなものを選んでください。その他の設定は変える必要はありません。ここまでできたら、Create Repositoryを押してください。

githubの画面2

プロジェクトが作成できたら、プロジェクトの画面を開き、git@github.com:(ユーザー名)/(リポジトリ名).gitという文字列を(クリップボードに)コピーしてください。

githubの画像3

(以下、Windowsの人はWSLを使っている前提です。)コピーできたら、リポジトリをクローンしたい場所をターミナルで開き、次のコマンドを実行します。

git clone git@github.com:(ユーザー名)/(リポジトリ名).git

そしたら、クローンしたディレクトリに移動してください。(cd (リポジトリ名)で移動できます。)

つぎに、その場所で次のコマンドを実行しプロジェクトを作成してください。聞かれた質問は、とくに希望がなければデフォルトのままエンターを押して進んで構いません。

npx sv create
githubの画面4

これができたら、次のコマンドを実行してテンプレートが出来上がっていることを確認しましょう。

npm run dev

http://localhost:5173/をブラウザで開くか、出てきたポップアップのOpen in browserボタンを押すかすると開けると思います。

とりあえず動くことがわかったので、GitHubにpushしてみましょう。まず、次のコマンドで変更をaddします。

git add --all

そしたら、変更をcommitします。

git commit -m "何らかのコミットメッセージ"

ここまで来たら、最後にリモートにpushして変更を反映させます。

git push origin HEAD

GitHubを見ると、プロジェクトの内容が表示されていると思います。

トップに戻る
次へ

サードパーティライセンス