В попытке вернуться к написанию большего о вещах, которые меня интересуют, я хотел перевести блог в формат, к которому я мог бы легко получить доступ через CMS или просто через редактор кода, пока я пишу файлы уценки.
Чтобы дать контекст, задачи, которые мне нужно было сделать:
- Скопируйте все существующие сообщения в новый репозиторий.
- Обновите файлы уценки, чтобы включить метаданные, необходимые для шаблона Gatsby.
- Обновите файлы уценки, чтобы удалить заголовки «h1», поскольку они исходят из метаданных.
- Настройте
blog.dennisokeeffe.com
сайт на Netlify.
Выбрав Gatsby и Netlify CMS, я следовал инструкциям на сайте Gatsby. Решение о Netlify CMS пришло само собой, так как мой основной веб-сайт и веб-сайт заметок в настоящее время размещены на Netlify.
Шаг 1: Скопируйте все существующие публикации в новый репозиторий.
Это был самый простой шаг. Единственным требованием было скопировать то, что у меня было ранее, из старого репо в новое.
Проблемы, которые возникли из-за этого, заключались в том, что формат файлов уценки, которые я принес, выглядел следующим образом:
# Heading
Content
Мне нужно было обновить содержимое, чтобы оно выглядело так:
---
title: Heading
date: "yyyy-mm-dd"
description: Optional description.
---
Context
Поскольку нужно было портировать 100 сообщений в блоге, мне нужно было кое-что автоматизировать.
Шаг 2. Обновите файлы уценки, чтобы включить метаданные, необходимые для шаблона Gatsby.
Это слишком упрощенная версия, но я написал скрипт, чтобы получить все файлы уценки для блога, затем заставить модуль fs
Nodejs прочитать файлы, обновить их с помощью метаданных, а затем поместить их обратно.
Сам следующий код, я надеюсь, должен быть читаем в их именах, чтобы дать представление о том, что делается:
// npm package that can fetch all *.md files in context/blog
const recursive = require("recursive-readdir")
// takes snake case words like "blog-post-title" and convert it to "Blog Post Title"
const startCase = require("lodash.startcase")
const fs = require("fs")
const getAllBlogPosts = () => recursive("content/blog", ["!*.md"])
const getBlogPostContent = filepath => fs.readFileSync(filepath, "utf-8")
const writeBackMarkdownFile = (filepath, content) =>
fs.writeFileSync(filepath, content, "utf-8")
// example date and description written here for brevity
const addMdxMetaDataToContent = (title, content) => `
---
title: ${title}
date: "2019-10-22"
description: TODO
---
${content}
`
const getFilePathWithoutExt = filepath => filepath.split(".")[0]
const getFilePathWithoutFolderPaths = filepath => {
const pathArr = filepath.split("/")
// final arr elemment will be filename
return pathArr[pathArr.length - 1]
}
const getStartCaseTitleFromPath = filepath =>
startCase(getFilePathWithoutFolderPaths(getFilePathWithoutExt(filepath)))
/**
* Fetch all the blog post markdowns, then iterate
* through all the blog posts. Update the content
* from that blog post and write it back to where it
* was written.
*/
const main = async () => {
console.log("Script running...")
const blogPosts = await getAllBlogPosts()
for (const blogPostPath of blogPosts) {
const title = getStartCaseTitleFromPath(blogPostPath)
const content = getBlogPostContent(blogPostPath)
const contentUpdatedWithMetadata = addMdxMetaDataToContent(title, content)
writeBackMarkdownFile(blogPostPath, contentUpdatedWithMetadata)
console.log(`Written: ${title}`)
}
console.log("Script complete")
}
main()
Как только это было сделано, уценка теперь была в таком состоянии:
---
title: Heading
date: "yyyy-mm-dd"
description: Optional description.
---
# Heading
Context
Чтобы избавиться от # Heading
, нам нужно было сделать еще одно редактирование.
Шаг 3. Обновите файлы уценки, чтобы удалить заголовки «h1», полученные из метаданных.
Этот сценарий был в основном урезанной копией приведенного выше сценария с изменением, заменяющим строку # Heading
плюс предыдущую пустую строку, чтобы получить то, что нам нужно:
const recursive = require("recursive-readdir")
const startCase = require("lodash.startcase")
const fs = require("fs")
const getAllBlogPosts = () => recursive("content/blog", ["!*.md"])
const getBlogPostContent = filepath => fs.readFileSync(filepath, "utf-8")
const writeBackMarkdownFile = (filepath, content) =>
fs.writeFileSync(filepath, content, "utf-8")
const removeHeading = content => content.replace(/\n#\s.+\n/, "")
const getFilePathWithoutExt = filepath => filepath.split(".")[0]
const getFilePathWithoutFolderPaths = filepath => {
const pathArr = filepath.split("/")
// final arr elemment will be filename
return pathArr[pathArr.length - 1]
}
const getStartCaseTitleFromPath = filepath =>
startCase(getFilePathWithoutFolderPaths(getFilePathWithoutExt(filepath)))
const main = async () => {
console.log("Script running...")
const blogPosts = await getAllBlogPosts()
for (const blogPostPath of blogPosts) {
const title = getStartCaseTitleFromPath(blogPostPath)
const content = getBlogPostContent(blogPostPath)
const contentUpdatedWithoutHeading = removeHeading(content)
writeBackMarkdownFile(blogPostPath, contentUpdatedWithoutHeading)
console.log(`Written: ${title}`)
}
console.log("Script complete")
}
main()
Единственное обновление выше — это строка для удаления заголовка с removeHeading(content)
.
Шаг 4: Настройте сайт blog.dennisokeeffe.com на Netlify.
Эта часть потребовала нескольких меньших этапов. На некоторых сайтах я устанавливаю файл netlify.toml
только для того, чтобы предварительно настроить ожидания при добавлении сайта Netlify. Этот файл toml
выглядит следующим образом:
[Settings]
ID = "blog.dennisokeeffe.com"
[build]
command = "yarn build"
publish = "public"
# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Учебник Гэтсби может показать вам, что требуется, чтобы начать работу с Netlify оттуда.
Что касается самого домена, я настроил dennisokeeffe.com
на AWS Route53, поэтому было небольшое требование перейти на Route53 и создать псевдоним, чтобы указать CNAME
на правильное место.
Как только это было там, все цилиндры были в ходу! Вы можете посмотреть сайт здесь, если вы еще не на сайте.
Веб-сайт теперь также использует непрерывное развертывание с Netlify, поэтому любые изменения, которые я делаю через редактор кода локально или через Netlify CMS, вызовут развертывание новой сборки.
С нетерпением жду возможности написать еще несколько постов, включая те, которые не связаны напрямую с кодом!
Первоначально опубликовано в моем блоге. Подпишитесь на меня в Твиттере, чтобы узнать больше скрытых жемчужин @dennisokeeffe92.