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

Чтобы дать контекст, задачи, которые мне нужно было сделать:

  1. Скопируйте все существующие сообщения в новый репозиторий.
  2. Обновите файлы уценки, чтобы включить метаданные, необходимые для шаблона Gatsby.
  3. Обновите файлы уценки, чтобы удалить заголовки «h1», поскольку они исходят из метаданных.
  4. Настройте 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.