Этот пост будет простым и прямолинейным. Я также должен предупредить, что это технический. Если вы будете следовать инструкциям, шаги будут достаточно подробными, чтобы их мог выполнить любой, кто знаком с nodejs.

Настройка

  • Установите NodeJS и Yarn/NPM
  • Docusaurus: Создайте новую папку blog и cd в папке и запустите npx docusaurus-init
  • Некоторые файлы будут сгенерированы
  • Переименоватьdocs-examples-from-docusaurus в docs
  • cd website
  • Переименовать blog-examples-from-docusaurus в blog
  • Запустите локальный веб-сервер через yarn start или npm start

Веб-страница откроется в вашем браузере. Пришло время настроить свой блог и перенести сообщения из блога со среды в свой блог.

Настройка

  • Создайте файл index.html в website/static/, скопируйте и вставьте в него приведенный ниже код и перезапустите веб-сервер через yarn start или npm start.
<!DOCTYPE HTML> 
<html lang="en-US">   
  <head>     
    <meta charset="UTF-8">     
    <meta http-equiv="refresh" content="0; url=blog/">     
    <script type="text/javascript">       
      window.location.href = 'blog/';     
    </script>     
    <title>Title of Your Blog</title>   
  </head>   
  <body>     
    If you are not redirected automatically, follow this <a href="blog/">link</a>.   
  </body> 
</html>
  • Обратите внимание, что веб-страница открывается с сообщениями блога по умолчанию.

Поздравляем с завершением сложной части. Вам нужно сделать это только один раз.

Перемещение среднего сообщения в ваш статический блог

  • Установите расширение Chrome Конвертировать сообщения Medium в Markdown
  • Создайте новый файл markdown (.md) в каталоге website/blog. Имя файла должно быть в формате YY-MM-DD-my-post-title.md. Часть даты важна. Название не имеет значения. Дата в идеале должна совпадать с датой публикации вашего поста на Medium.
  • Скопируйте и вставьте следующее поверх файла:
---
title: We failed at starting a Business and it was depressing
author: Uchi Uchibeke
authorURL: https://lushplans.com/about.html
authorImageURL: https://lushplans.com/img/team/uchi.png
---

Заголовок должен совпадать с заголовком вашего среднего поста.

  • Затем, используя Chrome, откройте средний пост, который вы хотите переместить. Обязательно прокрутите вниз, чтобы убедиться, что все изображения загружены.
  • После того, как средний пост открыт, щелкните значок расширения Chrome «Преобразовать в Markdown». Откроется всплывающее окно, содержащее ваш средний пост в формате уценки.
  • Скопируйте текст уценки из всплывающего окна
  • Вернитесь к файлу YY-MM-DD-my-post-title.md и вставьте текст.
  • Удалить первую строку (заголовок сообщения) размещенного контента
  • Удалите все строки внизу после конца вашего поста
  • Сохраните файл и перезапустите сервер
  • Вот и все. Готово.
  • Возможно, удалите файлы по умолчанию, которые поставляются с шаблоном.
  • Чтобы добавить больше сообщений среднего размера, сделайте то же самое, что и в начале этого раздела.

Генерация и развертывание статического HTML

  • Запустите yarn build или npm run build, чтобы создать оптимизированную версию ваших сообщений в блоге.
  • Переместите содержимое build/test-site в каталог blog на вашем веб-сайте.
  • Нажмите на свой веб-хост, как обычно
  • Посетив YourWebsite.com/blog, вы перейдете ко всем сообщениям, которые вы добавили.

Настройка

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

И еще: обратите внимание, что YourWebsite.com/blog показывает весь пост. Вероятно, мы хотим показать усеченную сводку. Для этого:

  • В файле YY-MM-DD-my-post-title.md добавьте <!--truncate--> в строку, в которой сообщение должно быть обрезано.

Пожалуйста, оставьте свои вопросы ниже до следующего раза.