Всегда сложно поддерживать собственный веб-сайт в актуальном состоянии, когда вы заняты сотней различных проектов, над которыми работаете. Это мой способ упростить этот процесс, чтобы всегда быть в курсе последних событий в сети.

Это ни в коем случае не идеальное решение для вашего сайта или даже моего. Возможно, в следующем году он изменится и будет развиваться. Это просто для меня, чтобы выразить свои мысли и помочь вам автоматизировать ваш рабочий процесс, как я сделал со своим!

Что такое архитектура?

В качестве хостинга я выбрал Netlify. Это доступное, современное и удобное для разработчиков решение для размещения вашего веб-сайта. У них есть бесплатные и платные планы, которые вы можете использовать как для личного, так и для профессионального хостинга. Многие из их услуг на самом деле помогают мне достичь этой цели - поддерживать мой веб-сайт в актуальном состоянии без особых усилий с моей стороны (кроме, конечно, создания веб-сайта).

Что использовать для создания веб-сайта?

Я использовал генератор статических веб-сайтов, а точнее Nuxt.js. Он использует vue.js (2.0) в качестве шаблона и создает набор обслуживаемых файлов .html. Статические веб-сайты имеют особый характер, потому что они очень быстрые, поскольку большая часть контента уже создана.

Примечание. Генераторы статических веб-сайтов могут не работать для вашего варианта использования, если у вас много динамического контента, который обновляется каждые несколько минут. Единственный способ обновить статический веб-сайт - перестроить весь веб-сайт с новым содержанием.

Благодаря этому обслуживаемая веб-страница может быть легко кэширована и имеет отличное SEO для поисковых систем в Интернете. Некоторые другие популярные генераторы статических сайтов включают в себя:

  • Next.js (шаблоны React)
  • Хьюго (шаблоны Go lang)
  • Гэтсби (шаблоны React)

Можете ли вы по-прежнему иметь динамический контент?

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

Второе место, где у меня есть динамический контент, - это опубликованные СМИ, такие как эта статья. Каждый раз, когда я создаю веб-сайт, последние 9 статей или видео помещаются в виде карточек на главной странице. Это достигается путем вызова RSS-каналов YouTube и Medium перед созданием веб-сайта. Вы можете увидеть это в действии в следующей функции:

async function getMediaFeed() {
  // get RSS feeds from Medium and YouTube
  const responses = await Promise.all([
    getMediumFeed(), 
    getYoutubeFeed()
  ]);

  // combine two lists of media
  const media = [...responses[0], ...responses[1]];

  // sort list based on date
  media.sort((a, b) => b.date - a.date);
 // Write to JSON file which can be read later when building the website
  FilesWorker.WriteJSONToFile(
    "./../content/media.json",
    media.slice(0, 15),
    print.bind(this, "published media.")
  );
}

Поскольку для сборки веб-сайта уже должен быть весь необходимый контент, нам нужно собрать всю информацию с YouTube и Medium и сохранить ее в файл JSON. Когда сайт построен, он читает из того же файла JSON. Результат:

А как насчет проектов?

Иногда сложно автоматически включать проекты в код, потому что обычно они обновляются вручную. Это похоже на написание сообщения в блоге: вы не можете автоматически создать новое сообщение в блоге - вам на самом деле нужно его написать. По этой причине я решил использовать систему CMS. К счастью, Netlify также поставляется с собственной системой CMS, которую можно легко настроить для использования ваших собственных структур данных.

Вы можете добавлять свои собственные структуры, редактируя файл в корневом каталоге репозитория, static/admin/config.yml. Этот файл содержит все коллекции, которые вы хотите иметь, например, в этом случае Project имеет title и start_date, которые можно обновлять для каждого проекта в Netlify CMS.

collections:
  - name: project
    label: Project
    folder: content/projects
    create: true
    slug: "{{slug}}"
    fields:
      - label: Title
        name: title
        widget: string
      - label: Start Date
        name: start_date
        widget: date

После настройки страницы администратора вы можете выполнить обновление, используя пользовательский интерфейс ниже. Как видите, Netlify предлагает такие функции, как черновики, сохранение и публикация. Поскольку весь ваш контент статичен, они превращаются в запросы на извлечение и ветки в вашем репозитории Git, где находится весь контент.

У меня также есть поля для проектов, которые отмечены на моей домашней странице как «Рекомендуемые». Не представленные только показываются на странице «Показать больше» проектов.

Протянуть руку

Форма обращения (контакт) также является еще одним динамическим элементом моего веб-сайта, где Netlify принимает отправленные формы и помещает их в красивый список на своей приборной панели. Он также имеет встроенные спам-фильтры без капчи. Таким образом, на веб-сайте вы видите только настоящие материалы. Это работает с любым простым элементом HTML-формы или с отправкой JavaScript AJAX; так что вы также можете закодировать его в простом HTML, если хотите.

Зачем все это проходить?

Как веб-разработчик вы любите создавать веб-сайты. Но чаще всего вы заняты веб-сайтами для других людей. На самом деле, это единственная причина, по которой вы являетесь веб-разработчиком, верно? Итак, если вы можете значительно упростить процесс обновления своего веб-сайта, он всегда будет актуальным. Вы можете использовать существующие конструкторы веб-сайтов, но тогда вы не будете веб-разработчиком.

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

Исходный код

Мой веб-сайт полностью открыт, и вы можете взглянуть на него, если хотите. Если у вас есть предложения, дайте мне знать, я всегда работаю над его улучшением! Вы можете найти исходный код сайта на GitHub. (Источник https://amanbhimani.com)