devii
v0.5.0
Стартер в блоге разработчика на 2020 год.
Next.js
Реагировать
Машинопись
Отметка
Синтаксис выделение
Сео
RSS Generation
Если вы счастливы и знаете это, смотрите в этот репо
/md/blogMarkdown.tsx с поддержкой синтаксиса в стиле GithubУзнайте больше о мотивации + дизайн Devii по адресу https://colinhacks.com/blog/devii.
Этот репо содержит код для https://devii.dev.
Devii.dev служит как документацией, так и рабочей демонстрацией Devii. После того, как вы клонируете/разделите его, вы можете просмотреть код, чтобы узнать, как работает Devii. Тогда вы можете вырвать все, что вам не нравится, настраивать все остальное и создать свои собственные инструменты и компоненты поверх основы Devii!
Ваш личный веб -сайт - это онлайн -проявление вас. Devii на самом деле не предоставляет много из коробки. Он предоставляет несколько хороших стилей по умолчанию среднего в стиле для ваших сообщений в блоге и некоторых инструментов для загрузки/рендеринга. Но вам придется реализовать свою собственную домашнюю страницу более или менее с нуля. И вот в чем дело! Не соглашайтесь на какую -то тему. Создайте что -то, что представляет вас.
Чтобы начать:
git clone [email protected]:yourusername/devii.git my-blog
cd my-blog
yarn
yarn dev . Это должно запустить сервер на http://localhost:3000 . Ядром этого репо является следующим.js. Мы выбрали Next.js, потому что это самый простой, самый элегантный способ создать статическую версию веб-сайта на основе React. Документация превосходна; Прочитайте это первым: документация Next.js.
Вот сокращенная версия структуры проекта. Некоторые файлы конфигурации ( next.config.js , next-end.d.ts , .gitignore ) были удалены для простоты.
.
├── README.md
├── public // all static assets (images, css, etc) go here
├── pages // every .tsx component in this dir becomes a page of the final site
| ├── index.tsx // the home page (which has access to the list of all blog posts)
| ├── blog
| ├── [blog].md // a template component that renders the blog posts under `/md/blog`
├── md
| ├── blog
| ├── devii.md // this page!
├── whatever.md // every MD file in this directory becomes a blog post
├── components
| ├── BlogPost.tsx
| ├── Code.tsx
| ├── Footer.tsx
| ├── Header.tsx
| ├── Markdown.tsx
| ├── Meta.tsx
| ├── <various>
├── loader.ts // contains utility functions for loading/parsing Markdown
├── node_modules
├── tsconfig.json
├── package.json
Next.js генерирует новую веб -страницу для каждого файла в каталоге pages . Если вы хотите добавить страницу о своем блоге, просто добавьте about.tsx внутри pages и начните писать страницу.
По умолчанию Repo содержит только две страницы: домашняя страница ( /pages/index.tsx ) и страница блога ( /pages/[blog].md ).
Файл [blog].ts следует за соглашением Next.js об использовании квадратных скобок, чтобы указать динамический маршрут.
Домашняя страница намеренно минимальна. Вы можете поместить все, что хотите в index.tsx ; Одна из наших целей в разработке Devii состояла в том, чтобы не налагать никаких ограничений на разработчика. Используйте свое воображение! Ваш веб -сайт - это онлайн -манифест вас. Вы можете использовать любые пакеты NPM или библиотеки стиля, которые вам нравятся.
Devii неопинирован о стилии. Поскольку ваш сайт Devii является стандартным приложением React под капотом, вы можете использовать свою любимую библиотеку от npm для стиля.
Devii предоставляет определенные стили по умолчанию, в частности, в рендереровке Markdown ( /components/Markdown.tsx ). Эти стили реализованы с использованием встроенного встроенного стиля styled-jsx . К сожалению, было необходимо сделать эти стили глобальными, поскольку styled-jsx не играет хорошо со сторонними компонентами (в данном случае react-markdown ).
Не стесняйтесь переосмыслить встроенные стили с выбранной библиотекой, если вы решите использовать отдельную библиотеку стиля (эмоции довольно великолепны), тогда вы можете повторно внедрить стили по умолчанию
Просто добавьте файл разметки в md/blog/ для создания нового сообщения в блоге:
foo.md в каталоге /md/bloghttp://localhost:3000/blog/foo . Вы должны увидеть новый пост. Каждый файл разметки может включать в себя «блок переднего мешка», содержащий различные метаданные. Devii предоставляет утилиту loadPost , которая загружает файл разметки, анализирует метаданные переднего мельницы и возвращает структурированный объект PostData :
type PostData = {
path : string ;
title ?: string ;
subtitle ?: string ;
description ?: string ; // used for SEO
canonicalUrl ?: string ; // used for SEO
datePublished ?: number ; // Unix timestamp
author ?: string ;
authorPhoto ?: string ;
authorHandle ?: string ; // twitter handle
tags ?: string [ ] ;
bannerPhoto ?: string ;
thumbnailPhoto ?: string ;
} ; Например, вот блог FrontMatter из примера сообщения в блоге ( md/blog/the-ultimate-tech-stack.md ):
---
title: Introducing Devii
subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
datePublished: 1589064522569
author: Ben Bitdiddle
tags:
- Devii
- Blogs
authorPhoto: /img/profile.jpg
bannerPhoto: /img/brook.jpg
thumbnailPhoto: /img/brook.jpg
---
View /loader.ts чтобы увидеть, как это работает.
Просто добавьте свой идентификатор Google Analytics (например, «UA-999999999-1») в globals.ts и Devii автоматически добавят соответствующий фрагмент Google Analytics на ваш сайт. Перейдите по адресу /pages/_app.ts чтобы увидеть, как это работает или настроить это поведение.
Renderer Markdown ( Markdown.tsx ) предоставляет стиль по умолчанию, вдохновленный Medium. Просто измените CSS в Markdown.tsx , чтобы настроить дизайн по своему вкусу.
Вы можете легко бросить кодовые блоки в свои сообщения в блоге, используя синтаксис с тройным боком (точно так же, как GitHub). Больше нет встраивания кода iframes!
Работает из коробки для всех языков программирования. Укажите свой язык с «языковой тегом». Итак:
`` ts
// довольно аккуратный, да?
const test = (arg: string) => {
вернуть arg.length> 5;
};
`` `превращается в
// pretty neat huh?
const test = ( arg : string ) => {
return arg . length > 5 ;
} ; View /components/Code.tsx , чтобы увидеть, как это работает или настроить это поведение.
Вам не нужно понимать все это, чтобы использовать Devii. Считайте это «расширенным руководством», которое вы можете использовать, если хотите настроить структуру сайта.
Сообщения на маркетинг загружаются на следующем этапе статической сборки. Ознакомьтесь с документацией, получая документацию, чтобы узнать больше об этом.
Вот короткая версия: если экспортировать функцию, называемую getStaticProps из одного из компонентов вашей страницы, Next.js выполнит эту функцию, возьмет результат и передаст свойство props (которое должно быть другим объектом) на вашу страницу в качестве реквизита.
Вы можете динамически загружать и разобрать файл разметки с помощью loadMarkdownFile , функции утилиты, реализованной на loader.ts . Это асинхронная функция, которая возвращает объект TypeScript PostData , содержащий все клавиши метаданных, перечисленные выше:
Для этого примера ознакомьтесь с реализацией getStaticProps с домашней страницы. Функция вызывает loadBlogPosts - функция UTILTY, которая загружает все сообщения в блоге в /md/blog/ Directory, анализирует их и возвращает PostData[] .
export const getStaticProps = async ( ) => {
const posts = await loadBlogPosts ( ) ;
return { props : { posts } } ;
} ; Есть несколько коммунальных функций в loader.ts , которые использует Devii. Все функции асинхронны ! Все функции принимают относительный путь, который, как ожидается, будет _ELELATIN к md/ DIRECTORY. Например loadPost('blog/test.md' ) загрузит /md/blog/test.md .
loadPost загружает/анализирует файл разметки и возвращает PostDataloadBlogPosts : загружает/анализирует все файлы в /md/blog/ . Возвращает PostData[] . Используется в index.tsx для загрузки/составления списка всех опубликованных сообщений в блогеloadMarkdownFile : загружает файл разметки, но не проанализирует его. Возвращает содержимое строки. Полезно, если вы хотите внедрить некоторые части страницы в Markdown и других частей в ReactloadMarkdownFiles : принимает шаблон глобуса и загружает все файлы внутри /md/ чьи имена соответствуют шаблону. Используется внутри loadBlogPosts Вы можете генерировать полностью статическую версию вашего сайта, используя yarn build && yarn export . Этот шаг полностью основан на следующем.js. Статический сайт экспортируется в каталог out .
После того, как он будет сгенерирован, используйте свою статическую службу хостинга файлов (Vercel, NetLify, Firebase Hosting, Amazon S3) для развертывания вашего сайта.
В корне проекта есть файл globals.ts , содержащий некоторые настройки/метаданные конфигурации о вашем сайте:
yourName : Ваше имя, используемое для тегов авторских прав в нижнем колонтитуле и RSS -канала, EG Alyssa P. HackersiteName : название вашего блога, EG Alyssa's Cool Blog ;siteDescription : краткое описание, используемое в теге meta Description, например, я пишу о коде «n материала»;siteCreationDate : Используется в сгенерированном RSS -канале. Используйте этот формат: «3 марта 2020 г. 04:00:00 GMT»;twitterHandle : Twitter для вас или вашего блога/компании, используемой в метатетах Twitter. Включите символ @, например, '@alyssafacker';email : ваше электронное письмо, используемое в качестве «веб -мастера» и «Управляемого режима» сгенерированного канала RSS, eg [email protected] ;url : базовый URL вашего веб -сайта, используемый для «вычисления» канонических ссылок по умолчанию по относительным путям, например, https://alyssashacker.com ';accentColor : цвет фона заголовка и нижнего колонтитула, например, #4fc2b4 ; RSS-канал автоматически генерируется из вашего блога. Этот канал генерируется с использованием модуля rss (для преобразования JSON в формат RSS) и showdown для преобразования файлов разметки в RSS-совместимый HTML.
Чтобы Generation RSS работал, все ваши посты должны содержать datePublished временной метки в их метаданных передней части. Чтобы изучить или настроить генерацию RSS, ознакомьтесь с файлом rssUtil.ts в корневом каталоге.
Каждая страница сообщения в блоге автоматически заполняется мета теги на основе метаданных Post. Это включает в себя тег title , meta , og: теги, метаданные Twitter и тег link , содержащий канонический URL.
Значение по умолчанию канонического URL -адреса вычисляется путем объединения значения вашей конфигурации url (см. Глобальные конфигурации выше) и относительный путь вашего поста. Убедитесь, что канонический URL точно эквивалентен URL в браузере при посещении вашего живого сайта, в противном случае SEO вашего сайта может пострадать.
Здесь нет ничего "под капюшоном". Вы можете просмотреть и изменить все файлы, которые предоставляют функциональность, перечисленные выше. Devii просто предоставляет каркас проекта, некоторые утилиты загрузки нагрузки Markdown.tsx в loader.ts .
Чтобы начать настройку, ознакомьтесь с исходным кодом index.tsx (домашняя страница), BlogPost.tsx (шаблон сообщения в блоге) и Markdown.tsx (рендеринг Markdown).
Отправляйтесь в репо github, чтобы начать: https://github.com/colinhacks/devii. Если вам нравится этот проект, оставьте ️star️, чтобы помочь большему количеству людей найти Devii?
yarn dev Запускает сервер разработки. Эквивалент next dev .
yarn build Создает оптимизированную сборку вашего сайта. Эквивалентно next build .
yarn export Экспортирует ваш сайт в статические файлы. Все файлы записаны /out . Используйте свою службу хостинга статического хостинга (Firebase Hosting, Amazon S3, Vercel), чтобы развернуть ваш сайт. Эквивалентно next export .
