Sanity и Hugo
Официальная инструкция: Integrating Sanity and Hugo with Netlify Plugins
Устанавливаем локально Hugo, Git, NodeJS, npm, Sanity CLI, 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
Создаем папку проекта. Внутри нее будет две рабочих папки:
web— сайт Hugo и репозиторий для деплоя в Netlify;studio— Sanity Studio и схемы контента.
Находясь в корне проекта, клонируем репозиторий с подготовленной сборкой Hugo в папку web:
git clone https://github.com/bathrobe/hugo-sanity-starter-tut web
Запускаем сборку сайта средствами Hugo:
cd web hugo server
Проверяем сайт в браузере:
Создаем на GitHub, GitLab или Bitbucket новый репозиторий и добавляем в него содержимое папки web.
Логинимся на https://netlify.com/ и кликаем кнопку New site from Git.
Netlify запросит доступ к репозиторию. После того, как доступ будет предоставлен, Netlify определит команду для сборки сайта hugo и папку для итогового сайта:
Жмем "Deploy site" и ждем пару минут. Netlify закончит деплой из нашего репозитория к себе в облако и покажет ссылку на рабочий сайт на субдомене .netlify.app.
Переходим в корень проекта и инициализируем Sanity:
cd .. sanity init
В процессе выбираем: Create new project — Use the default dataset configuration — соглашаемся с предложенным Project output path — выбираем "blog (schema)".
После завершения появится новая папка, названная в соответствии с предложенным раньше Project output path — переименовываем ее в studio.
Получим в браузере админку для редактирования контента:
cd studio sanity start
Откройте админку в браузере:
Можно поиграть с контентом, со связями между сущностями Post, Author, Category. Все изменения сохраняются сразу, но, чтобы отредактированную сущность можно было использовать в другой, нужно нажимать кнопку Publish.
Также можно поиграть со схемами контента, как написано в инструкции или в видео: https://youtu.be/32RP-sG1njE?t=259. Изменения сразу появляются в админке.
Также можно опубликовать наш контент в облаке Sanity, сделав его доступным для редактирования другими участниками команды:
sanity deploy
Нужно будет придумать субдомен для URL типа название-вашего-проекта.sanity.studio — на этом адресе и будет доступна админка в облаке.
Делается посредством создания Netlify Build Plugin.
Перейдите в web и запустите netlify link:
cd ../web/ netlify link
Netlift спросит, с каким проектом связать текущую папку — выбираем Use current git remote origin.
После этого можно тестировать плагин командой netlify build --dry.
Для создания плагина создадим файл package.json командой:
npm init -y
Установим необходимые зависимости:
npm install @sanity/block-content-to-markdown @sanity/client fs-extra
Создайте файл netlify.toml:
touch netlify.toml
и добавьте в него две строки:
[[plugins]] package = "/plugins/netlify-sanity-md"
Создайте вложенные папки:
mkdir -p plugins/netlify-sanity-md
и внутри два файла — index.js и manifest.yml:
touch plugins/netlify-sanity-md/index.js plugins/netlify-sanity-md/manifest.yml
Вставьте в manifest.yml строку:
name: netlify-sanity-md
Внутри index.js напишите скрипт плагина, как это описано в инструкции:
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 });
}
},
};
В начале скрипта вставьте значения:
projectId: "YOUR_PROJECT_ID_HERE",
dataset: "YOUR_DATASET_HERE",
из файла studio/sanity.json.
Выполните команду:
netlify build
и проверьте — внутри папки content появятся файлы, соответствующие контенту в Sanity Studio.
Удалите папку public и отправьте код в репозиторий:
git add . git commit -m "Create Netlify plugin" git push
Выполните деплой:
netlify build
и проверьте URL вашего сайта на .netlify.app - там уже должна быть обновленная версия с контентом из Sanity Studio.
cd ../studio sanity install @sanity/dashboard sanity install dashboard-widget-netlify
Добавьте в файл sanity.json:
//...
"parts": [
//...
{
"implements": "part:@sanity/dashboard/config",
"path": "src/dashboardConfig.js"
}
]
Создайте папку src и в ней файл dashboardConfig.js. Вставьте в этот файл строки:
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'
}
]
}
}
]
}
Вместо apiId вставьте значение из Netlify "Site Settings > General > Site Details > Site Information > API ID".
buildHookId сгенерируйте на Netlify "Site Settings > Build and Deploy > Build Hooks > Add build hook". В качестве ID используйте часть после build_hooks/.
Запустите локальную Sanity Studio:
sanity start
Откройте в браузере http://localhost:3333/ — вверху появится кнопка Dashboard, которая открывает страницу http://localhost:3333/dashboard с кнопкой Deploy на Netlify.
Теперь вносите изменения в контент, после сохранения нажимайте Deploy — сайт будет автоматически обновляться.