Введение

Я долго вынашивал эту идею и вот решился создать свой собственный блог.

В нем я хочу писать интересные статьи на IT-темы. Да, я знаю, что я далеко не первый. Но я не отчаялся — вдруг людям понравится мой слог. Проверить это можно лишь одним способом — попробовать. Как гласит слоган Nike: «Just do it!»

Кстати, блог может показать вашему будущему руководству вашу тягу к знаниям и рвение помочь другим людям!

Стек технологий

Изначально я искал способ создать свой блог с помощью CMS, чтобы быстро постить новые статьи. Для этого я решил использовать стек JAM. JAM — JavaScript, API и Markup (разметка). HTML-страницы генерируются заранее и размещаются на сервере. Использовать для разметки я хотел Markdown. Этот код, как и любой другой, я бы хранил в своем репозитории. То есть, я хотел пропустить букву A в JAM — и использовать стек JM. Или это бы уже был JMM из-за Markdown? Кто знает…

Пара причин, почему я выбрал JAM:

  • С его помощью можно легко и быстро создать свой сайт.
  • JAM — новая для меня концепция. Значит, я смогу получить новый опыт.
  • Хостить его можно без сервера, что упрощает создание и обслуживание. Да и денег потребуется меньше.

План и список задач

Что для меня было важно, когда я создавал свой сайт:

  • Быстрая отрисовка.
  • Оптимизированный SEO.
  • Сборка на NuxtJS.
  • Для разметки нужен Markdown.
  • Бессерверный хостинг на хостинге на Netlify.
  • Сервис Disqus для комментариев.

Проще говоря, создавать блог я планирую с помощью NuxtJS. Размещать я его буду на Netlify. Самое важное — заставить динамические элементы плавно работать даже в фоновом режиме. Под динамическими элементами я имею в виду теги, категории и некоторые специфичные SEO-термины вроде карты сайта.

Почему NuxtJS?

Я уже использовал VueJS в нескольких проектах, и он отлично себя показал! При создании нового сайта я также хотел использовать VueJS. Но вот использовать при создании статического сайта логичнее именно NuxtJS: в связке с VueJS это лучший выбор. После дальнейшего изучения NuxtJS я выяснил, что в создании блога может помочь nuxt/content Markdown. Он-то и выполнил сразу несколько этапов моего плана.

Установка NuxtJS

Перед созданием NuxtJS-проекта необходимо установить npx. Npx стандартно устанавливается вместе с NPM с версии >5.2.0. Теперь мы можем создать NuxtJS-проект с помощью интерфейса командной строки. Запустите эту команду в нужной директории npx create-nuxt-app <project-naam>. Во время этого процесса вы выберете систему управления пакетами, линтер, CSS-фреймворк и настройки тестового фреймворка. После этого выберите nuxt/content, чтобы создать новый файл с разметкой. После этого выберите static в типе отрисовки. Вот и все, вы создали сайт на NuxtJS!

Посмотреть на него вы можете с помощью этих команд:

$ cd <project-name>  
$ npm run dev

Создание первого поста

Внутри папки с вашими блогами создайте еще одну папку. Свою папку я назвал так — /content/articles/. Пример ниже показывает, как может выглядеть ваш первый блог — my-first-blog.md.

---
title: Как создать блог с помощью Vue и Nuxt
short: Как создать SEO-оптимизированный сайт с помощью NuxtJS, Markdown, sitemap.xml и раздела с тегами.
image: /images/my-header-image.jpg (путь к изображению в шапке)
tags:
- Программирование
- nuxt
- markdown
---
## Название блога
Ваш привычный **markdown** контент.

В примере видно, что в заголовке используется YAML. В этом заголовке содержится информация, которая может быть повторно использована в других постах. Это полезно — вы можете показать краткое описание вашего блога на обзорной странице. Для раздела тегов я создаю динамические страницы для отображения всех блогов с одной и той же темой/тегами. Благодаря этому пользователи с легкостью могут найти нужную статью.

Структура URL

Внутри NuxtJS проекта URL генерируется автоматически — на основе папки и структуре файлов внутри папки /pages. Я предпочитаю хранить свои блоги в отдельной папке — это на случай, если я захочу запостить мои проекты на сайте. Именно почему я выбрал такую структуру:

koenvanzeijl.nl                     /// Домашняя страница

koenvanzeijl.nl/blog                /// Все посты

koenvanzeijl.nl/blog/my-first-blog  /// Ссылка на блог

koenvanzeijl.nl/tag/vue             /// Посты с одним тегом

Чтобы получить такую структуру URL, необходимо настроить проект так:

pages/index.vue                    /// Домашняя страница

pages/blog/index.vue               /// Все посты

pages/blog/_slug.vue               /// Ссылка на блог

pages/tag/_slug.vue                /// Посты с одним тегом

Файлы с именем _slug.vue будет принимать все реквесты в папке в качестве параметров, хранящихся внутри params.slug.

Файл блога

Ниже представлен пример страницы блога, который будет храниться в pages/_slug.vue. Он извлекает картинки, теги и заголовки из метаданных разметки.

<template>
  <div>
    <div class="post-head">
      <h1>{{article.title}}</h1>
      <img :src="article.image" v-if="article.image">
      <div>
        <div class="date">{{article.createdAt}}</div>
        <div class="tags">
          <span v-for="tag in article.tags" :key="tag">
            <nuxt-link :to="'/tag/'+tag">\#{{tag}}</nuxt-link>
          </span>
        </div>
      </div>
    </div>
    <nuxt-content :document="article" />
  </div>
</template>
<script>
  export default {
    async asyncData ({ $content, params }) {
      const article = await $content('articles', params.slug).fetch()
      return article
    }
  }
</script>

Итак, теперь перейдите по ссылке http://localhost:3000/blog/my-first-blog. Поздравляю! Вы создали свой первый блог. Теперь нам нужно подробно разобрать этот код, чтобы понять, что за что отвечает. В файле _slug.vue блог извлекается функцией asyncData(). Этот метод определяет, какой блог нужно получить. Происходит это благодаря переданному через params.slug параметр. После извлечения блога, статья может быть отображена, а данные заголовка могут быть легко извлечены.

Вас может удивить, что я использую article.createdAt до его помещения в заголовок YAML. Ответ прост — nuxt/content автоматически передает это свойство.

Вот свойства, которые по умолчанию можно получить с помощью nuxt/content:

  • body: Текст блога.
  • dir: Папка, в котором хранится блог.
  • extension: Расширение блога.
  • path: Путь к блогу.
  • slug: Slug-файл блога.
  • toc: Строки с оглавлением.
  • createdAt: Дата создания.
  • updatedAt: Дата последнего редактирования.

Получить данные, чтобы посмотреть все блоги (/pages/blog/index.vue), можно с помощью API nuxt/content. Ниже приведен другой пример:

<template>
  <div>
     <h1>My blog posts:</h1>
     <ul>
        <li v-for="article in articles" :key="article.title">
           <nuxt-link to="#">{{article.title}}</nuxt-link>
        </li>
     </ul>
  </div>
</template>
<script>
  export default {
    async asyncData ({ $content, params }) {
      const articles = await $content('articles', params.slug)
        .only(['title', 'description', 'image', 'slug'])
        .sortBy('createdAt', 'asc')
        .fetch()
      return articles
    }
  }
</script>

Все эти посты могут быть с легкостью отсортированы с помощью sortBy(). Поможет нам модуль nuxt/content. Подробности можно узнать с помощью помещения описания в цикл v-for.

Теги

Шаблон страницы с тегами. Он практически идентичен странице, о которой мы говорили выше. Единственное отличие — теги фильтруются с помощью метода asyncData().

<script>
export default {
  async asyncData ({ $content, params }) {
    const articles = await $content('articles')
      .where({
        tags: { $contains: params.slug }
      })
      .fetch()
    return {
      articles
    }
  }
}
</script>

Карта сайта

Наконец, мы можем приступить к карте сайта. Это упростит индексацию. Однако, динамические страницы блога реализовать чуточку сложнее. Для этого нам нужно установить еще один модуль NuxtJS — nuxt/sitemap. Для установки nuxt/sitemap запустите команду npm install @ nuxtjs/sitemap.

После установки модуля sitemap необходимо отредактировать файл конфигурации nuxt. Все готово!

 {
  ...
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap' <-- Здесь вы можете добавить свои модули
  ],
  ...
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://www.koenvanzeijl.nl',
    async routes () {
      const { $content } = require('@nuxt/content')
      const files = await $content({ deep: true }).only(['path']).fetch()

      return files.map(file => file.path === '/index' ? '/' : file.path)
    }
  },
}

Вот и все! Мы только что создали блог со страницей для каждой статьи. Не забыли и о странице с описанием. Записи мы генерируем в sitemap.xml. Теперь нам нужно запустить команду npm run create, которая создаст папку dist и разместит там ваш сайт.  Теперь вы можете размещать свой блог где угодно! В следующей статье я расскажу, как я хостил свой сайт на Netlify.

Перевод статьи: How to Create a Blog with Vue and Nuxt content