Как я сделал новостной сайт за пару дней и меньше чем за 10 тысяч рублей

Мысль запустить новостной сайт жила у меня давно. Каждый раз находились отговорки: то времени не было, то денег, то казалось, что это слишком сложно. В итоге идея годами лежала на полке.

В какой-то момент я понял: либо делаю сейчас, либо так и буду «хотеть потом». Открыл маркетплейс доменов, выбрал подходящее имя и отдал за него тысячу рублей. 

Следующим шагом стала Тильда. Подписка на год обошлась в шесть тысяч, и именно это заставило меня двигаться быстрее — жалко было бы платить и ничего не запускать.

Что сделал

• Купил домен: ~1000 ₽
• Подписка на Tilda: 6000 ₽/год
• Настроил шаблон и структуру: 1–2 дня (с перекурами, по вечерам)
• Заполнил первые новости, чтобы лента не выглядела пустой

Итак, я не стал заморачиваться с уникальным дизайном. Взял готовый шаблон, чуть его подкрутил и сразу начал наполнять. Пара вечеров, и сайт уже выглядел как живой: новости, рубрики, лента.

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

ChatGPT — наше все

Шаблоны в Тильде скучные. Для новостного сайта они не очень подходят. Сразу скажу, кодить я не умею, но делать что-то нужно было. Казалось, придётся нанимать верстальщика и платить бабло. Как вдруг Вспомнил: есть же ChatGPT. Говорят, справляется с таким неплохо. Решил попробовать — и вот тут всё понеслось.

Я написал: «Сделай мне код для главной страницы новостного сайта». 

И таки сделал: 

Конечно же получилось не очень. Это прям радость для тех, кто думает, будто нейросети возьмут и заменят всех подряд. Ага, щас… Дальше поймёте почему.

Я думал так: сейчас накидаю пару запросов, и мне сразу соберут идеальную главную страницу. Но реальность оказалась другой: то теги не закрыты, то блоки съезжают, то картинки не грузятся. Вроде бы элементарщина, а на деле — бесконечные мелкие косяки.

И это как ремонт: смотришь на план — там всё идеально. А заходишь на объект — и выясняется, что плитка по диагонали, розетки под потолком, а дверь открывается в стену.

Тут до меня допёрло, где собака зарыта. Все новости я загонял в Тильду через «потоки». Казалось гениально: никакой мороки с созданием новых html-страниц, и лимит в тысячу страниц, который стоит даже на самом жирном тарифе, я обошел.

Но за любой финт приходится платить, началась настоящая жесть.

Код, который нормально работал с обычными страницами, в потоках начинал чудить: блоки то съезжали, то залипали, картинки то подгружались, то висели где-попало.

В итоге решил подрубить RSS прямо к коду:

Затем я подгрузил ещё два потока, и в итоге у меня случился сайт. Не макет, не сырая заготовка, а настоящая лента новостей, где каждый блок обновляется сам по себе.

Главная страница ожила: сверху топ-новость, ниже — аналитика, ещё ниже — последние материалы по разным рубрикам. Лента двигается, картинки меняются, даты подгружаются. Смотришь, и реально похоже на новостник.

Самое приятное ощущение, что он живёт без моего постоянного вмешательства. Я могу писать новые тексты, а структура сама их распределяет по разделам.

Вот так, из куска кода, пары RSS и несколько часов ковыряния у меня появился новостной сайт, который не стыдно показать людям.

Если честно, вид у сайта по-прежнему оставлял желать лучшего. Показывать это людям было стыдно — разве что самому потыкать и проверить, как оно работает.

В итоге решил попросить чат накидать мне варианты макетов — пусть хоть с этого начнётся нормальная переделка.

Перебрав несколько десятков вариантов, я остановился на вот этом: 

Кстати, чат не так быстро генерит код. Нужно ждать минут 5-10, чтобы выдал достойный вариант: 

Смотрелось вроде нормально, но всё равно глаз резало. Тут криво, там не так, в целом — не нравилось. И началась возня: то «убери ссылки», то «поправь картинку», то «проверь код». Сделал одно — сразу всплыло другое.

Карточки то уезжают, то налезают друг на друга: чинишь верстку — вылетает блок; добавляешь картинку — она отказывается грузиться; ставишь новый шрифт — исчезает кнопка: 

В итоге я довозился до того, что половина страницы куда-то делась

В какой-то момент я махнул рукой на все эти пляски с кодом и решил пойти другим путём. Начал собирать референсы: что вообще делают большие новостники.

Для ориентира взял «МК» — у них всё просто и наглядно, заходишь и сразу видишь главное. Потом посмотрел на Forbes — там уже больше стиля, глянца и выверенной структуры. Захотелось смешать оба подхода и примерить на свой проект.

Получилась полная хрень. Это был не «Московский комсомолец», а какой-то самопал. Хотелось, чтобы выглядело как серьёзный новостной портал, а вышло как всегда.

Дальше я ещё долго пытался повторять дизайн чужих сайтов. Но сразу скажу — затея провальная. Смотришь на МК или Forbes, а у тебя всё равно выходит дешёвая копия.

Так я перестал гнаться за чужим стилем и вернулся к базовой идее: попросил чат предложить мне разные варианты макетов. Из всей пачки я выбрал тот макет, который реально оказался удобным для работы.

Вот этот вариант я и начал постепенно доводить до ума:

И тут вылезла новый головняк: обложки к постам упорно не подгружались. Попросил чат «починить» — он разложил причины по полочкам:

• ссылки на картинки в RSS кривые: относительные или // без нормализации;
• mixed content: картинка по http: внутри https:-страницы, плюс редиректы;
• защита от хотлинка/CORS: прямой вызов в background-image рубится на лету.

Предложенное лечение — многошаговое:

1. Нормализовать URL.
2. Сначала пинговать «родной» адрес.
3. При фейле переключаться на https.
4. Если снова вылезает косяк — проксировать через images.weserv.nl (CORS-френдли).
5. Для OG/Twitter-картинок — та же схема, но после нормализации.

Попросил внедрить все правки, но чуда не случилось — местами всё равно оставались пустые превьюшки.

Решил закрыть вопрос, потому что с пустыми превьюшками сайт нельзя выпускать в эфир. Перевел чат в режим Thinks и сформулировал запрос так:

нужен полностью готовый HTML с загрузкой через <img> (никаких background-image), каскад: оригинал → https → images.weserv.nl → fallback. Плюс — расширенный парсер RSS, который вытаскивает enclosure, media:content, media:thumbnail, content:encoded.

Пока ждал генережки от Чата, вспомнил про Дипсик. Закинул в него промт, попросив сделать мне HTML-ку новостника. И вот что из этого получилось: 

А на деле вышло так: я сидел минут двадцать, пока дипсик раздуплялся. Со стороны казалось, что он там прямо серьёзно думает, что-то бормочет себе под нос и перепроверяет каждую строчку.

И вот, наконец, выдаёт код… без закрытой кавычки. Для меня, даже как для человека далёкого от кода, это показалось фейлом, свойственным только школьникам. Пришлось снова нести всё тому же чату — пусть проверяет баги за китайским другом. 

Пока ждал проверки, в это время мне чат сгенерировал свой код, который я просил исправить до этого. И вот что получилось: 

Это уже куда ни шло — такой сайт уже можно выкатывать. 

В целом всё заработало, но раздел «сейчас читают» выглядел криво. Попросил поправить отображение дат.

Пока ждал правок, решил снова вернуться в дипсик — и тут он окончательно отъехал:

Ну да ладно. Вернулся я к Чату и взял исправленный код: 

Затем я попросил Чат доработать свой же код с точки зрения SEO: 

Короче, что получилось — смотрите сами: https://financeanalitics.ru/

Пишите в комментах, что думаете.

И да, вся эта движуха заняла у меня часов 6–8 с перекурами.

Заодно заспойлерю: я ещё замутил внутренние страницы через код, об этом расскажу в следующей части. Ну и покажу, как прикрутил автопостинг в телегу, дзен и прочие площадки. 

А еще расскажу, как я сэкономил на SEO. 

Всех благ!