はじめに
この記事は新歓ブログリレー2026の20日目の記事です。
どうもこんにちは、初めましての人は初めまして。
25BのgenMira(ミラと発音してください)と申します。
みなさんwebサイトを作ったことってありますか？
こんなタイトルのブログをお読みになっている皆さんですからおそらくないと思います。（ということを想定して以下書いていきます）
ではwebサイトを作ってみたいなと考えたことはありますか？
僕はふと思ったことがありました。自分だけのwebサイトに、心に移りゆくよしなし事をそこはかとなく書きつくりたいなと。
そんなことはXに書けよというご意見はごもっともなのですが、まぁ思い立っちゃったので仕方ない。
その時僕は過去にtraPで学んだ技術を使って簡単に個人用webサイトを作ってみたんですね。
というわけで、これからwebサイトを作ってみたいなと思うみなさんのために、そしてどうせすぐやり方を忘れてしまう鶏頭な著者のために、そのやり方を書き記していこうと思います。
※なお、初めて制作する場合、必要なものがインストールされていなかったり、なぜか上手くいかなかったりするので、エラーが出るたびエラーメッセージをLLM(chatGPTやGeminiなど)に投げると良いです。
SteP 1 : プロジェクトを作る
今回はViteとVue 3を使ってwebサイトを作っていきます。
して、今回はそれぞれの技術の解説を目的としていないので、必要なプロセスだけ書きます。
まずプロジェクトを立てましょう。VScodeのターミナルで以下のコマンドを打ってください。
npm create vue@latest
このコマンドを実行するためにはNode.jsをダウンロードすることが必要です。公式サイトからダウンロードしておきましょう。
そしたらプロジェクトの名前（webサイトの名前）を入力して、あとは画面の指示に従っていくだけです。その際にこのような選択肢が出てくることがあると思います。これはrouterを選んでおきましょう。これはページ遷移を作るときに使います。
またこの選択肢にはvueを選んでおきましょう。
よくわからなかったらデフォルトの選択肢がおすすめなので「じゃあそれで〜」とEnterキーをポチポチ押してってください。
さてこれで必要なファイルが生成されました。
VScodeで先ほど生成したファイルを開きましょう。
なんということでしょう、これだけでもうwebサイトの基礎ができたではありませんか！
ファイル生成時の質問で最後の質問をNo（デフォルト）にしていると、既に例となるサイトができています。それを各々のブラウザで開いてみましょう。必要なコマンドはこれです。
npm run dev
これで
Local: http://localhost:5173/
のような表示が出たら成功。そのリンクを踏むと既にサイトが出来上がっています。
これはローカルホストというやつで、普通webサイトはネットワークを通じてwebサーバーと通信してサイトの情報を取ってくるわけですが、これはネットワークの外に出ず、今使ってるPCをwebサーバーと見立ててwebサイトを取ってきている感じになります。
SteP 2 : 内容を充実させる
雛形ができたなら今度は内容を書いていくステップです。
そのためにこのテンプレートの構造を説明しましょう。
index.html
何もしてません
webサイトの表示させるためのキャンバスです。そこに
<div id="app"></div>
で内容を流し込んでいるわけです。
src/main.ts
その流し込んでいるスクリプトです。src/App.vueをindex.htmlに流し込め！と書いてあります。
src/App.vue
今回作るwebサイトの本体です。ここで各ページを切り替えたりなど総合的なページの管理をします。
src/views/
これからサイトの内容を具体的に書いていくのはこのフォルダの下にあるファイルです。src/App.vueにファイルを登録したら、どんどんと内容を書き込んでいきましょう。
src/components/
webサイトを作るにあたって使いまわしたい部品があると思います。ボタン、枠線....etc.
そういったものはここに置いておきましょう。
src/router/
各ページの切り替えを担当するのがこの部署です。
せっかくsrc/views/に新しいページのファイルを追加したとしても、routerに登録されていないとページ切り替えができません。
以上がファイル構造の内容です。
これからはvueファイルとはどういうものかを説明しましょう。
一言で言うと、「webサイトを作るのに必要なhtml,CSS,JavaScriptを全部一度に書けるファイル」です。すごそうでしょう？
<template>
<h1>{{ message }}</h1>
<button @click="showMessage">ボタンを押してね</button>
</template>
<style scoped>
h1 { color: green; }
</style>
<script setup lang="ts">
import { ref } from 'vue'
const message = ref("")
const showMessage = () => {
message.value = "Hello World!"
}
</script>
例えばこんな感じです
templateの中にはhtmlを書きます。
styleの中にはCSSを描きます
scriptの中にはJavaScriptを進化させた立ち位置のTypeScriptを書きます。
これでボタンを押したらHello World!が表示されるようになりました。
さて、これらの構造がざっくり頭の中に入ってればもう大丈夫です。
あなたの書きたいことを書きたいように書いていきましょう。
具体的にどうやって書くかはLLMに聞いてください。彼らはなんでも答えてくれます。
SteP 3 : 公開しよう
GitHubにはwebページを公開するための機能があります。個人用webサイトであればこれを使ってみましょう。
まずはGitHubで新しいリポジトリを作って、今まで作ってきたサイトのファイルをプッシュしましょう。
初心者のうちはここでかなり手こずると思うのでLLMとよく話しながらゆっくり進めていってください。
無事にファイルをプッシュできたら、公開用の設定ファイルを作りましょう。
自動生成されたvite.config.tsを確認して、pluginsの上にbaseの一文を追加します。
export default defineConfig({
base: '/リポジトリ名/',
plugins: [vue()],
これから作るサイトのURLは、https://ユーザー名.github.io/リポジトリ名/になります。GitHubのリポジトリ名と完全に一致していないとエラーが起こるので注意してください。
次にプロジェクトのルートに「.github」というフォルダを作ります。最初のドットを忘れずに。
その中にさらに workflows というフォルダを作ります。
最後にその中に deploy.yml という名前のファイルを作ります。
3段階に分かれてるのは分かりにくいかもしれませんが、これも公開を楽にするためです。
deploy.ymlには以下の内容をコピペしてください。
name: Deploy to GitHub Pages
on:
push:
branches: ["main"]
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Set up Node
uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './dist'
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
これはmainにプッシュしたりマージしたりする度に内容をbuildして公開しているサイトをアップデートするプログラムです。
さてこれらの変更を忘れずにプッシュしたら、次はGitHubの設定をいじりましょう。
リポジトリの上部の「settings」を開いて「Pages」を選択。
「Build and deployment」の中にある「Source」を、「Deploy from a branch」から 「GitHub Actions」に切り替えます。
その後「settings」と同じ列にある「Actions」を選択。
「Your site is live at...」 という文言とともにURLが表示されるはずです。
これであなたの作ったサイトが全世界に公開されたと思います！
終わりに
いかがでしたでしょうか。
途中かなり説明を省略した部分もあって、完全初心者向けではないかなーと思いつつ、でもLLMと壁打ちしたり、自分で検索したりすればいけるだろうと思ってそのままにしました。
明日の投稿者は@Ida-jiさんです。お楽しみに！
ではまたどこかで！
