02.01.2024 08:41
egaxegax 8 3700 Источник

Хочу рассказать о своём новом (хотя существует уже почти 3 года) сайте egaxegax.github.io, после закрытия предыдущего сайта egaxegax.appspot.com на хостинге Google App Engine в начале 2021 года. О нём я писал в статье Cайт на Django-nonrel на платформе Google App Engine для Python. Эта статья рассчитана на тех, кто хочет узнать или получить простой сайт с возможностью добавления и правки контента на основе создания markdown-постов.

Сайт egaxegax.appspot.com просуществовал 10 лет на хостинге GAE. Но был закрыт вместе с бесплатным доступом к GAE после изменений политики Google. В начале 2020 года Google прислал уведомление на почту, что к концу года мне нужно выбрать один из платных планов хостинга (от 300$ в месяц), а бесплатный доступ будет закрыт. И я стал готовиться к переезду с GAE, забэкапив содержимое сайта.

У меня уже был проект dbcartajs на github и сайт к нему на платформе Github Pages. И я решил перенести всё содержимое старого сайта в репозиторий GitHub, открыв к нему доступ через хостинг GitHub Pages. Для этого текстовый бекап базы данных с содержимым старого сайта я разбил на маленькие .txt файлы c html-содержимым для каждой строчки из таблицы, то есть для каждого поста. Python-код моделей и вью старого сайта, написанного для фрейм-ворка Django-nonrel я переписал на языках JavaScript и HTML, упростив код и отказавшись от онлайн-редактирования содержимого сайта через веб-формы. Позже я перевёл .txt-файлы в markdown-формат .md для отображения страниц в репозитории также как на сайте, но отказался от использования шаблонов Jekyll, создав в корне проекта файл .nojekyll, посколь-ку компиляция им .md файлов для сборки сайта на Github Pages (после git push в master) идет очень долго с моим количеством файлов. GitHub автоматически конвертит .md файлы и отображает как html на страницах репозитория. В большинстве репозиториев есть хотя бы один README.md файл, у меня в проекте .md файлов оказалось больше 30,000.

В новой схеме для управления содержимым я использую индексные файлы index.js в формате массивов *JavaScript*, содержащие список всех .md файлов постов по каждому разделу сайта. Для переиндексации раздела после добавления-удаления новых .md файлов контента используется python-скрипт update.py, лежащий в корневой папке. Кроме того, внутри папок разделов есть дополнительные скрипты для парсинга файлов контента: в разделе *books* лежит скрипт *books2.py* для парсинга скачанных epub-файлов электронных книг в список *.md* и *.jpg* файлов по жанрам и авторам; в разделе *posts* есть скрипт *readcsv.py* для парсинга *.csv* файлов плейлистов *youtube* в список *.md* постов.

Сайт разделен на разделы: books (Книги), foto (Фото), posts (Заметки), songs (Аккорды), vesti (Записки) и dbcartajs (Карты, как символьная ссылка на папку проекта). Разделы являются подкаталогами после клонирования проекта из репозитория github на диск.

Особенности сайта:

  • бесконечный скроллинг постов;

  • встроенный поиск по индексу;

  • встроенный парсер на *javascript* *markdown* постов

Подробная инструкция о том, как пользоваться, есть в README-файле описания проекта

Комментарии (8)


  1. Sazonov
    02.01.2024 12:01
    #26330948
    +4

    Сделайте подгрузку постов с опережением на 3-4 штуки, чтобы скролл не лагал.

    А вообще, чем ваш проект лучше существующих статических генераторов типа Hugo / Gastby / Jekyll?


    1. egaxegax Автор
      02.01.2024 12:01
      #26331156

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

            // infinite scroll
    document.addEventListener('scroll', function() {
      if(!PAGE.lock && (window.pageYOffset + window.innerHeight) > document.getElementById('root').offsetHeight-10){
        addPageContent(ROOTS, SUBJ, MSGS, PAGE);
      }
    });

      Фрагмент функции addPageContent

      setTimeout(function(){ PAGE.lock = (page.titles.length == 0); }, 1000);

      Переменная PAGE.lock блокирует скролл пока не завершится загрузка предыдущего +1 сек.

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


      1. Sazonov
        02.01.2024 12:01
        #26332616
        +1

        Я как-то закостылил Hugo + rsync + nginx Работало моментально. Но потом перешел на netlify. Да, там сборка секунд 30 идёт (раньше была 4-6 минут. Но не вижу в этом проблем.

        По поводу футера. У вас же бесконечный скролл. Футер нужен только с одной целью - показать что долистали до конца. Иначе он бесполезен.


        1. egaxegax Автор
          02.01.2024 12:01
          #26332866

          Поясню про скроллинг и футер подробнее - он бесконечный только при медленном интервале прокрутки, при интервале прокрутки <1сек он блокируется флагом PAGE.lock. Это поведение я настроил специально под себя чтобы видеть футер с метрикой в этом случае, иначе он все время ускользает.

          По поводу Netlify - это из области nodejs, с которым я не работал, но планировал изучать по основной работе, можно будет попробовать. Спасибо за отклик.


          1. Sazonov
            02.01.2024 12:01
            #26335442
            +1

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

            По поводу Netlify - причём тут вообще «область nodejs»? Это удобный хостинг статических сайтов. Любых. Хоть произвольных папок.


      1. alexnozer
        02.01.2024 12:01
        #26340502

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

        Попробуйте Eleventy (11ty). Простой генератор статических страниц. Высокая скорость сборки шаблонов, помимо прочего - одна из его ключевых фич.


  1. aeg_borisovich
    02.01.2024 12:01
    #26340076

    Реклама
    Реклама
    Hidden text

    Реклама от вас или от github?


    1. egaxegax Автор
      02.01.2024 12:01
      #26340104

      Реклама от Яндекс (РСЯ). Давно зарегистрировался в РСЯ лет 7 назад, хотел разместить рекламу ещё на прежнем сайте, но тогда мне Яндекс отказал, а летом прошлого года обнаружил что аккаунт одобрен, получил скрипт вставки, добавил на сайт. Видимо у Яндекса изменилась политика в отношении маленьких сайтов, с небольшой посещаемостью.

      Также давно зарегестрировал в Google Adsense но он ни на старый ни на новый разрешения не даёт. Наверное по политическим соображениям, американская компания все-таки.