Скачать digital garden - Скачать исходный код digital garden

Шаблон блога современного разработчика (цифровой стартер сада)

GardenPromo Больше скриншотов здесь

Шаблон блогов с открытым исходным кодом (цифровой садовод) для разработчиков с использованием маршрутизатора приложений Next.js, MDX, ContentLayer, Tailwind CSS, @Shadcn/UI, икон Lucide и многого другого.

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

Примечание: этот проект всегда развивается, и он далеко не совершенен или даже готов. Я всегда открыт для предложений и вкладов. Не стесняйтесь открывать проблему или PR, если у вас есть какие -либо идеи или предложения. Вы также можете увидеть дорожную карту для запланированных функций, если хотите внести свой вклад.

Мотивация
Начиная
- Написание контента
  - Фронтмел
- Развертывание
Настройка
- Шрифты
- Цвета
- Подпись
- Изображения
  - Домашняя страница Аватар
- Метаданные
  - Навигация
  - Социальные ссылки
- Аналитика
  - Вертел
  - Умами
  - Правдоподобно
  - Google Analytics
  - Другие аналитические поставщики
- Подписка на информационную рассылку
  - Mailerlite
  - Другие поставщики информационных бюллетеней
- Герой секция
- Другие советы и хитрости
  - Оптимизация изображения
Примеры
Особенности и дорожная карта
Внося
- Участники
- Как?
Вдохновение и упоминания
Поддерживать

Мотивация

Как разработчик, который создает контент, я хочу иметь блог и цифровой сад, где я могу поделиться своими мыслями и идеями с миром. Теперь в настоящее время нет «идеального решения» для этого. С включенной аналитикой, SEO, подпискими по электронной почте, современным инструментам, простым дизайном и т. Д. Мы должны либо создать его с нуля, использовать шаблон дизайна и кодировать функции, либо использовать инструмент CMS/NO-код.

Поэтому я решил создать решение, которое я бы использовал сам. Это результат.

Начиная

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

Используйте репо в качестве шаблона
Установить зависимости с pnpm install
Изменить utils/metadata.ts с вашей информацией и общими настройками
Редактировать utils/uses-data.ts с помощью программного обеспечения и оборудования, которое вы используете
Редактировать utils/projects-data.ts с вашими проектами
Редактировать utils/navigation-links.ts с нуженными ссылками в навигации
Редактировать content/pages/now с вашей доступностью
Редактировать content/pages/about биографии
Запустите сервер разработки с помощью pnpm dev

Откройте http: // localhost: 3000 в вашем браузере, чтобы увидеть результат.

Написание контента

Вы можете написать контент в Markdown или MDX. Контент расположен в content/ и организован в папках. Папка pages содержит страницы. Папка posts содержит блоги. Папка projects содержит проекты.

Редактирование страниц списка выполняется в папке lib .

/uses - lib/uses-data.ts
/projects - lib/projects-data.ts
/social - lib/social-data.ts

Фронтмел

Передняя мешка используется для определения метаданных для страниц и постов. Он расположен в верхней части файла и написан в YAML. Вы можете определить следующие поля:

title - заголовок страницы/post
description - Описание страницы/post
publishedDate - дата поста (не используется на страницах)
lastUpdatedDate - дата страницы/post
tags - Список тегов для сообщения. Вы можете добавить новые теги, добавив их в список tagOptions . (не используется на страницах)
series - серия поста. Серия имеет заголовок и номер заказа для поста. (не используется на страницах)
author - автор поста. У автора есть имя и изображение. (не используется на страницах)
status - опубликована ли страница/пост

Развертывание

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

Обновление package.json
Опубликуйте свое репо до github
Создайте новый проект на Vercel и импортируйте репо
Установите переменную среды NEXT_PUBLIC_BASE_URL на Vercel, чтобы указать на корневой URL вашего веб -сайта
Если вы планируете использовать поставщиков аналитики и/или информационных бюллетеней, установите соответствующие переменные среды на Vercel
Построить и развернуть?

Настройка

Шрифты

Этот проект использует Inter в качестве шрифта по умолчанию. Вы можете изменить его на app/layout.tsx используя next/fonts .

Цвета

Проект использует цветы Tailwind и @shadcn/ui config. Настройте цвета на globals.css .

Подпись

В нижнем колонтитуре есть фирменный компонент. Вы можете отредактировать подпись на components/signature.tsx . Я использовал Figma, чтобы написать подпись с шрифтом Caveat и экспортировал ее как SVG. Вы можете сделать то же самое и обновить SVG в компоненте.

Изображения

Изображения и другие медиафайлы расположены в public/ каталоге. Вы можете использовать их в своем контенте, используя путь /<filename>.<ext> .

Домашняя страница Аватар

Вот быстрое руководство о том, как сделать аналогичный аватар на фигме менее чем за 2 минуты. https://youtu.be/ny-vaeehjkm

Метаданные

Вы можете изменить детали метаданных и автора в utils/metadata.ts . Это будет использоваться вокруг сайта для названий, социальных ссылок, социальных ручек, SEO и т. Д.

Социальные ссылки

Вы можете редактировать социальные ссылки в lib/social-data.ts . Вы также можете добавить новые социальные ссылки, добавив их в файл и используя имя платформы в качестве ключа и URL в качестве значения. Компонент SocialButton автоматически добавит значок для платформы, если он поддерживается в простых иконах.

Аналитика

Вертел

Чтобы настроить, вам необходимо включить его на панели панели проекта Vercel, выбрав свой проект, а затем нажмите на вкладку «Аналитика» и нажмите «Включить» из диалога.

Умами

Umami-это простое, простое в использовании решение веб-аналитики с опцией самостоятельного управления! Вы можете прочитать больше об этом на веб -сайте Umami. (Подсказка: на железной дороге вы можете самостоятельно самостоятельно или даже бесплатно) .

Configure: установить NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID переменные среды на вашем файле .env.local и на панели панели Vercel.

Правдоподобно

Правдое-это простая, легкая альтернатива с открытым исходным кодом для Google Analytics. Вы можете прочитать больше об этом на правдоподобном веб -сайте.

Configure: SET NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL Переменные среды на вашем файле .env.local и на панели панели Vercel. Если вы обеспокоены блокировщиками рекламы, вы можете прокси -конверсию правдоподобного сценария через свой собственный домен. Вы можете прочитать больше об этом здесь.

Google Analytics

Google Analytics - это услуга веб -аналитики, предлагаемая Google, которая отслеживает и сообщает о трафике веб -сайтов, в настоящее время в качестве платформы в бренде платформы Google Marketing. Вы можете прочитать больше об этом на веб -сайте Google Analytics.

Configure: SET NEXT_PUBLIC_GOOGLE_ANALYTICS_ID переменная среды на вашем файле .env.local и на приборной панели Verce.

Другие аналитические поставщики

Поддержка других поставщиков аналитики находится в процессе. Не стесняйтесь открывать проблему, если у вас есть какие -либо предложения или PR, если вы хотите реализовать ее сами.

Подписка на информационную рассылку

Mailerlite

Mailerlite - это простой инструмент для маркетинга электронной почты для всех видов бизнеса. Вы можете прочитать больше об этом на веб -сайте Mailerlite.

Настройка: Установите переменные среды EMAIL_API_BASE , EMAIL_API_KEY и EMAIL_GROUP_ID в вашем файле .env.local и на приборной панели Vercel.

Другие поставщики информационных бюллетеней

Поддержка других поставщиков информационных бюллетеней находится в процессе. Не стесняйтесь открывать проблему, если у вас есть какие -либо предложения или PR, если вы хотите реализовать ее сами.

Герой секция

Вы можете выбрать между 3 различными вариантами героя для использования в app/(site)/page.tsx , изменив импортированный компонент Hero.

HeroSimple - простой раздел героев с изображением, названием и субтитрами.
HeroVideo - 2 Раздел героя колонки с Videoask встроен на одной стороне и заголовка и подзаголовок с другой.
HeroImage - 2 Раздел героя колонки с изображением с одной стороны и названием, а также подзаголовок с другой.
HeroMinimal - Имя секции маленького героя и название работы

Другие советы и хитрости

Оптимизация изображения

Я рекомендую быстро оптимизировать изображения бесплатно с ImageOptim. Установите на вашем Mac, затем откройте public папку в Finder. Выберите все изображения, щелкните правой кнопкой мыши и выберите «Открыть с> imageoptim». Это оптимизирует все изображения в папке.

Примечание: не переусердствуйте. Вы можете легко сделать изображения плохо выглядеть с алгоритмами сжатия Lossy.

Примеры

https://davidlevai.com/ - мой собственный цифровой сад
Драконы и коды цифровой сад - источник простых модификаций
Блог Шафи Мухре - Источник
Блог Правина Кумара - источник
Блог Стивена Селоло - источник
Блог Мартона - источник

Создайте PR и добавьте свой блог в этот список, если вы используете шаблон!

Особенности и дорожная карта

Внося

Участники

@THEDEVDAVID
@br4adam

Этот проект от разработчиков для разработчиков. Все взносы приветствуются! Пожалуйста, не стесняйтесь:

Сообщить об ошибке
Обсудите текущее состояние и идеи для улучшений
Отправить исправление
Предложить новые функции

Как?

Вилка репо и создайте свою ветвь из develop .
Добавьте свой код.
Обновите документацию.
Убедитесь, что ваши кодовые линейки и приложение создают.
Открыть запрос на вытягивание для develop филиала.

Любые взносы, которые вы вносят, будут по лицензии на программное обеспечение MIT. Короче говоря, когда вы отправляете изменения кода, ваши представления считаются под той же лицензией MIT, которая охватывает проект. Кодекс поведения можно найти здесь.