Создание личного сайта было для меня давней целью. Наконец, я создал свой личный сайт с техническим блогом, который вы можете посетить здесь.
Сегодня я выложил в открытый доступ часть блога моего личного сайта. Я покажу вам, как его можно использовать, и обсужу некоторые технические детали.
Что вы получите?
Вот пример домашней страницы блога. Скриншот взят с моего личного сайта.
Живая демонстрация
Или вы можете посетить его самостоятельно здесь
Особенности
Блог имеет множество технических аспектов. Но наиболее важными являются следующие функции.
- Поддержка Markdown для блогов
- Подсветка синтаксиса с помощью Prism.js
- Поддержка автоматического развертывания страниц на Github
- Интеграция Google Analytics
- Настройка SEO
- Интеграция Tailwind CSS+Typography
- Поддержка темного режима с next-themes
Давайте сделаем его вашим собственным
Давайте посмотрим, как вы можете его использовать. Ниже приведен репозиторий, который вам понадобится.
https://github.com/Mohammad-Faisal/nextjs-tailwindcss-beautiful-blog-template
Если вы предпочитаете видео версию, я также сделал видео на youtube для этого.
Или же вы можете следовать инструкциям ниже.
Вы перейдете туда и нажмете кнопку Использовать этот шаблон, чтобы сделать его по-своему.
Это автоматически запустит Action, который создаст сайт и добавит его в новую ветку под названием gh-pages .
В панели настроек вашего репозитория вы перейдете в раздел pages и выберете источник gh-pages .
Там вы увидите живой URL.
Настройте содержимое
Если вы хотите настроить его, вы можете следовать файлу Readme на репозитории. В основном, идея заключается в том, чтобы отредактировать файл .env.local, чтобы обновить информацию с помощью вашей собственной информации.
Настройка логотипа
Также в папке /public есть изображения, которые вы можете настроить, чтобы добавить свой собственный вкус.
Обсуждение технических вопросов
Теперь давайте поговорим о различных технических аспектах блога. Если вы предпочитаете видео-версию, вы можете посмотреть следующее видео, которое я снял.
Или давайте немного поговорим о них здесь.
Поддержка Markdown
Я использовал библиотеку gray-matter для загрузки метаданных из файлов уценки.
Вы можете добавить метаданные в файл уценки следующим образом
---
title: "Add Custom Fonts with NextJS"
description: "Create beautiful looking websites in minutes"
banner: "/images/posts/add-custom-fonts-to-nextjs/banner.jpeg"
tags: ["NextJS"]
date: 1 January 2022
published: true
---
И этот пакет автоматически прочитает данные и вернет вам объект. Вот как я его использовал
Выделение кода
Для подсветки кода я использую Prism.js. Сначала я загружаю файл стилей в файл _app.tsx и в компонент CodeBlock я загружаю стили, которые дают нам красивую подсветку синтаксиса.
Темный режим
Для темного режима я использую next-themes Он экспортирует функцию setTheme, которую я использую внутри компонента Header для переключения темы.
Google Analytics
Google Analytics очень полезен для любого производственного приложения. Вы можете просто добавить свой собственный ключ google analytics в файл .env.local, и все будет работать для вас. Для получения подробной информации вы можете ознакомиться с приведенной ниже статьей
https://www.mohammadfaisal.dev/blog/add-google-analytics-to-nextjs
Настройка SEO
Мы используем пакет next-seo для добавления всех необходимых тегов для сайта. Вот подробности
https://www.mohammadfaisal.dev/blog/improve-seo-in-nextjs
Также мы генерируем файл sitemap.xml для наших блогов. Об этом вы можете прочитать в следующей статье.
https://www.mohammadfaisal.dev/blog/create-sitemap-in-nextjs
Типографика хвостового ветра
Мне очень понравилась типография tailwind. Она значительно облегчила мне жизнь, так как я не настолько искусен в дизайне пользовательского интерфейса. Она работает как волшебство и делает все очень красивым. Вот видео, где я описываю, как я его использовал.
Заключение
Вот и все. Пожалуйста, оцените проект, если он вам понравился. Также, не стесняйтесь связаться со мной на моем LinkedIn или на моем личном сайте, если у вас есть какие-либо вопросы или непонимание.
Хорошего дня! 😀