Давно хотел создать свое личное резюме / сайт с резюме. К счастью, некоторое время назад я купил домен на свое имя - 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 за несколько простых шагов. Давайте сделаем их:

  1. Создайте репозиторий с именем «имя пользователя .github.io» (где имя пользователя - ваше имя пользователя GitHub)
  2. Клонировать этот репозиторий:
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 и наслаждайтесь своим веб-сайтом в Интернете ✨

Что делать дальше

Конечно, это не полный список действий, которые вы можете выполнять с веб-сайтом с резюме / портфолио. Я собрал несколько идей, которые стоит учесть, чтобы создать потрясающий веб-сайт:

  1. Подключите собственный домен. Хорошие уроки бывают здесь и здесь. Также рассмотрите возможность настройки SSL для вашего персонального домена.
  2. Добавьте значок. Воспользовался услугой https://www.1and1.com/favicon-generator
  3. Сгенерируйте карту сайта и robots.txt (здесь и здесь)
  4. Добавьте трекер Google Analytics. Или Диспетчер тегов Google. Я только что вставил их фрагмент на index.html страницу
  5. Добавьте свой веб-сайт в Google Search Console и инструменты Bing для веб-мастеров. Это поможет сканерам найти ваш сайт.
  6. Оптимизируйте свой сайт
  7. Создайте свой индивидуальный и уникальный дизайн :)

Если у вас есть что-то еще, пожалуйста, оставьте мне комментарий.

Спасибо за Ваше внимание! Увидимся в следующий раз.

Если вам понравился этот урок, вы можете пообещать мне несколько долларов на мою учетную запись PayPal!

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ План развития веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .