Привет, интернет,
В этом блоге мы собираемся создать портфолио разработчика/дизайнера с помощью 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