Давно хотел создать свое личное резюме / сайт с резюме. К счастью, некоторое время назад я купил домен на свое имя - olegagapov.com. В этой статье я хочу поделиться своим опытом создания сайта резюме с нуля и его развертывания на страницах GitHub. Пойдем!
Инструменты
Для этого проекта я буду использовать VueJS. Можно сказать, что для простого веб-сайта портфолио / резюме это перебор, но у меня есть на то причины. Первая причина, по которой я хочу отделить данные от представления. Это позволит мне в будущем просто перенести мои данные на другую платформу / решение и даст мне свободу добавлять / удалять любую существующую информацию, не касаясь HTML. Я использую vue-cli
, чтобы быстро имитировать запуск приложения:
vue init webpack my-portfolio
Мои настройки следующие:
- vue build - я буду использовать настройку «только во время выполнения»
- vue router - мне не нужно. Вы можете добавить его, если хотите многостраничный сайт
- ESLint - да, линтинг «Стандартный»
- тесты - «нет» для обоих
- Я буду использовать
npm
менеджер пакетов
После установки все пакеты запускаем:
cd my-portfolio npm run dev
Вы должны увидеть страницу приветствия VueJS по адресу localhost:8080
.
Очень хорошо, мы готовы приступить к разработке.
Применение шаблона Bootstrap
Я не хочу пока иметь креативный и уникальный дизайн. Я хочу составить свое резюме быстро и с минимальными усилиями. На сайте startbootstrap.com я нашел очень классное резюме / шаблон резюме. Использует интерфейсную библиотеку Bootstrap 4. Давайте воспользуемся этим в нашем проекте Vue.
Если вы посмотрите исходный код шаблона, то увидите, что он состоит из index.html
страницы и нескольких статических ресурсов. Итак, наша задача - скопировать HTML в наш однофайловый компонент и связать с ним CSS и JS. Мы можем начать с HTML. Откройте src/App.vue
файл, сотрите все и поставьте следующее:
Сохраните файл и вернитесь в браузер. На пустом холсте вы должны увидеть сообщение Мое портфолио. Это эшафот для моей страницы. Мы можем начать копировать HTML. Откройте файл index.html из GitHub шаблона и скопируйте весь HTML внутри тега body (кроме тегов link
внизу). Вам нужно вставить этот код вместо тега h1
в App.vue
файл.
Теперь настала очередь добавить немного стиля. Нам нужно установить bootstrap
библиотеку и несколько дополнительных библиотек:
npm install --save bootstrap font-awesome devicons
Чтобы добавить эти CSS в наш проект, поместите в начало src/main.js
следующее:
require('bootstrap/dist/css/bootstrap.css') require('devicons/css/devicons.css') require('font-awesome/css/font-awesome.css')
Эти строки применит стиль bootstrap
к нашему проекту.
Следующий шаг - скопировать собственный CSS. Этот нестандартный код здесь. У вас есть как минимум два способа добавить этот код в наш проект. Один из способов - создать отдельный файл в папке assets
и включить его в main.js
, как мы это сделали с библиотекой bootstrap
. Кроме того, вы можете вставить этот код непосредственно в раздел <style>
компонента App.vue
. Я выберу второй вариант.
Наконец, нам нужно включить шрифты Google (поскольку в этом шаблоне используются пользовательские шрифты). Я сделаю это очень просто - я скопирую ссылки на эти шрифты в index.html
корневую папку моего проекта VueJS. Скопируйте в тег head
следующее:
Если все правильно, вы должны увидеть что-то вроде этого:
Добавьте свой аватар в папку assets
и вставьте исправленную ссылку в тег img
.
Хорошо, мы закончили с укладкой. Но нам также нужно добавить JS bootstrap
. JS Bootstrap
зависит от jQuery
, поэтому вам нужно осторожно использовать его с Vue, потому что обычно сложно подружиться с ними. Установим jQuery
и дополнительную библиотеку для анимации:
npm install --save jquery jquery.easing popper.js
Теперь нам нужно импортировать эти библиотеки в main.js
файл. Вот полный исходный код main.js
:
В строке 4 мы импортируем jQuery
, затем bootstrap
и, наконец, jQuery-easing
. Затем в строке 11 мы инициализируем глобальную переменную jquery
, чтобы мы могли использовать ее где угодно в .vue
файлах с помощью this.jquery
. Мы закончили со сторонними библиотеками. Настала очередь интегрировать собственный JS-код из шаблона. Вы можете найти это здесь". Вернитесь к App.vue
и добавьте следующий код в раздел скрипта:
Здесь я добавил свойство mounted()
. Вам нужно обернуть ваш код jQuery обратным вызовом $nextTick
, потому что код jQuery должен выполняться после того, как DOM будет готов. Теперь вы можете скопировать JS-код шаблона и вставить его в nextTick
. Должен быть небольшой рефакторинг. В первую очередь избавьтесь от замыкания и “use strict”
инструкции. В случае, если вы используете линтинг, избавьтесь от ошибки линтинга (удалите точки с запятой, замените двойные кавычки одинарными кавычками и т. Д., См. Справку в окне терминала).
На этом этапе пора использовать нашу глобальную переменную jquery
из main.js
. Добавьте следующую строку перед this.$nextTick
:
const $ = this.jquery
Это маленькая уловка. Если я создаю $
переменную, мне не нужно менять специальный код. С помощью этого обходного пути вы должны увидеть работающий шпион прокрутки и анимацию прокрутки.
Все идет нормально! Если у вас возникнут проблемы, просмотрите мой код здесь или напишите комментарий, я постараюсь разобраться с вашей проблемой.
Поместите свои данные
Теперь, когда у нас есть рабочий шаблон, мы можем начать заполнять наше резюме нашими данными. Я оставлю существующие блоки / разделы такими, какие они есть.
Общая идея следующая: вы создаете свойства данных о себе и визуализируете эти данные с помощью фигурных скобок или директивы v-html
. Используйте директиву v-for
, если вы хотите создавать повторяющиеся блоки. Например, посмотрите, что я сделал с разделом «Опыт». Я создал список объектов, где каждый объект представляет одно рабочее место. Затем я использовал v-for
для перебора массива с рабочими местами и визуализации деталей с помощью фигурных скобок.
Не сомневайтесь в изменении существующей структуры разделов. Я повторно использовал большую часть кода. Но некоторые детали мне не понравились, поэтому я заменил их под свои нужды.
Настройка prerender для Vue
Я хочу, чтобы мой сайт с портфолио / резюме был оптимизирован для SEO. Это означает, что я хочу, чтобы содержание моего сайта было четко видно сканерам поисковой системы. Это можно сделать двумя способами: рендеринг на стороне сервера (SSR) или предварительный рендеринг. В моем случае использование SSR излишне. Предварительный рендеринг будет работать хорошо.
Для проектов на основе Vue существует плагин предварительного рендеринга под названием prerender-spa-plugin. Установим:
npm install --save prerender-spa-plugin
Вы можете легко настроить его для своего проекта. В корневом каталоге найдите папку /build
, внутри этой папки находится файл webpack.prod.conf.js
. Откройте его и добавьте следующее:
Короче говоря, всякий раз, когда вы запускаете npm run build
, этот плагин будет выполнять предварительный рендеринг в максимально возможной степени на конечной HTML-странице. Вот пример:
Как вы можете видеть из этого примера, окончательный HTML-код с предварительным рендерингом содержит все необходимые данные, которые мы хотим показать сканерам, чтобы веб-сайт был оптимизирован для SEO.
Хостинг на страницах Github
Наконец, мы хотим загрузить наш сайт на GitHub. У них есть очень удобный сервис под названием GitHub Pages. Этот сервис позволяет вам создать свой собственный веб-сайт на GitHub за несколько простых шагов. Давайте сделаем их:
- Создайте репозиторий с именем «имя пользователя .github.io» (где имя пользователя - ваше имя пользователя GitHub)
- Клонировать этот репозиторий:
git clone https://github.com/username/username.github.io
3. Создайте проект VueJS (запустите его из папки проекта).
npm run build
По умолчанию эта команда создаст папку /dist
со страницей index.html
и всеми статическими ресурсами.
4. Скопируйте содержимое папки /dist
в папку с клонированным репозиторием.
5. Зафиксируйте и отправьте эти файлы на GitHub:
git add . git commit -m 'Initial commit' git push
6. Готово! Теперь просто откройте в своем браузере URL-адрес username.github.io и наслаждайтесь своим веб-сайтом в Интернете ✨
Что делать дальше
Конечно, это не полный список действий, которые вы можете выполнять с веб-сайтом с резюме / портфолио. Я собрал несколько идей, которые стоит учесть, чтобы создать потрясающий веб-сайт:
- Подключите собственный домен. Хорошие уроки бывают здесь и здесь. Также рассмотрите возможность настройки SSL для вашего персонального домена.
- Добавьте значок. Воспользовался услугой https://www.1and1.com/favicon-generator
- Сгенерируйте карту сайта и robots.txt (здесь и здесь)
- Добавьте трекер Google Analytics. Или Диспетчер тегов Google. Я только что вставил их фрагмент на
index.html
страницу - Добавьте свой веб-сайт в Google Search Console и инструменты Bing для веб-мастеров. Это поможет сканерам найти ваш сайт.
- Оптимизируйте свой сайт
- Создайте свой индивидуальный и уникальный дизайн :)
Если у вас есть что-то еще, пожалуйста, оставьте мне комментарий.
Спасибо за Ваше внимание! Увидимся в следующий раз.
Если вам понравился этот урок, вы можете пообещать мне несколько долларов на мою учетную запись PayPal!
✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .