Блог с gridsome за 20 минут

Сделать этот блог на gridsome оказалось проще, чем написать первый пост :)

Gridsome — генератор статичных сайтов. Я выбрал его по нескольким причинам:

• Хочу простой блог без CMS
• Хочу писать статьи в Markdown
• Люблю Vue

Генератор предлагает несколько kickstart-решений для разных источников данных. Я выбрал на мой взгляд самый симпатичный блог из раздела Markdown. Делать свой дизайн я пока не планирую, хочу только писать.

Установка

Устанавливаем по инструкции

1. npm install --global @gridsome/cli
2. gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git - это для моего решения
3. cd my-gridsome-site && npm run develop и наш блог доступен по адресу localhost:8080

Написание статей

Статьи складываются в content/posts в виде отдельных файлов с расширением .md, а картинки для постов в content/posts/images.

В папке с постами есть несколько примеров, которые помогут разобраться с синтаксисом.

Деплой

Когда статья написана, блог надо собрать командой npm run build, а затем загрузить содержимое папки dist на сервер.

Так как я планирую писать посты прямо в gitlab, то сделаю автодеплой на свой сервер через Gitlab CI.

Настройка сервера

Подключаемся к серверу или хостингу по ssh и поехали:

1. Командой ssh-keygen создайте ключи. На вопрос, где сохранять ключ, пишем gl как показано ниже:

$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/home/madex/.ssh/id_rsa): gl

После этого у нас появятся файлы gl и gl.pub.

2. Содержимое gl.pub скопируйте к авторизованным ключам, а содержимое gl в буфер обмена

$ cat gl.pub >> ~/.ssh/authorized_keys

3. Зайдите в гитлабе в settings → CI/CD → Variables и создайте переменные

• PROD_KEY с содержимым файла gl
• USER с именем пользователя, который подключается к ssh
• IP с адресом сервера
• PATH с путём к папке с сайтом от корня

4. Создайте в папке с проектом файл .gitlab-ci.yml следующего содержания:

build:
  only:
    refs:
      - master
  image: node:14
  stage: build
  script:
    - npm install --progress=false
    - npm run build
  artifacts:
    paths:
      - dist

deploy:
  only:
    refs:
      - master
  image: alpine
  stage: deploy
  script:
    - apk add --no-cache rsync openssh
    - mkdir -p ~/.ssh
    - echo "$PROD_KEY" >> ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -zr --perms --chmod=u=xrw,go=xr ./dist/* $USER@$IP:$PATH

При каждом пуше в ветку master Gitlab CI будет собирать ваш блог и синхронизировать полученную папку dist с папкой сайта на сервере.

5. Протолкните ваш блог в репозиторий!