Romych в 05:36, 9 серпня 2021

2021-08-09T05:36:31Z

Нова сторінка

←[[Sanity]]

Официальная инструкция: [https://www.sanity.io/guides/sanity-and-hugo-with-netlify-plugins Integrating Sanity and Hugo with Netlify Plugins]

=== Установка окружения ===

Устанавливаем локально Hugo, Git, [https://nodejs.org/ NodeJS], npm, [https://www.sanity.io/docs/getting-started-with-sanity-cli Sanity CLI], [https://docs.netlify.com/cli/get-started/ Netlify CLI]:

snap install hugo --channel=extended
sudo apt install git nodejs npm
sudo npm install -g @sanity/cli netlify-cli

Проверяем установленное:

hugo version
nodejs --version
npm --version
sanity --version
netlify --version

=== Hugo ===

Создаем папку проекта. Внутри нее будет две рабочих папки:

* <code>web</code> — сайт Hugo и репозиторий для деплоя в Netlify;
* <code>studio</code> — Sanity Studio и схемы контента.

Находясь в корне проекта, клонируем репозиторий с подготовленной сборкой Hugo в папку <code>web</code>:

git clone https://github.com/bathrobe/hugo-sanity-starter-tut web

Запускаем сборку сайта средствами Hugo:

cd web
hugo server

Проверяем сайт в браузере:

* http://localhost:1313/

=== Деплой на Netlify ===

Создаем на [https://github.com/ GitHub], [https://gitlab.com/ GitLab] или [https://bitbucket.org/ Bitbucket] новый репозиторий и добавляем в него содержимое папки <code>web</code>.

Логинимся на https://netlify.com/ и кликаем кнопку '''New site from Git'''.

Netlify запросит доступ к репозиторию. После того, как доступ будет предоставлен, Netlify определит команду для сборки сайта hugo и папку для итогового сайта:

[[Файл:Netlify-hugo.png|обрамить|центр]]

Жмем "Deploy site" и ждем пару минут. Netlify закончит деплой из нашего репозитория к себе в облако и покажет ссылку на рабочий сайт на субдомене <code>.netlify.app</code>.

=== Sanity Studio ===

Переходим в корень проекта и инициализируем Sanity:

cd ..
sanity init

В процессе выбираем: <code>Create new project</code> — <code>Use the default dataset configuration</code> — соглашаемся с предложенным <code>Project output path</code> — выбираем <code>"blog (schema)"</code>.

После завершения появится новая папка, названная в соответствии с предложенным раньше Project output path — переименовываем ее в <code>studio</code>.

Получим в браузере админку для редактирования контента:

cd studio
sanity start

Откройте админку в браузере:

* http://localhost:3333/

Можно поиграть с контентом, со связями между сущностями Post, Author, Category. Все изменения сохраняются сразу, но, чтобы отредактированную сущность можно было использовать в другой, нужно нажимать кнопку <kbd>Publish</kbd>.

Также можно поиграть со схемами контента, как [https://www.sanity.io/guides/sanity-and-hugo-with-netlify-plugins#d8045bbae7aa написано в инструкции] или в видео: https://youtu.be/32RP-sG1njE?t=259. Изменения сразу появляются в админке.

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

sanity deploy

Нужно будет придумать субдомен для URL типа название-вашего-проекта.sanity.studio — на этом адресе и будет доступна админка в облаке.

=== Импорт контента из Sanity в файлы .md в Hugo ===

Делается посредством создания [https://www.netlify.com/products/build/plugins/ Netlify Build Plugin].

Перейдите в <code>web</code> и запустите <code>netlify link</code>:

cd ../web/
netlify link

Netlift спросит, с каким проектом связать текущую папку — выбираем <code>Use current git remote origin</code>.

После этого можно тестировать плагин командой <code>netlify build --dry</code>.

Для создания плагина создадим файл package.json командой:

npm init -y

Установим необходимые зависимости:

npm install @sanity/block-content-to-markdown @sanity/client fs-extra

Создайте файл <code>netlify.toml</code>:

touch netlify.toml

и добавьте в него две строки:

<nowiki>[[plugins]]</nowiki>
package = "/plugins/netlify-sanity-md"

Создайте вложенные папки:

mkdir -p plugins/netlify-sanity-md

и внутри два файла — <code>index.js</code> и <code>manifest.yml</code>:

touch plugins/netlify-sanity-md/index.js plugins/netlify-sanity-md/manifest.yml

Вставьте в <code>manifest.yml</code> строку:

name: netlify-sanity-md

Внутри <code>index.js</code> напишите скрипт плагина, как это [https://www.sanity.io/guides/sanity-and-hugo-with-netlify-plugins#abd45c377fd8 описано в инструкции]:

<source lang="javascript">
module.exports = {
onPreBuild: async ({ utils, packageJson }) => {
console.log("Starting plugin");
//imports
const fs = require("fs-extra");
const toMarkdown = require("@sanity/block-content-to-markdown");
const client = require("@sanity/client")({
projectId: "YOUR_PROJECT_ID_HERE",
dataset: "YOUR_DATASET_HERE",
useCdn: false,
});

//add any serializers for your portable text
const serializers = {
types: {
code: (props) =>
"```" + props.node.language + "\n" + props.node.code + "\n```",
},
};

fs.readdir("./content", (err, files) => {
if (err) console.log(err);
else {
files.forEach((file) => {
console.log(`Deleting: ${file}`);
fs.unlink(`content//${file}`, (err) => {
if (err) throw err;

});
});
}
});

try {
await client
.fetch(`*[_type == "post"]{categories[]->{title}, date, slug, title, body}`)
.then((res) =>
res.map(async (post) => {
//output YAML frontmatter here
let frontmatter = "---";
Object.keys(post).forEach((field) => {
if (field === "slug") {
return (frontmatter += `\n${field}: "${post.slug.current}"`);
} else if (field === "categories") {
return (frontmatter += `\n${field}: [${post.categories.map(
(cat) => `"${cat.title}"`
)}]`);
} else if (field === "body") {
return;
} else {
frontmatter += `\n${field}: "${post[field]}"`;
}
});
frontmatter += "\n---\n\n";

const wholePost = `${frontmatter}${toMarkdown(post.body, {
serializers,
})}`;

const filePath = `./content/${post.slug.current}.md`;
fs.outputFile(filePath, wholePost, function (err, data) {
if (err) {
return console.log(err);
}
});
})
);
} catch (error) {
utils.build.failBuild("Failure message", { error });
}
},
};
</source>

В начале скрипта вставьте значения:

<source lang="javascript">
projectId: "YOUR_PROJECT_ID_HERE",
dataset: "YOUR_DATASET_HERE",
</source>

из файла <code>studio/sanity.json</code>.

Выполните команду:

netlify build

и проверьте — внутри папки <code>content</code> появятся файлы, соответствующие контенту в Sanity Studio.

Удалите папку <code>public</code> и отправьте код в репозиторий:

git add .
git commit -m "Create Netlify plugin"
git push

Выполните деплой:

netlify build

и проверьте URL вашего сайта на .netlify.app - там уже должна быть обновленная версия с контентом из Sanity Studio.

=== Deploy from the Sanity dashboard ===

cd ../studio
sanity install @sanity/dashboard
sanity install dashboard-widget-netlify

Добавьте в файл <code>sanity.json</code>:

<source lang="javascript">
//...
"parts": [
//...
{
"implements": "part:@sanity/dashboard/config",
"path": "src/dashboardConfig.js"
}
]
</source>

Создайте папку <code>src</code> и в ней файл <code>dashboardConfig.js</code>. Вставьте в этот файл строки:

<source lang="javascript">
export default {
widgets: [
{
name: 'netlify',
options: {
title: 'My Netlify deploys',
sites: [
{
title: 'My Hugo Sanity Website',
apiId: 'YOUR_API_ID',
buildHookId: 'YOUR_BUILDHOOK_ID',
name: 'NETLIFY_SITENAME'
}
]
}
}
]
}
</source>

Вместо '''apiId''' вставьте значение из Netlify "Site Settings > General > Site Details > Site Information > API ID".

'''buildHookId''' сгенерируйте на Netlify "Site Settings > Build and Deploy > Build Hooks > Add build hook". В качестве ID используйте часть после <code>build_hooks/</code>.

Запустите локальную Sanity Studio:

sanity start

Откройте в браузере http://localhost:3333/ — вверху появится кнопка <kbd>Dashboard</kbd>, которая открывает страницу http://localhost:3333/dashboard с кнопкой <kbd>Deploy</kbd> на Netlify.

Теперь вносите изменения в контент, после сохранения нажимайте <kbd>Deploy</kbd> — сайт будет автоматически обновляться.

Sanity и Hugo - Історія редагувань

Romych в 05:36, 9 серпня 2021