Блог с gridsome за 20 минут
Сделать этот блог на gridsome оказалось проще, чем написать первый пост :)
Gridsome — генератор статичных сайтов. Я выбрал его по нескольким причинам:
- Хочу простой блог без CMS
- Хочу писать статьи в Markdown
- Люблю Vue
Генератор предлагает несколько kickstart-решений для разных источников данных. Я выбрал на мой взгляд самый симпатичный блог из раздела Markdown. Делать свой дизайн я пока не планирую, хочу только писать.
Установка
Устанавливаем по инструкции
npm install --global @gridsome/cli
gridsome create my-gridsome-site https://github.com/gridsome/gridsome-starter-blog.git
- это для моего решенияcd my-gridsome-site && npm run develop
и наш блог доступен по адресуlocalhost:8080
Написание статей
Статьи складываются в content/posts
в виде отдельных файлов с расширением .md
, а картинки для постов в content/posts/images
.
В папке с постами есть несколько примеров, которые помогут разобраться с синтаксисом.
Деплой
Когда статья написана, блог надо собрать командой npm run build
, а затем загрузить содержимое папки dist
на сервер.
Так как я планирую писать посты прямо в gitlab, то сделаю автодеплой на свой сервер через Gitlab CI.
Настройка сервера
Подключаемся к серверу или хостингу по ssh и поехали:
- Командой
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
.
- Содержимое
gl.pub
скопируйте к авторизованным ключам, а содержимоеgl
в буфер обмена
$ cat gl.pub >> ~/.ssh/authorized_keys
- Зайдите в гитлабе в settings → CI/CD → Variables и создайте переменные
PROD_KEY
с содержимым файлаgl
USER
с именем пользователя, который подключается к sshIP
с адресом сервераPATH
с путём к папке с сайтом от корня
- Создайте в папке с проектом файл
.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 с папкой сайта на сервере.
- Протолкните ваш блог в репозиторий!