Pull to refresh

Как я создал сайт на базе GitHub Pages: история новичка и ChatGPT

Reading time5 min
Views6.3K

Предыстория

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

Всё с начала?
Всё с начала?

Несмотря на это, я не хотел бросать свои мысли и наработки. Решил систематизировать свои знания и поделиться ими, чтобы они не пропали даром. Вдруг кому-то еще пригодится тема с open source. Поэтому я принял решение создать веб-сайт, систематизирующий все мои знаний об open source в теме трейдинга.

Начало пути

Я ничего не знал о веб-программировании и GitHub Pages. Это было новое и пугающее начинание, но я был полон решимости освоить эту область. Моей целью было создать сайт, где я мог бы делиться своими стратегиями и идеями, а также документировать свой путь.

Изучение GitHub Pages

Первым шагом было понимание, что такое GitHub Pages. GitHub Pages позволяет хостить статические веб-сайты непосредственно из репозиториев GitHub. Это бесплатный и удобный способ публиковать свои проекты в интернете. Однако, я столкнулся с множеством проблем на начальном этапе.

Настройка GitHub Pages

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

  1. Создание репозитория на GitHub: Я создал репозиторий с именем osaengine.github.io, который автоматически связывается с GitHub Pages.

  2. Подключение собственного домена: Чтобы мой сайт выглядел профессионально, я решил использовать собственное доменное имя. Для этого нужно было добавить файл CNAME в корневую директорию репозитория с моим доменным именем. Это необходимо для того, чтобы GitHub Pages знали, какой домен использовать для вашего сайта. Содержимое файла CNAME должно быть простым текстом, содержащим ваш домен, например:

    osaengine.ru
  3. Настройка DNS-записей: В панели управления доменом я создал A-записи, указывающие на IP-адреса GitHub Pages, и CNAME-запись, указывающую на мой репозиторий:

    185.199.108.153
    185.199.109.153
    185.199.110.153
    185.199.111.153

  4. CNAME-запись: Указывает на ваш GitHub Pages репозиторий. Для поддомена (например, www.osaengine.ru) создайте CNAME-запись, которая указывает на ваше GitHub имя пользователя и репозиторий (необязательно, если не нужно чтобы сайт открывался по этому устаревшему префиксу):

    www  CNAME osaengine.github.io.

Первая версия сайта

Создание первой версии сайта было нелегким. Я загрузил свои начальные файлы на GitHub, но сайт был полон ошибок. Я решил обратиться за помощью к ChatGPT. 4-ая версия, так как 4 omni оказалась полнейшей ерундой. Это было отличное решение, поскольку искусственный интеллект помогал мне на каждом шагу.

Работа с ИИ

Через постоянное общение с ChatGPT, я смог решить множество проблем. Вот как это выглядело:

  1. Исправление ошибок: ChatGPT помогал мне выявлять и исправлять ошибки в коде.

  2. Добавление функциональности: Я узнал, как добавлять новые функции на сайт, такие как сендвич-меню и адаптивный дизайн.

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

Мучаюсь с адаптивной версткой, которую не до конца победил
Мучаюсь с адаптивной версткой, которую не до конца победил

Наполнение контентом и улучшение дизайна

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

Работа над дизайном

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

  1. Адаптивный дизайн: Сайт должен был выглядеть хорошо как на компьютерах, так и на мобильных устройствах. Я использовал медиазапросы и Flexbox для создания адаптивного интерфейса.

  2. Сендвич-меню: Для мобильной версии я добавил сендвич-меню, которое значительно улучшило навигацию.

  3. Формат блогов: Я придумал формат, в котором блоги загружаются по запросу, что позволило не перегружать страницу большим количеством контента сразу.

Очень важно постоянно отправлять все файлы целиком и использовать 4-ую версию модели (не GPT-4 Omni), так как только эта модель нормально читает то, что ей прислали. Также важно просить файл целиком в ответ, так как ИИ любит халявить и не оставляет адаптивность под мобильные устройства.

Поворот к блогам

Изначально моя идея заключалась в создании каталога с open source платформами, посвященного алготрейдингу. Я хотел систематизировать информацию о различных платформах с открытым исходным кодом, чтобы посетители могли легко найти подходящие инструменты для своих нужд.

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

Развитие блога

Писать блоги оказалось интересным занятием. Я решил освещать все, что связано с алготрейдингом:

  1. Обзоры программ: Я начал писать обзоры на популярные платформы и программы, как с открытым, так и с закрытым исходным кодом.

  2. Новости индустрии: В разделе блога стали появляться статьи с последними новостями и событиями в мире алготрейдинга.

  3. Обучающие материалы: Я добавил раздел с обучающими статьями, где делился своими знаниями и опытом, надеясь помочь новичкам в этой сфере.

Счастье наступило?
Счастье наступило?

Раскрутка сайта

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

Первые шаги и трудности

Я вступил в несколько крупных чатов по алготрейдингу в Telegram и начал делиться ссылкой на свой сайт. Моя идея заключалась в том, чтобы заинтересовать людей полезным контентом и показать, что сайт не имеет никакой коммерческой подоплеки. Однако, реакция оказалась далеко не такой, как я ожидал.

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

Шоколадная критика
Шоколадная критика

Завоевание авторитета

Я продолжал участвовать в чатах, задавать вопросы, давать советы и делиться своими знаниями. Постепенно мое участие начало приносить плоды. Люди стали замечать, что я действительно заинтересован в теме алготрейдинга и хочу делиться полезной информацией. Со временем, отношение ко мне начало меняться.

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

Ах да, вот и мой сайт osaengine.ru . Здесь можно найти информацию о различных open source платформах и новости индустрии.

Мой путь от новичка, не знающего ничего о веб-программировании и GitHub Pages, до владельца сайта, который посещают и ценят многие люди, был полон вызовов и препятствий. Но он также был и чрезвычайно увлекательным и полезным. Я надеюсь, что мой опыт вдохновит других на создание собственных проектов и стремление к знаниям и самосовершенствованию.

Будущее сайта

Мой путь еще не окончен. Впереди множество новых функций и улучшений. Весь исходный код проекта доступен на GitHub по адресу: https://github.com/osaengine/osaengine.github.io. Я надеюсь, что мой опыт будет полезен другим новичкам, стремящимся создать свои сайты.

Создание сайта на базе GitHub Pages оказалось интересным и познавательным опытом. Я научился многому и продолжаю развиваться в этой области. Возможно, мой путь вдохновит кого-то еще попробовать свои силы в веб-разработке и поделиться своими знаниями с миром.

Полное понимание ситуации
Полное понимание ситуации

Tags:
Hubs:
Total votes 12: ↑6 and ↓6+3
Comments19

Articles