Этот пост будет простым и прямолинейным. Я также должен предупредить, что это технический. Если вы будете следовать инструкциям, шаги будут достаточно подробными, чтобы их мог выполнить любой, кто знаком с 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-->
в строку, в которой сообщение должно быть обрезано.
Пожалуйста, оставьте свои вопросы ниже до следующего раза.