Как создать сайт портфолио с помощью Next.js и TailwindCSS

Привет, интернет,
В этом блоге мы собираемся создать портфолио разработчика/дизайнера с помощью react-portfolio-template, который является шаблоном портфолио на основе Next.js & TailwindCSS.

Если вы не хотите читать эту статью, вы можете посмотреть видео на youtube об этом

Итак, давайте приступим

Настройка локально

  • Чтобы начать работу с шаблоном, сначала нам нужно установить и запустить его локально на нашей машине, для этого вы можете клонировать это репо.

git clone https://github.com/chetanverma16/react-portfolio-template

  • После клонирования этого репозитория нам нужно установить некоторые зависимости.

npm install

  • После установки зависимостей мы можем запустить сервер next.js.

npm run dev

После выполнения этих шагов у нас будет что-то вроде этого, запущенного на localhost:3000.

Теперь мы можем приступать к следующим шагам.

Редактирование некоторых данных

Итак, теперь у нас есть что-то работающее на экране, давайте отредактируем данные и сделаем это портфолио в соответствии с нашими потребностями.

Теперь нам просто нужно нажать на кнопку Edit Data, которую вы можете увидеть в правом нижнем углу главной страницы или перейти по адресу localhost:3000/edit.

вы увидите графический интерфейс примерно такой —

Где вы увидите кучу полей, которые мы можем редактировать, и есть несколько вкладок для различных разделов, таких как —

  • Заголовок — эта вкладка предназначена для редактирования заголовка сайта
  • Проект — редактирование раздела проекта.
  • Услуги — редактирование раздела услуг.
  • About — редактирование раздела about.
  • Социальные — редактирование социальных или личных ссылок.

Итак, после того, как вы отредактировали портфолио в соответствии с вашими потребностями, вы можете нажать на кнопку save.

После сохранения вы можете вернуться на главную страницу (localhost:3000) и увидеть все изменения, которые вы сделали. Теперь у нас есть пользовательское портфолио, сделанное всего за 5 минут.

Редактирование данных блога

Вы могли заметить, что в нашем портфолио есть страница блога, которую можно скрыть через страницу localhost:3000/edit, если вы не хотите иметь блог в своем портфолио.

Но если вы хотите, вы, возможно, захотите узнать, как редактировать блоги.
Итак, давайте сделаем это. Вы можете увидеть три демонстрационных блога в портфолио.
Чтобы отредактировать эти блоги, нам нужно перейти в наш код и зайти в папку _posts.
Вы найдете демо-блоги, написанные в markdown Вы можете зайти в любой из этих блогов и начать их редактировать.

Чтобы создать новый блог, нам просто нужно создать новый блог markdown и добавить некоторые переменные markdown для добавления структуры в блог.

Вот переменные, которые нам нужно добавить.

---
date: '2022-06-10T18:30:00.000Z'
title: "Ok Let's See How this blog will turn out"
tagline: This is a Tagline If you want to add.
preview: >-
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
image: >-
  https://images.unsplash.com/photo-1656188505561-19f1a1b6cda8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80
keywords: "Keyword One, Keyword Two"
author:
  authorname: Author One
  authorimage: >-
    https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
readingtime: 3
---
// Content Goes Here
Войти в полноэкранный режим Выход из полноэкранного режима

После добавления переменных и добавления контента для вашего блога вы можете сохранить файл и попробовать перезагрузить localhost:3000 вы сможете увидеть ваш новый блог под localhost:3000/blog.

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

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

В этом блоге мы будем делать это через Netlify.

  • первое, что вам нужно сделать, это перейти на сайт netlify.com и войти в систему или создать учетную запись.
  • После входа вы можете создать новый сайт, нажав на add new site, а затем импортировать существующий проект.
  • После этого нажмите на git-провайдер, который вы используете для импорта шаблона портфолио.
  • Теперь выберите репозиторий, который вы хотите развернуть
  • и нажмите на кнопку развернуть сайт.

Netlify сделает свое волшебство и развернет ваш сайт 🚀.

Теперь у нас есть портфолио, и оно работает.


Шаблон портфолио — https://github.com/chetanverma16/react-portfolio-template

Спасибо, что дочитали до конца.

Если вам понравилась эта статья, оставьте ❤️, чтобы другие тоже смогли ее найти.

Для более частых советов, оставайтесь на связи в Twitter

Свяжитесь со мной:

Портфолио | Github | LinkedIn | Twitter

Оцените статью
devanswers.ru
Добавить комментарий