Блог на Gatsby + Obsidian from scratch ч.4

Это продолжение серии статей:

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

sitemap.xml - надо рассказать поисковым роботам, какие страницы есть на нашем блоге
robots.txt - в этом файлике можно описать рекомендации, которые поисковики будут учитывать, индексации файлов
.htaccess, хостинг, который я использую работает на веб сервере Apache, он позволяет вкладывать в директории файлик .htaccess, в котором можно настроить разные штуки, меня же интересуют редиректы(перенаправления):
- c http на https, чтобы трафик был зашифрован
- с www.thestrangeadventurer.com на thestrangeadventurer.com
Создадим компонент SEO чтобы показывать корректную метаинформацию роботам

`sitemap.xml` (sitemap-index.xml)

npm install gatsby-plugin-sitemap --legacy-peer-deps

Как видим из страницы описания плагина - он работает только в production режиме и чтобы убедиться в том, что он работает нужно выполнить скрипт

npm run build && npm run serve

Перед тем, как проверить результат работы, нужно добавить плагин в gatsby-config.js

plugins: [
    /**
     * NOTE: Fhis plugin only generates output when run in production mode!
     * To test your sitemap, run: gatsby build && gatsby serve
     */
    `gatsby-plugin-sitemap`,
    //... код других плагинов

Еще нужно перенести поле siteUrl в корень siteMetadata в gatsby-config.js

После этого, выполняем в терминале npm run build && npm run serve и по адресу http://localhost:9000/sitemap-index.xml вы должны увидеть в браузере что-то такое:

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc>https://thestrangeadventurer.com/sitemap-0.xml</loc>
	</sitemap>
</sitemapindex>

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

`robots.txt`

Устанавливаем пакет

npm install --save gatsby-plugin-robots-txt

Добавляем в gatsby-config.js это (ссылку на опции я оставил в комментарии, мне подходит вариант по умолчанию):

  plugins: [
    {
      resolve: 'gatsby-plugin-robots-txt',
      /**
       * Options: https://www.gatsbyjs.com/plugins/gatsby-plugin-robots-txt/#options
       */
    },
    // ...other plugins

Запускаем уже знакомую команду

npm run build && npm run serve

Переходим по ссылке http://localhost:9000/robots.txt и видим что-то похожее

User-agent: *
Allow: /
Sitemap: https://thestrangeadventurer.com/sitemap-index.xml
Host: https://thestrangeadventurer.com

Тут как раз указан основной хост c https и без www, все как мне и надо, а также ссылка на sitemap, по этой инструкции поисковые роботы сами поймут где искать sitemap если дойдут до блога раньше, чем вы добавите ссылку на sitemap вручную.

`.htaccess` (опционально)

Для него тоже можем заиспользровать плагин

npm install gatsby-plugin-htaccess

В gatsby-config.js

plugins: [
    {
      resolve: 'gatsby-plugin-htaccess',
      options: {
          https: true,
          www: false,
      }
    },
    // ... other plugins

Запускаем npm run build и проверяем, в /public/.htaccess должно быть развесистое содержимое с правилами для apache, в том числе и правила, которые отвечают за перенаправление на https версию и на версию без www. В комментариях в файле максимально подробно описано, за что каждое из правил отвечает.

Seo компонент

В качестве завершения этой статьи , которая целиком получилась про SEO, мы добавим SEO компонент, ровно такой, как описано в оф. доке.

Там все написано так, что сделать что-то неправильно довольно сложно, поэтому описывать все шаги я не буду.

Единственное, что важно учесть - данные(точнее их структура и вложенность) в gatsby-config.js (site.siteMetadata) у нас отличаются от примера в доке

Вместо такого запроса для хука useSiteMetadata

site {
  siteMetadata {
	title
	description
	twitterUsername
	image
	siteUrl
  }
}

У меня получился такой (напомню, что запросы можно накликать в hraphql плейграунде, о котром я писал в первой части серии статей):

site {
  siteMetadata {
	description
	siteUrl
	title
	social {
	  github
	  profileImage
	  twitter
	  twitterUsername
	}
  }
}

B компоненте SEO.js мы тоже немного по другому достаем данные их хука useMetaData. Вместо этого:

const { title: defaultTitle, description: defaultDescription, image, siteUrl, twitterUsername } = useSiteMetadata()

Получилось это:

const { title: defaultTitle, description: defaultDescription, social, siteUrl } = useSiteMetadata()
const { profileImage: image, twitterUsername } = social;

Использование компонента на компонентах страниц BlogList и BlogPost

C BlogList все просто, так как это главная страница - мы не будем пробрасывать туда никакие пропсы, единставенное, что нужно - экспортировать константу Head с компоненты уровня страниц:

`templates/BlogList.js`

import { SEO } from '../components/SEO';
//... other code

export const Head = () => (
  <SEO />
)

После чего, можно убедиться, что все работает должным образом

![[Blog-list-metadata.png]]

`templates/BlogPost.js`

Тут поступаем аналогично, но передадим title и description пропсы, сделать это легко, так как Head принимает все те же пропсы, что и сам компонент, который рендерит пост:

import { SEO } from '../components/SEO';
//... other code

export const Head = (props) => {
    const { markdownRemark } = props.data;
    const { excerpt, fields } = markdownRemark; // excerpt необходимо добавить в graphql запрос в этом же файле
    const { title } = fields;
    return (
        <SEO title={title} description={excerpt} />
    )
}

Проверяем: ![[Blog-Post-metadata.png]]

Вместо завершения

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