NodeJs у вас уже должен быть установлен. Если нет, то вот официальный сайт.
Создание нового проекта
npm init -yУстановка express и ejs
npm install express ejsСоздание структуры проекта
/your-project-folder
/views
header.ejs
footer.ejs
index.ejs
info.ejs
contacts.ejs
/public
/css
/js
/images
index.jsСоздать такую структуру можно с помощью команды (macOS, Linux)
mkdir -p views public/css public/js public/images && touch views/header.ejs views/footer.ejs views/index.ejs views/info.ejs views/contacts.ejs && touch index.jsindex.js
const express = require('express');
const app = express();
// Указываем шаблонизатор
app.set('view engine', 'ejs');
// Указываем папку с js, css и картинками
app.use(express.static('public'));
// Связываем адреса и их страницы
app.get('/', (req, res) => res.render('index'));
app.get('/info', (req, res) => res.render('info'));
app.get('/contacts', (req, res) => res.render('contacts'));
// Запускаем сервер
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));index.ejs
<%- include('header') %>
<h1>Welcome to the Homepage!</h1>
<p>This is the main page of our simple website.</p>
<%- include('footer') %>header.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="/css/style.css"> <!-- Link to your CSS file -->
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/info">Info</a></li>
<li><a href="/contacts">Contacts</a></li>
</ul>
</nav>
</header>footer.ejs:
<footer>
<p>© 2030 My Website. All rights reserved.</p>
<p>Contact us at <a href="mailto:info@mywebsite.com">info@mywebsite.com</a>.</p>
</footer>
<script src="/js/script.js"></script>
</body>
</html>Запуск
node index.jsОткрываем сайта на ссылке http://localhost:3000/
Похожие статьи