Гайд Делаем лендинг в Bootstrap Studio и устанавливаем его

В этой статье мы научимся делать простейший лендинг (ну или одностраничник, сайт)

В качестве примера мы сделаем сайт по кряку Synapse X, купим домен и поставим все это дело на Windows дедик!

Почему я разберу установку только на Windows дедик? Ну во первых он есть у каждого трафера, а во вторых это самый простой вариант установки.

Делать сайт мы будем в Bootstrap Studio. Это аналог всяких онлайн конструкторов по типу , но с отличием в гибкости (на онлайн конструктор нельзя закинуть файл и качать прямо с него, надо закидывать на файлообменник) а так же вы получаете полноценный сайт.

Установка Bootstrap Studio

Качаем Bootstrap Studio - | (с моего сайта - )

После устанавливаете и крякаете.
Как крякнуть:

Откройте Bootstrap Studio.exe и ждите установки.

После того как Bootstrap установится и запросит лицензию закройте его,

нажмите Win+R и введите туда "C:\Users\%username%\AppData\Local\Programs\bstudio\resources" (без кавычек)

Откроется папка. Закиньте в неё app.asar из архива (с заменой, если запросит)

Программа крякнута!


Делаем лендинг

Открываем Bootstrap Studio и сразу нажимаем "New Design".


Тут можно сделать сайт с нуля или взять шаблон.

Я распишу с нуля, ибо после прочтения гайда в шаблонах разберетесь на раз и два.


Внимание! Прежде чем создавать проект определитесь с версией Bootstrap!!!

Это повлияет на использование готовых блоков! Если смешать версии то сайт будет корявым и выглядеть как говно

Есть 3 версии:

• Bootstrap 3.4 - мало готовых блогов, да и вообще это старая версия (можно сравнить с Win 7)
• Bootstrap 4.2 - много блоков, но не самая новая версия (можно сравнить с Win 10)
• Bootstrap 5.2 - блоков средне, но самая новая версия (все равно что Win 11)

По опыту могу сказать что самая оптимальная 4.2, по этому я возьму для проекта

И так, мы создали чистый проект на версии bootstrap`а 4.2 и перед нами "холст"

Что бы не расписывать всё тут я сделал скрин и расписал на нем вкратце, что за что отвечает.


Первым делом я поставлю верхнюю панель (navbar).

Для этого выбрал версию блока "BS 4" (ибо в проекте мы это указали) и ввел в поиск "navbar".

Ищем который нам понравился (наводим на каждый из них) и устанавливаем кнопкой "Install".


Перетаскиваем блок и вауля! Теперь нам надо отредактировать эту панель.


Лично мне эти раскрывающиеся панели не нужны, по этому я удаляю их наведя курсор, нажатием стрелки и нажатием корзины.


Теперь надо изменить название главной кнопки и дополнительной. Просто кликаем по ним 2 раза.


Теперь надо сделать небольшое описание программы и скрин по возможности (в нашем случае Synapse X).

Для этого ищем блок "Text" по аналогии с предыдущем поиском, качаем, закидываем на холст.


Изменяем его по инструкции со скрина.


Так же удаляем картинку клавишей "Delete".


Теперь шагаем в Яндекс Картинки, вводим туда "роблокс" и качаем любую картинку.

Перекидываем картинку в окно Bootstrap Studio, нажимаем "ОК".


Теперь зажимаем картинку c низу и перебрасываем на холст.

У нас получилось что то типа фонового изображения.


Теперь дублируем данную страницу:


Переходим на данную страницу и делаем всё как на скриншоте:


Так же советую удалить на этой странице nav bar:


Теперь идем на index.html и снова делаем как на скрине, а именно меняем ссылку на страницу загрузке.


И на верхней панели тоже не забываем менять ссылку:


Теперь самое главное, идем на download.html и меняем ссылку на кнопке по указанному выше способу на "\assets\programs\Synapse-Crack.zip"

Это локальная ссылка на билд.


И наконец нам надо экспортировать сайт. Для этого жмем "Export" на верхней панели.

После делаем все как на картинке (кроме папки, вы сами выбираете куда сохранить).


Далее задаем имя страницы во вкладке SEO, я сделал Synapse X Crack.


Жмете "Save", после чего снова Export и вауля, готовый сайт уже в папке!


Сайт готов!

Установка сайта на дедик

Качаем на дедик Open Server - | VT не жрет файлы больше 650 мб (с офф. сайта - медленная скорость загрузки)

Устанавливаем. Программа бесплатная, по этому крякать её не надо.

После установки заходим в трей и открываем папку с проектами.


Создаем папку с любым названием на английском. Я назвал "Synapse".


Далее копируем в эту папку наш сайт (ctr + a и ctr+c в папке с сайтом, в папке на дедике ctr + v если что).


После заходим в assets и создаем там папку "programs".


Теперь создаем в этой папке архив "Synapse-Crack.zip" и уже в неё кидаем билд.


Далее в трее перезагружаем сервер, и вуаля проект отобразился!



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


Вписываем в ip-сервера айпи дедика (это важно, или ничего не будет работать).


Далее идем в алиасы и вписываем айпи дедикаи имя папки с сайтом (у нас synapse) и жмем добавить.

НЕ ЗАБЫВАЙТЕ ПРО КНОПКУ СОХРАНИТЬ!


Вауля, у нас работает сайт на айпишнике дедика! -

Файл качает, а значит мы сделали всё правильно и поняли азы.


Покупка и привязка домена к сайту

Мы будем регать домен на , ибо я купил там домен .online за 1 рубль и ssl сертификат.

Да и вообще регистратор более менне норм и я буду не против если вы купите домен по моей реф ссылке.

Вообщем идем на - и ищем там домен например

Вводим промо (не реф промик, я его с рандомсайта взял) EE50-0154-F952-BC3D на 5% (если не работает то бог с ним).

И идем на страницу оплаты.


Тут отключаем все услуги!!! Если домен стоит больше 119 рублей то подключены мусор услуги! Нужен только домен!

Далее оплачиваем домен! Я его покупать не буду, т.к у меня есть лишний .online домен и я покажу на примере его!

После покупки идем на панель управления и нажимаем на настройки.


Жмем "К другому хостингу или сервису".


Жмем "Ip-адрес" и вводим айпи вашего дедика с сайтом.


Если все окей и отобразилось сообщение как на скрине то идем на дедик.


На дедике заходим в настройки OpenServer`a и идем в Алиасы.

Пишем домен в "Исходный домен" и папку с сайтом в "Конечный домен".

Жмете добавить и не забываете про кнопку сохранить!


Если у вас все заработало то поздравляю вас!

С 99 попытки, но вроде как пыхтеть и не умирает. Дай бог здоровья

скоро и это будет не нужно с chatGPT

"Если у вас все заработало то поздравляю вас!". Спасибо, долго мучался но получилось