Решён
Как создать многостраничный сайт в виде блога?

Александр Петров • Веб-разработка •
7.7k
7

Хочу сделать свой блог. Не на Тильде или Вордпрессе, а именно написать сам, чтобы разобраться как это работает.

Знаю HTML и CSS на базовом уровне, могу сверстать простую страницу. JavaScript почти не знаю, только alert и смена классов.

Что мне нужно:

  • Главная со списком статей
  • Отдельные страницы для каждой статьи
  • Может какая то админка чтобы добавлять статьи

С чего начать? Какой стек выбрать? Нужен ли мне бэкенд или можно обойтись только фронтом?

HTMLSSGБлогВеб-разработкаДля начинающих

7 ответов

Лучшие Новые Старые
Решение
67
Эксперт • 1 ответ

Для обучения лучший вариант - статический генератор сайтов (SSG). Никакого бэкенда, никаких баз данных. Пишешь статьи в Markdown, генератор собирает из них готовый HTML.

Самый простой для новичка - 11ty (Eleventy). Минимум магии, максимум понимания что происходит.

План действий:

  1. Установи Node.js
  2. npm init -y && npm install @11ty/eleventy
  3. Создай папку posts, в ней файлы .md со статьями
  4. Создай шаблоны в Nunjucks или Liquid
  5. npx eleventy --serve - получаешь готовый сайт

Деплой на Netlify или GitHub Pages бесплатно. Админки не будет, но статьи добавляешь просто создавая новый .md файл.

Когда разберешься с этим - можно переходить к бэкенду. Но для блога он реально не нужен.

Аватар Александр Петров
Александр Петров Автор

А что такое Markdown? Это типа HTML только проще?

Аватар Артём Лукашевич
Артём Лукашевич

Да, упрощенная разметка. Пишешь # Заголовок вместо <h1>Заголовок</h1>. Звездочки для жирного и курсива. Генератор конвертирует в HTML сам.

34
Участник • 4 ответа

Если хочешь понять как работает веб, то SSG - это немного читерство. Ты не узнаешь как работают запросы, базы данных, авторизация.

Для обучения лучше:

  1. Простой бэк на Python (Flask) или Node.js (Express)
  2. SQLite как база данных (файл, не надо ничего настраивать)
  3. Шаблонизатор Jinja2 или EJS

Да, сложнее. Да, дольше. Но ты поймешь как устроены 90% сайтов в интернете. А SSG - это нишевая штука для лендингов и документации.

28
Участник • 3 ответа

бро, бери астро (astro.build)

она как 11ty только современнее и документация лучше. можно миксить реакт/вью/свелт компоненты если захочешь интерактив. а для статики компилит в чистый хтмл без жс вообще

я свой блог на ней за вечер поднял

19
Участник • 1 ответ

Вариант для тех кто вообще не хочет разбираться с командной строкой:

Обычные HTML файлы. Серьезно.

  • index.html - главная
  • post-1.html, post-2.html - статьи
  • style.css - стили

Копируешь шапку и подвал в каждый файл руками. Да, это не DRY. Да, неудобно менять. Но для 10-20 статей работает, и ты реально понимаешь что происходит на каждом этапе.

Потом, когда надоест копипастить - сам захочешь автоматизации и поймешь зачем нужны генераторы.

15
Участник • 3 ответа

Jekyll на GitHub Pages. Бесплатный хостинг, автодеплой при пуше, куча готовых тем. Статьи пишешь в Markdown, кидаешь в репозиторий, сайт обновляется сам.

Документация: https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll

8
Участник • 4 ответа

Не связывайся с 11ty и Jekyll, это прошлый век.

Современный стек для блога:

  • Next.js 14 с App Router
  • MDX для контента
  • Tailwind для стилей
  • Vercel для деплоя
  • Contentlayer для типизации контента

Да, порог входа выше. Зато потом сможешь добавить комменты, поиск, подписку, интернационализацию. И в резюме будет актуальный стек, а не устаревшие технологии.

Написать ответ

Визуальный редактор (WYSIWYG)
Премодерация гостей

Вы отвечаете как гость. Ваш ответ будет скрыт до проверки модератором. Чтобы ответ появился сразу и вы получали репутацию — войдите в аккаунт.

Или войдите в систему
Будьте вежливы и соблюдайте правила платформы.