Gatsby улеснява обслужването на статични HTML файлове с вашия сайт gatsby

Първоначално публикувано на адрес https://fek.io.

Подготвях се да създам набор от слайдове за следващата си презентация. Обикновено използвам slides.com, за да създавам и хоствам моите слайдове. Ако не сте разглеждали slide.com преди, това е чудесен пример за силата на уеб приложенията. Slides.com има редактор на презентации, който е базиран на Reveal.js, JavaScript библиотека за създаване на анимирани слайдшоута. Твърдо вярвам, че нямате нужда от Powerpoint, за да правите слайдшоута. Това може да стане като уеб приложение.

Преместване в Гетсби

Докато се приготвях да започна следващия си набор от слайдове, разбрах, че съм надвишил лимита си от безплатни слайдове. Затова реших да преместя слайдовете си в моя сайт Gatsby.

Първото нещо, което трябваше да направя, беше да експортирам всичките си слайдове. Slides.com ви дава възможност да импортирате и експортирате слайдове във и извън тяхното приложение. Това ще ви позволи да експортирате вашите слайдове като самостоятелно HTML приложение в един HTML файл.

Gatsby ви позволява да хоствате статично съдържание във вашия сайт, така че ако трябва да обслужвате статичен CSS или изображения, това може лесно да се конфигурира. Ще трябва да инсталирате плъгина „gatsby-source-filesystem“, за да обслужвате тези файлове.

> npm i gatsby-source-filesystem --save

Горната команда ще инсталира приставката във вашия сайт Gatsby. След като бъде инсталиран, ще трябва да конфигурирате приставката във вашия файл „gatsby-config.json“. Добавете следната конфигурация в експортирания плъгин.

plugins: [
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `static`,
          path: `${__dirname}/static`
        },
      }
];

Това ще търси в „статична“ папка за всички статични файлове, които трябва да обслужвате. Добавих друга папка под моята статична папка, наречена „слайдове“, и поставих моите HTML файлове в тази папка.

За да извлечем списък със слайдове от нашата статична папка, ще трябва да напишем graphql заявка, за да получим този списък с файлове. Можете да тествате това, като използвате редактора Graph iql, хостван в сървъра за разработка. Можете да получите достъп до това, като отидете на http://localhost:8000/___graphql.

Следващата необходимост, която ще трябва да направите, е да създадете страница на Гетсби, за да изброите слайдовете във вашата папка „слайдове“. Създадох такъв под корена на моя „/src/pages“, наречен „slides.js“. Ето как изглеждаше моят код за реакция в моя файл „slides.js“.

Ако погледнете раздела на ред 22, който има карта в краищата на резултата data.myslides.edges.map, връщам маркер за котва вместо маркер Link за показване на връзката. Това е така, защото маркерът Link се използва само за страници на gatsby. Тъй като това е статично HTML съдържание, искаме да използваме нормален anchor таг.

Заключение

Гетсби е страхотен в правенето на много различни неща. В допълнение към изобразяването на реагиращо съдържание и съдържание на Gatsby, можете също да го използвате за обслужване на статично съдържание, стига да конфигурирате правилно сайта си.

Има също редица добавки, които можете да използвате за създаване на слайдове от маркдаун, които също смятам да разгледам.

Можете да видите моята страница със слайдове на тук.

Първоначално публикувано на адрес https://fek.io.