React

После года работы front-end разработчиком, я решила создать свой собственный сайт. Это должна была быть платформа, где я могла показать свою работу, чем-то поделиться. Сайт должен был помочь мне создавать что-то вне работы. Сейчас я расскажу вам, как я запустила сайт с нуля.

Покупка домена: Google Domains

Моим первым шагом стала покупка домена. Тут есть много вариантов. Я выбрала Google Domains, потому что у меня уже был там аккаунт, и мне не нужно было создавать новый. Домен обошелся в 12 долларов в год (стандартная цена) и был очень быстро настроен. (Стоит сказать, что вы также можете купить домен на Netlify).

Skillbox

3 месяца мой домен пустовал. Я слишком много внимания уделяла мелочам при запуске сайта. Оглядываясь назад, я понимаю, что никто бы даже и не зашел на мой сайт, пока я не начала его продвигать. Когда я смогла избавиться от напряжения, то заставила себя разместить на сайте хоть что-то, чтобы заполнить пустоту. Когда с моих плеч упал этот тяжкий груз, я решила получать от этой работы удовольствие, создав что-то простое и интересное.

Начало работы

При создании сайта нужно подумать о многих вещах: дизайне, пользовательском интерфейсе, доступности, SEO, аналитике и многом другом. Очень сложно продумать всё сразу.

Чтобы всё не выглядело так страшно, я разбила работу на этапы. На первом этапе я создала и запустила простую страничку “coming soon”. После этого, когда она была запущена, я уже могла сесть за разработку, развитие и улучшение сайта.

“Готовое лучше идеального”. — Шерил Сэндберг

Создание front-end: Gatsby.js

Впервые о Gatsby я узнала на конференции ReactNext, и с тех пор я старалась узнать о нем побольше. Альтернативой Gatsby я считаю Hugo — ещё один генератор статических сайтов, написанный на Go.

Gatsby.js был предпочтительнее для меня, так как он основан на React.js, которую использует наша команда в Lemonade. Также он включает в себя GraphQL, с которым я хотела попробовать поработать. Я люблю работать эффективно, поэтому мне было любопытно, как GraphQL помогает эффективнее собирать данные и позволяет front-end меньше зависеть от логики сервера.

При выборе шаблона, или, как они называются в Gatsby, “стартера”, я понимала, что мне нужно что-то простое. Просмотрев популярные стартеры, я отдала предпочтение gatsby-starter-default, а не gatsby-starter-netlify-cms.

Почему? Я не хотела превращать свой сайт в блог. В стартере Netlify было много дополнительных зависимостей, которые мне были не нужны.

Первой версией сайта стала простая временная страница “coming soon”, которая выглядела так:

Animated GIF - Find & Share on GIPHY

Временная страница “coming soon”

Я делала упор на простоту. Я взяла некоторые идеи с CodePen, создала свой собственный компонент React и добавила немного пользовательских шрифтов и иконок. Вот и всё. Так выглядит основной компонент:

import React, { Component } from 'react'
import Layout from '../components/layout'

export default class ComingSoon extends Component {
constructor(props) {
super(props)

this.state = {
action: '',
timeoutId: false
}
}

componentDidMount() {
this.actionTicker()
}

componentWillUnmount() {
clearTimeout(this.state.timeoutId)
}

randomInt(min, max) {
return Math.round(min + (Math.random() * (max-min)));
}

actionTicker = () => {
const action = this.getAction();
const timeoutId = setTimeout(this.actionTicker, this.randomInt(16, 400));

this.setState({ action, timeoutId });
}

getAction() {
const junk = ['#','@','%','*','&','<','>','_','=','+','[',']','|','-','!','?'];
const actions = ['coding','designing','planning','writing','programming', 'thinking','optimizing', 'refactoring',
'simplifying','decoupling','debugging', 'configuring','streamlining','searching','tweaking','editing'];

let text = actions[this.randomInt(0, actions.length-1)];
let chars = text.split('');
const glitch = this.randomInt(0, 3);

for (let i = 0; i < glitch; i++) {
chars[this.randomInt(0, chars.length-1)] = junk[this.randomInt(0, junk.length-1)];
}

return chars.join('');
}

render() {
return (
<Layout>
<p className="action-animation">{this.state.action}</p>
<div className="follow">
<a target="_blank" rel="noopener noreferrer" className="linkedin" href="https://www.linkedin.com/in/edenadler/">
<i className="fab fa-linkedin-in"></i>
</a>
<a target="_blank" rel="noopener noreferrer" className="facebook" href="https://github.com/edenadler">
<i className="fab fa-github"></i>
</a>
<a target="_blank" rel="noopener noreferrer" className="instagram" href="https://www.instagram.com/edenadler/">
<i className="fab fa-instagram"></i>
</a>
</div>
</Layout>
)
}
}

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

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default () => (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<header>
<h1>{data.site.siteMetadata.title}</h1>
</header>
)}
/>
)

Основные моменты, касающиеся кода:

  • В StaticQuery есть два основных метода: query и render
  • SiteTitleQuery — это название метода. Считайте его названием функции. Она полезна для отладки и ведения протокола, так как позволяет легко найти конкретный запрос в кодовой базе.
  • Большим преимуществом StaticQuery над page query является то, что в нем можно настроить запрос GraphQL внутри того же самого компонента.
  • Я редактировала свой заголовок в файлеgatsby-config.js, где хранятся настройки конфигурации сайта. Это объясняет, откуда беретсяsite в data.site.siteMetadata.title.

Хостинг: Netlify

Имея такой большой выбор инструментов, трудно найти наиболее подходящий для целей и задач проекта. Для меня важными критериями были:

  • Бесплатный хостинг для пользовательских доменов
  • Легкость в использовании
  • Возможность поддержки динамического (а не только статического) контента
  • Встроенная HTTPS защита

Netlify — это сервис, предоставляющий хостинг и бессерверный back-end для статических сайтов. Он предоставил мне все необходимые функции, а также некоторые дополнительные, о которых я даже не думала, например:

  • Возможность предпросмотра сайта перед запуском
  • Готовый функционал для A/B тестирования

Так они, в некотором смысле, балуют вас. Я была поражена. 

Создав то, что вы видели выше, я решила, что можно уже это запускать. Так как я не пользуюсь Netlify в качестве DNS провайдера, мне пришлось настроить “пользовательский домен”. Я следовала их инструкции и настроила всё за несколько минут.

Мне оставалось только запустить. У меня было несколько вариантов для этого:

  • Непрерывное развертывание 

Привяжите ваш аккаунт Github (или какой-то другой), и Netlify будет автоматически создавать и запускать новую версию, как только вы разместите её. Вы также можете ограничить доступ к Github, позволив видеть только открытые репозитории.

Запуск через “Непрерывное развертывание”
  • Вручную

Если вы решили не привязывать аккаунт, или, как я, просто хотите попробовать, вы можете просто перетащить ваш проект, чтобы начался запуск.

Запуск вручную , перетаскивая файлы

При первом запуске я попробовала использовать метод вручную. Уже через 2 минуты мой сайт был запущен.

Четкие и ясные логи запуска

Мой сайт→ edenadler.com

Итог

Я рада, что не стала в этот раз использовать крутые фишки GraphQL и слишком усложнять дизайн и работу сайта. Вы могли заметить, что некоторые вещи, например, фавикон, так и остались из шаблона Gatsby. Я действительно хотела сделать лишь необходимый минимум. Готовое лучше идеального. 

Создаёте ли вы свой личный сайт, работаете ли на стороннем проекте или пишите статью в блог, — никогда не стремитесь к совершенству. Выбирайте реальные, достижимые цели и приступайте к работе. Если в вашем проекте вам нужно использовать новые технологии, не применяйте их все разом. Разбейте проект на более мелкие задачи, которые вы можете выполнить за день. И самое важное, получайте от работы удовольствие.

Мои дальнейшие шаги

  • Нанять дизайнера и поработать над дизайном
  • Спланировать и добавить контент на сайт
  • Поиграться с GraphQL
  • … и ещё множество идей💡

Перевод статьи Eden Adler: From Zero to Deploy: how I created a static website from scratch using Netlify + Gatsby