🚀 Как создавался блог

Спойлер

Стандартный шаблон VitePress

👋 Aloe! Давно было желание вести блог , но мотивация пришла только не давно.

Осторожно Нытик

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

Большую часть благополучно начинаю забывать, поскольку всё это не встречается на практике. Затем я пришел к выводу что изучать всё подряд не имеет смысла если это не использовать

Появилось ощущение что я не развиваюсь, начал пропадать интерес программировать

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

1️⃣ Фреймворки

Я очень датошен в оптимизации читаемости компактности в плане кода и разработки: много времени могу потратить на разбор различных реализаций.

Я пробовал Gatsby NuxtContent Hugo но в каждом есть недостатки из коробки

Gatsby

• Надо скачивать плагины
• Очень большая конфигурация

NuxtContent

• Жирный билд
• Слишком большой и сложный для блога

Hugo

• Стандартные темы не оч

VitePress

• Мультиязычность
• Оптимизированная сборка
• Полный набор необходимых компонентов
• Полная документация -> Легко читать и начать
• Индексация локальных файлов -> Вывод списка статей, поиск
• Простая и компактная костомизация -> Удобно делать каждую статью уникальной

2️⃣ Создание блога

Установка VitePress

# Для нового проекта
$ npx vitepress init

# Добавить в существующий
$ npm add -D vitepress

Конфигурации

Единственный минус

Надо самому генерировать sidebar

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import getBlogSidebarItems from './blog-sidebar-items'

export default defineConfig({
  base: '/site/',
  title: "Goosveridze",
  description: "A Vadimkkka site",
  srcDir: "src",
  lastUpdated: true,
  cleanUrls: true,
  themeConfig: {
    logo: 'oni.png',
    search: { provider: 'local' },
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Blog', link: '/blog/' },
    ],
    sidebar: {
      '/blog/': [
        {
          text: 'Articles',
          link:  '/blog/',
          items: getBlogSidebarItems('src', '/blog/'), 
        }
      ],
    },
    socialLinks: [
      { icon: 'github', link: 'https://github.com/Vadimkkka' }
    ],
  }
})

.vitepress/blog-sidebar-items.ts

import fs from 'node:fs'
import path from 'node:path'

const titleRe = new RegExp("title: (.*)");

function getBlogSidebarItems(srcDir: string, linkDir: string) {
  const dir = `${srcDir}${linkDir}`
  return fs.readdirSync(dir)
    .reduce((acc, name) => {
      if (name.endsWith('.md') && name !== 'index.md') {
        const file = fs.readFileSync(path.resolve(dir, name))
        const title = titleRe.exec(file)
        if (title) {
          acc.push({ text: title[1], link: `${linkDir}${name}` })
        }
      }
      return acc
    }, [])
}

export default getBlogSidebarItems

Структура проекта

Это показатель того как все компактно и просто.

Blog
├── .vitepress
│   ├── theme
│   │   ├── index.ts
│   │   └── style.css
│   ├── blog-sidebar-items.ts
│   ├── config.ts
│   └── posts.data.ts
├── src
│   ├── blog
│   │   ├── index.md
│   │   └── hello-world.md
│   ├── public
│   │   └── favicon.ico
│   └── index.md
└── package.json

3️⃣ Деплой

Просто возьмите пример из документации

4️⃣ Обновления

Для GitHub Pages достаточно отправить коммит и вуаля наш сайт обновлен.