Ниже приведена пошаговая инструкция по созданию сайта с помощью генератора статических сайтов Quartz, применением платформы для хранения Git-репозиториев GitFlic и редактора/приложения для ведения базы знаний Obsidian.

В инструкции рассмотрен пример запуска сайта по адресу https://k0mar0v.ru с использованием закрытого (приватного репозитория)на GitHub: https://github.com/zlonov/k0mar0v.ru.

Используемые названия

В примерах ниже используются следующие названия папок, хранилищ и репозиториев. Их нужно поменять на ваши собственные:

В качественной операционной системы используется macOS Ventura, в других системах пути и команды могут отличаться.

Инициализация Quartz

Будем создавать сайт, сохраняя сохраняя локальную копию репозитория Quartz в пользовательской папке ~/Git/k0mar0v.ru. Предполагается, что папка Git уже создана ранее. Второй параметр (k0mar0v.ru) команды git clone устанавливает папку, в которую будет клонирован репозиторий. По умолчанию, если не указать второй параметр, в качестве названия папки для клонирования будет использовано имя самого репозитория (quartz).

cd ~/Git  
git clone https://github.com/jackyzha0/quartz.git k0mar0v.ru
cd k0mar0v.ru
npm i
npx quartz create

Опции, предлагаемые после запуска последней команды, можно выбрать дефолтные:

  • ● Empty Quartz
  • ● Treat links as shortest path ((default))

Посмотреть на получившийся результат можно сразу, запустив локальную версию сайта:

npx quartz build --serve

Сайт будет доступен по ссылке: http://localhost:8080/. Прервать работу локальной версии сайта можно в любой момент сочетанием клавиш ctrl+c в терминале.

Создание удалённого репозитория на GitHub

Теперь нам нужен удалённый репозиторий для кода самого Quartz и контента.

В принципе, можно оставить файлы Quartz (и контент) только локально. Публиковать (на хостинге) можно только сам сгенерированный статичный сайт. Удобство удалённых репозиториев в полной мере раскрывается, когда:

  • есть потребность работы одновременно с разных рабочих мест и не хочется каждый раз думать о проблемах с синхронизацией;
  • есть необходимость ведения работы в команде;
  • присутствует желание сделать свою работу публично доступной;
  • хочется дать другим людям возможность предлагать правки (через pull request).

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

Справка Quartz по теме

https://quartz.jzhao.xyz/setting-up-your-GitHub-repository (на примере платформы GitHub).

Входим в свой аккаунт (или сначала регистрируемся) и создаём новый репозиторий: - Repository name: k0mar0v.ru - Тип: ● Private Больше ничего не меняем и нажимаем Create repository.

Подсказка

На GitHub в названиях репозиториев можно использовать точки.

Ссылка на репозиторий будет такой: https://github.com/zlonov/k0mar0v.ru.git

Подключение удалённого репозитория Quartz к локальному

Справка Quartz по теме

https://quartz.jzhao.xyz/setting-up-your-GitHub-repository (на примере платформы GitHub).

Переходим в локальную папку с инициированным репозиторием Quartz:

cd ~/Git/k0mar0v.ru/

Проверяем все отслеживаемые репозитории:

git remote -v

Результат будет примерно таким:

origin https://github.com/jackyzha0/quartz.git (fetch)
origin https://github.com/jackyzha0/quartz.git (push)
upstream https://github.com/jackyzha0/quartz.git (fetch)
upstream https://github.com/jackyzha0/quartz.git (push)

Нам надо поменять origin на наш собственный репозиторий, ссылку на который мы получили на предыдущем этапе:

git remote set-url origin https://github.com/zlonov/k0mar0v.ru.git

Если вдруг в качестве upstream не установлен репозиторий Quartz, добавим его, чтобы обновления самого Quartz работали:

git remote add upstream https://github.com/jackyzha0/quartz.git

Проверяем все отслеживаемые репозитории ещё раз:

git remote -v

Результат должен быть примерно таким:

origin https://github.com/zlonov/k0mar0v.ru.git (fetch)
origin https://github.com/zlonov/k0mar0v.ru.git (push)
upstream https://github.com/jackyzha0/quartz.git (fetch)
upstream https://github.com/jackyzha0/quartz.git (push)

Подсказка

Дальнейшую синхронизацию можно продолжать выполнять через команды для Терминала, но для удобства можно использовать какой-либо клиент (редактор) Git с графическим интерфейсом: Git GUI clients. В Git-клиент нужно добавить наш репозиторий через Add Existing Repository... или подобную команду меню, для которой указать путь к ~/Git/k0mar0v.ru/. Удобство клиента, помимо наглядности, в том числе в автоматическом запросе и сохранении на будущее данных учётной записи для доступа к удалённому репозиторию.

Теперь можно синхронизировать контент и загрузить его в свой репозиторий. Данная команда выполнит первоначальную отправку контента:

npx quartz sync --no-pull

Вывод результата работы команды должен быть примерно таким:

 Quartz v4.2.3 
Backing up your content
[v4 cd15cda] Quartz sync: Mar 4, 2024, 10:38 AM
 2 files changed, 6 insertions(+)
 delete mode 100644 content/.gitkeep
 create mode 100644 content/index.md
Pushing your changes
Enumerating objects: 8388, done.
Counting objects: 100% (8388/8388), done.
Delta compression using up to 12 threads
Compressing objects: 100% (3027/3027), done.
Writing objects: 100% (8388/8388), 6.33 MiB | 9.22 MiB/s, done.
Total 8388 (delta 5277), reused 8360 (delta 5253), pack-reused 0
remote: Resolving deltas: 100% (5277/5277), done.
To https://github.com/zlonov/k0mar0v.ru.git
 * [new branch]      v4 -> v4
branch 'v4' set up to track 'origin/v4'.
Done!

В удалённом репозитории теперь появятся файлы самого Quartz и папка content c дефолтным файлом index.md: https://github.com/zlonov/k0mar0v.ru

Для дальнейшей синхронизации можно пользоваться либо командой npx quartz sync либо Git-клиентом.

Синхронизация локальных изменений с контентом с удалённым репозиторием

Подсказка

Ниже приведены команды для Терминала, но для удобства можно использовать какой-либо клиент (редактор) Git с графическим интерфейсом: Git GUI clients.

Справка про запись изменений в репозиторий

https://git-scm.com/book/ru/v2/Основы-Git-Запись-изменений-в-репозиторий

Идеология Quartz предполагает, что весь контент редактируется с помощью Obsidian. Для этого надо открыть папку content как хранилище Obsidian. Как вариант, можно создать символьную ссылку на эту папку и разместить её внутри другого хранилища.

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

После внесения требуемых изменений переходим в локальный клон репозитория.

cd ~/Git/k0mar0v.ru/

Добавляем все файлы в отслеживаемые:

git add .

Убеждаемся, что нужные нам файлы проиндексированы:

git status

Файлы должны оказаться в разделе “Changes to be committed”:

On branch main
No commits yet
Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
new file:   index.md

Коммитим (вносим) изменения, указав комментарий к нему сразу в командной строке, и отправляем их в удалённый репозиторий:

git commit -m "Комментарий к коммиту"
git push

Подсказка

Дальнейшую синхронизацию можно продолжать выполнять через команды для Терминала, но для удобства можно использовать какой-либо клиент (редактор) Git с графическим интерфейсом: Git GUI clients. В Git-клиент нужно добавить наш репозиторий через Add Existing Repository... или подобную команду меню, для которой указать путь к ~/Git/k0mar0v.ru/. Удобство клиента, помимо наглядности, в том числе в автоматическом запросе и сохранении на будущее данных учётной записи для доступа к удалённому репозиторию.

Настройка хостинга GitHub Pages

Справка по теме

https://quartz.jzhao.xyz/hosting#github-pages

В папке репозитория ~/Git/k0mar0v.ru нужно создать новый файл /.github/workflows/deploy.yml с содержимым как ниже.

name: Deploy Quartz site to GitHub Pages
 
on:
  push:
    branches:
      - v4
 
permissions:
  contents: read
  pages: write
  id-token: write
 
concurrency:
  group: "pages"
  cancel-in-progress: false
 
jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0 # Fetch all history for git info
      - uses: actions/setup-node@v3
        with:
          node-version: 18.14
      - name: Install Dependencies
        run: npm ci
      - name: Build Quartz
        run: npx quartz build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: public
 
  deploy:
    needs: build
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

Переходим в настройках репозитория (вкладка Settings) в настройки страницы (пункт Pages в боковом меню) и в настройке Source выбираем GitHub Actions.

Отправляем изменения в удалённый репозиторий:

git add . && git commit -a -m "GitHub Actions" && git push

Или пользуемся командами Git-клиента: Commit to v4 и Push.

Можно посмотреть как выполняются Actions и при необходимости перезапустить их: https://github.com/zlonov/k0mar0v.ru/actions/

По завершению сайт будет доступен по адресу <github-username>.github.io/<repository-name> (https://zlonov.github.io/k0mar0v.ru/)

Настройка собственного доменного имени для Github Pages

Общая информация

Справки по теме

https://docs.github.com/ru/pages/configuring-a-custom-domain-for-your-github-pages-site

https://quartz.jzhao.xyz/hosting#custom-domain

Чтобы использовать GitHub pages для публикации своего сайта нужно:

  1. Перейти в Settings своего репозитория.
  2. В разделе Code and automation в боковом меню выбрать Pages.
  3. В поле Custom Domain, написать адрес своего домена и нажать Save.
  4. Следующие шаги зависят от используемого домена - Apex (example.com) или Subdomain (subdomain.example.com).
    • If you are using an apex domain, navigate to your DNS provider and create an A record that points your apex domain to GitHub’s name servers which have the following IP addresses:
      • 185.199.108.153
      • 185.199.109.153
      • 185.199.110.153
      • 185.199.111.153
    • If you are using a subdomain, navigate to your DNS provider and create a CNAME record that points your subdomain to the default domain for your site. For example, if you want to use the subdomain quartz.example.com for your user site, create a CNAME record that points quartz.example.com to <github-username>.github.io.
Link to original

Указание поддомена на примере hub.zlonov.ru

Создаём в DNS сервисе запись:

  • тип CNAME
  • Хост: hub
  • Указывает на zlonov.github.io

Получение информации о домене

Команда: dig hub.zlonov.ru +noall +answer

Ссылка: https://losst.pro/komanda-dig-v-linux#toc-1-poluchenie-informacii-o-domene

Проверяем:

dig hub.zlonov.ru +noall +answer

Пример результата:

hub.zlonov.ru.		3600	IN	CNAME	zlonov.github.io.
zlonov.github.io.	3600	IN	A	185.199.108.153
zlonov.github.io.	3600	IN	A	185.199.111.153
zlonov.github.io.	3600	IN	A	185.199.109.153
zlonov.github.io.	3600	IN	A	185.199.110.153

Убеждаемся, что DNS запись корректно определяется GitHub Pages: https://github.com/zlonov/hub.zlonov.ru/settings/pages

Теперь сайт доступен по адресу: https://hub.zlonov.ru

Link to original

Указание корневого домена на примере k0mar0v.ru

Создаём в DNS сервисе 4 записи:

  • тип А
  • Хост: .k0mar0v.ru
  • Указывает на
    • 185.199.108.153
    • 185.199.109.153
    • 185.199.110.153
    • 185.199.111.153

Проверяем:

dig k0mar0v.ru +noall +answer

Пример результата:

k0mar0v.ru. 3547 IN A 185.199.111.153
k0mar0v.ru. 3547 IN A 185.199.110.153
k0mar0v.ru. 3547 IN A 185.199.109.153
k0mar0v.ru. 3547 IN A 185.199.108.153

Убеждаемся, что DNS запись корректно определяется GitHub Pages: https://github.com/zlonov/k0mar0v.ru/settings/pages

Теперь сайт доступен по адресу: https://k0mar0v.ru

Link to original