はじめに
ポートフォリオ用にウェブサイトを作りたいけどやり方が分からねぇってことで勉強したことをまとめました。最初の導入部分的なことしかまだわかっていませんが、もし似たようなことをしたくて困っている人の助けになればと思います。
1.プロジェクトを作成
（最初はNode.jsの導入をする必要があります）
ターミナルにて好きなフォルダに行く
cd プロジェクトファイル
package.jsonの作成
npm init
express（モジュール）をインストール
npm install express --save
(npm install モジュール名 オプション)
こんな感じにファイルを置く（by ChatGPT）
GPT先生は偉大
プロジェクトフォルダ/
│
├── node_modules/ # npmによってインストールされたモジュール
│
├── public/ # 静的ファイルを格納するディレクトリ
│ ├── css/ # CSSファイル
│ │ └── style.css
│ │
│ ├── js/ # JavaScriptファイル
│ │ └── script.js #今回は使わない
│ │
│ └── index.html # HTMLファイル
│
├── server.js # Expressサーバー設定ファイル
│
├── package.json # プロジェクトのメタデータと依存関係
│
└── package-lock.json # 正確なツリーを記録するためのファイル（npmが自動生成）
2.いい感じにコードを書く
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポートフォリオ</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<header>
<h1>ポートフォリオ</h1>
</header>
<main>
<section>
<h2>スキル</h2>
<p>ここにスキルに関する説明を書きます。</p>
</section>
<section>
<h2>リンク</h2>
<ul>
<li><a href="https://github.com/あなたのユーザー名">Github</a></li>
<li><a href="https://qiita.com/あなたのユーザー名">Qiita</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2024 あなたの名前</p>
</footer>
</body>
</html>
style.css
/* 全体のフォント設定 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* ヘッダーのスタイル */
header {
background: #333;
color: #fff;
padding-top: 20px;
min-height: 70px;
border-bottom: #0779e4 3px solid;
}
header h1 {
color: aqua;
margin: 0;
padding-left: 20px;
}
/* メインコンテンツエリアのスタイル */
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
/* フッターのスタイル */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
/* リンクのスタイル */
a {
color: #0779e4;
}
a:hover {
color: #0336bf;
}
server.js
const express = require('express');
const app = express();
const port = 3002;
// publicディレクトリを静的ファイルのルートディレクトリとして指定
app.use(express.static('public'));
// ルートパスへのアクセスをindex.htmlにマッピング
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
// サーバー起動
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}/`);
});
3.実行する
ターミナルにてプロジェクトフォルダの中に入る
cd プロジェクトフォルダ
以下を実行する
node server.js
こんな感じの出力がされるのでリンクを開く
Server running at http://localhost:3002/
このようなサイトを開くことができたら成功です
