И с Google Sheets в качестве базы данных!!

Что такое пеликан

Если вы не знаете об этом или о SSG в целом, я кратко упомяну их. Если вы уже это знаете, просто переходите к динамической части!

По сути, SSG или генераторы статических сайтов — это программы, которые создают веб-сайты на основе контента, при этом человеку, создающему веб-сайт, не нужно писать какой-либо код. Таким образом, вы можете написать несколько постов и статей в уценке или реструктурированном тексте, запустить одну команду CLI, и вы получите исходный код всего (очень простого) веб-сайта. Затем вы можете развернуть, как вам нравится, будь то док-контейнер, веб-сервер apache или что-то вроде страниц github.

Этот тип веб-сайта подходит для статического контента, то есть для вещей, которые не меняются. Блог — прекрасный пример статического веб-сайта, особенно если вы не хотите комментариев.

Самая популярная SSG — Jekyll, написанная на рубине. Существуют альтернативы, написанные на других языках программирования, например Hugo для Go, pelican для Python и другие. Я выбрал Pelican, так как на моем ноутбуке уже был установлен Python.

Для чего мне нужен SSG

Как заядлый читатель, я постоянно ищу что-то новое для чтения. В течение многих лет каждая полученная мной рекомендация сохранялась в заметке Google Keep. Когда я читал книгу из списка, я перемещал ее в другую заметку. Когда друзья просили рекомендации, я копировал/вставлял из списка.

Затем, немного изучив базы данных, я поместил все книги в базу данных Oracle и создал внешний интерфейс без кода с использованием Oracle Apex. Это создает веб-сайт, который отображает данные из таблицы моих книг в виде красивой HTML-страницы. Дополнительным преимуществом было то, что было очень легко создать еще одну страницу, на этот раз с формой пользовательского ввода, где мои читатели могли предлагать свои любимые книги и добавлять их в мой список для чтения!

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

Наконец, я прочитал о SSG и понял, что это идеально подходит для веб-сайта, на котором будет просто храниться список книг.

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

Как я использую Пеликан

Я просто создал 2 файла уценки, каждый из которых содержит список книг в виде таблицы в формате уценки. Один файл — это файл с моими «рейтингами», который включает в себя книги, которые я прочитал, и мой (очень субъективный) рейтинг, основанный только на том, насколько они мне понравились. Второй файл — это «файл предложений», где находятся книги, которые я еще не читал вживую. ̶ ̶I̶ ̶r̶u̶n̶ ̶`̶p̶e̶l̶i̶c̶a̶n̶ ̶c̶o̶n̶t̶e̶n̶t̶`̶ ̶t̶o̶ ̶g̶e̶n̶e̶r̶a̶t̶e̶ ̶t̶h̶e ̶ ̶h̶t̶m̶l̶ ̶a̶n̶d̶ ̶c̶s̶s̶ ̶f̶i̶l̶e̶s̶ ̶f̶o̶r̶ ̶t̶h̶e̶ ̶s̶i̶t̶e̶,̶ ̶t̶h̶e̶n̶ ̶I̶ ̶c̶r̶e̶a̶t̶e̶ ̶a̶ ̶z̶i̶p̶ ̶f̶i̶l̶e̶ ̶i̶n̶c̶l̶u̶d̶i̶n̶g̶ ̶t̶h̶e̶ ̶e̶n̶t̶i̶r̶e̶ ̶o̶u ̶t̶p̶u̶t̶ ̶d̶i̶r̶e̶c̶t̶o̶r̶y̶ ̶a̶n̶d̶ ̶u̶p̶l̶o̶a̶d̶ ̶i̶t̶ ̶t̶o̶ ̶C̶l̶o̶u̶d̶f̶l̶a̶r ̶e̶ ̶p̶a̶g̶e̶s̶.̶

РЕДАКТИРОВАТЬ: я создал частный проект Gitlab, в котором сохраняю исходные файлы уценки. Преимущества этого: 1) теперь я получаю пользу от управления версиями Git, 2) я могу редактировать свой сайт с любого устройства и 3) Pages автоматически обнаруживает любые изменения в моей основной ветке и повторно развертывает мой сайт. Так что все, что мне нужно сделать сейчас, это отредактировать уценку и зафиксировать.

Я выбрал Cloudflare, поскольку он бесплатный, и я уже использую Cloudflare для управления DNS.

После этого веб-сайт будет доступен на моем собственном домене по адресу https://books.nokoro.net.

От начала до конца, от установки Pelican, переписывания контента в виде таблицы уценки, написания анлайнера для небольшого редактирования полученного HTML, вплоть до загрузки и просмотра сайта вживую  — на моем ноутбуке с Debian уходит около 10 минут. На Mac это заняло немного больше времени, но только потому, что Python еще не был установлен.

Использование Javascript для размещения динамических разделов на статическом сайте

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

Моей первой заботой была база данных, так как я знал, что в худшем случае я мог бы просто добавить немного написанного вручную HTML к сгенерированному выводу, который у меня был. Я рассмотрел несколько вариантов бесплатного хостинга PostgreSQL, которые позволяют бесплатно хранить небольшие объемы данных (обычно от 5 до 20 МБ). Это сработает, но я вернусь к управлению базой данных или, по крайней мере, SQL. (или pgrest, если его можно установить в управляемой БД.)

Затем мне пришла в голову блестящая идея просто использовать форму Google в качестве устройства для ввода данных и Google Таблицы в качестве простой и бесплатной «базы данных».

Markdown, если вы не знали, напрямую поддерживает теги HTML. Итак, чтобы поместить форму на мою страницу, я добавил сворачиваемый сегмент markdown/html в нижнюю часть страницы и просто встроил форму Google с помощью iframe:

Форма остается в стороне, пока пользователь не нажмет ссылку "Добавить рекомендацию":

Теперь, чтобы запросить данные и динамически добавить их на страницу "Предложения".

Сначала я попытался использовать API gviz (я думаю, Google Visualizer) для запроса моей электронной таблицы, как описано здесь: https://ai2.metricrat.co.uk/guides/use-gviz-to-get-and-query -гугл-лист-данные

но это не сработало в моем javascript, так как он намеренно возвращает недопустимый JSON.

Следующим моим шагом было бесплатное создание учетной записи Google Cloud (до 12 проектов на момент написания статьи) и создание токена API для моей электронной таблицы. Затем я мог бы напрямую использовать свою электронную таблицу с помощью простых запросов GET! Идеально подходит для этого использования.

Обратите внимание, что этот ключ API предоставляет неограниченный доступ к вашим API Google! Я ограничил его работой только с API листов, а также ограничил его работой только с моим доменным именем. Таким образом, публикация в Интернете безопасна, и люди не могут украсть ее, нажав «Просмотреть исходный код». Я хотел бы ограничить его доступом только для чтения в отдельной электронной таблице, но на момент написания это все, что я могу сделать, за исключением создания учетной записи Google только с одной электронной таблицей.

Последним шагом было автоматическое получение данных из электронной таблицы для отображения на странице «Предложения» сайта. Мне пришлось немного изучить javascript и обещания, но после проб и ошибок и помощи друга я создал JS-скрипт внутри тегов `‹script›` прямо в моей уценке, который запускается при загрузке страницы, получает данные из электронной таблицы через API листов и добавляет строки в таблицу «Предложения», которая уже существует в DOM.

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

Я также написал oneliner, который удаляет HTML, относящийся к теме pelican по умолчанию, и перенаправление с главной страницы сайта, поскольку я хочу, чтобы пользователи могли видеть только мои страницы с контентом. Я запускаю этот oneliner после создания вывода с помощью Pelican.

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