nemanjam.github.io
1.0.0
Это репозиторий для моего блога кодирования Nemanjamitic.com. Бесплатный и открытый исходный код, не стесняйтесь повторно использовать код и настроить для своего собственного блога разработчиков. Сообщения в блоге (будущее) требуют атрибуции.
| Метод | URL |
|---|---|
| Nginx | https://nemanjamitic.com |
| GitHub Pages | https://nemanjam.github.io |
| Докер | https://nmc-docker.arm1.nemanjamitic.com |
https://plaabible.arm1.nemanjamitic.com/nemanjamitic.com
К концу 2023 года. Я начал думать о том, чтобы запечатлеть понимание моей обычной ежедневной кодирующей работы в закругленные статьи в блоге, поэтому я начал искать чистый, минималистичный и хорошо структурированный шаблон блога. Я начал исследовать и считал Джекил, Хьюго, Next.js, но в конечном итоге понял, что в настоящее время Astro является лучшим инструментом для статического личного веб -сайта.
Затем я исследовал и рассмотрел все примеры Astro с открытым исходным кодом, которые я мог найти с намерением повторно использовать его и просто настраивать стили, но никто из них не не отвечал моим предпочтениям структуре кода и желаемым функциям, поэтому я решил собрать лучшие части от всех из них в Структура и стиль кодирования по моему своему вкусу. Смотрите раздел «Кредиты».
Я собираюсь использовать этот сайт на долгие годы, поэтому я считаю, что дополнительные усилия потрачены. Кроме того, это помогло мне получить практический опыт работы с Astro в процессе.
В разработке вы можете увидеть проекты сообщений по умолчанию.
# .env.development
# this var is always without trailing slash '/'
SITE_URL=http://localhost:3000 # .env.production
SITE_URL=https://nemanjamitic.com
# set to true to preview draft posts in production
PREVIEW_MODE= # install packages
yarn install
# copy and set environment variables
cp .env.development.example .env.development
# run development server and visit http://localhost:3000
yarn dev
# delete node_modules and yarn.lock
yarn clean # copy and set environment variables
cp .env.production.example .env.production
# build website
yarn build
# run website and visit http://localhost:3000
yarn startСуществует три метода развертывания, доступные локально и в действиях GitHub. Вы всегда можете легко идентифицировать в настоящее время развернутую версию, проверив последнюю информацию о коммите в нижнем колонтитуле развернутого веб -сайта.
Для рабочих процессов GitHub вам необходимо установить эти секреты в настройках репозитория GitHub:
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAMEДля локальных развертываний вам нужно будет установить SSH Alias для удаленного сервера, в вашем локальном файле конфигурации SSH, например:
# /home/username/.ssh/config
# arm1 ssh alias for remote server
Host arm1 123.123.13.123
HostName 123.123.13.123
IdentityFile ~ /.ssh/my-servers/arm1-ssh-private-key.key
User your-user Все развертывания NGINX сводятся к созданию веб -сайта и копированию скомпилированных файлов из папки /dist в папку NGINX Web Root на удаленном сервере.
# package.json
# set your SITE_URL
" build:nginx " : " SITE_URL='https://nemanjamitic.com' astro build " ,
# build the app
yarn build:nginx
# configure ssh for your own "arm1" remote server in /home/username/.ssh/config
# copy compiled app from local /dist folder to Nginx web root on the remote server
" deploy:nginx " : " bash scripts/deploy-nginx.sh '~/traefik-proxy/apps/nmc-nginx-with-volume/website' arm1 " ,
# run deploy
yarn deploy:nginxПросто запустите один из следующих рабочих процессов:
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.ymlДоступно только в действиях GitHub. Просто запустите один из следующих рабочих процессов:
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml Для создания изображений linux/arm64 Docker локально, если у вас есть компьютер x86, вам нужно будет установить QEMU и Buildx локально, см. Этот урок:
Многоартные изображения с Docker Buildx и Qemu
Если вы находитесь на Ubuntu, вам, вероятно, нужно будет запустить это тоже.
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yesПосле этого вы можете создавать и раздвигать многоплатформенные изображения локально.
# package.json
# open terminal and login with your Dockerhub account, both locally and on remote server
docker login my-user my-pass
# replace "nemanjamitic/nemanjam.github.io" with your image name
# set ARG_SITE_URL_ARM64 to your production url
# set correct architecture for your production server --platform linux/arm64 or linux/amd64
" docker:build:push:arm " : " docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL_ARM64='https://nmc-docker.arm1.nemanjamitic.com' --platform linux/arm64 --progress=plain --push . " ,
# build and push Docker image, replace "arm" with your architecture
yarn docker:build:push:arm
# replace "~/traefik-proxy/apps/nmc-docker" with your path to docker-compose.yml
# replace "nemanjamitic/nemanjam.github.io" with your image name
" deploy:docker " : " bash scripts/deploy-docker.sh arm1 '~/traefik-proxy/apps/nmc-docker' nemanjamitic/nemanjam.github.io " ,
# pull and run latest image on your production server
yarn deploy:dockerПросто запустите эти рабочие процессы:
# .github/workflows
# build and push Docker image
default__build-push-docker.yml
# pull and run latest Docker image
# trigger one of the following:
bash__deploy-docker.yml
default__deploy-docker.ymlБольшая забота посвящена прочной, ясной, всеобъемлющей, понятной, обслуживаемой и настраиваемой структуре кода. Намерение, лежащее в основе этого, состоит в том, чтобы держать вещи отделенными, чистыми, читаемыми и очевидными и уменьшить сложность и шум.
Ниже приведен более подробный обзор функций и их реализаций:
Этот статически сгенерированный, высокопроизводительный, последний веб -сайт Astro. У него есть сборные и коллекции контента проекта с файлами .mdx , и они служат основной моделью приложения. Обе теги (1: n) и категории (1: 1) поддерживаются для отношений между постами. Просмотр переходов включены, и сообщения анимированы на всех страницах, используя transition:name реквизиты. Изображения оптимизированы астро, и все размеры изображений извлекаются в виде многократных постоянных пресетов для консистенции и уменьшения накладных расходов. Парень доступен как для страниц списков Post и Project. Режим предварительного просмотра доступен либо с помощью Script astro preview , либо путем настройки PREVIEW_MODE=true в .env.production . RSS и JSON -каналы реализованы как статические конечные точки API. Существует интеграция React для всех компонентов, которые требуют интерактивности на стороне клиента.
Конфигурации для интеграции и плагинов извлечены, чтобы поддерживать чистую и читаемой astro.config.ts . Все маршруты веб -сайтов централизованы в один постоянный объект, то же самое для путей файлов. Слои разделены и организованы иерархически и поддерживают как центрированные, так и полную ширину для всех типов страниц: 1. .mdx Страницы, 2. Страницы коллекций - POST и Project, и 3. Перечисляйте страницы - индексы с страницей. Запрос основных моделей приложений - коллекции контента Post и проекта извлечены в папку /modules для чистых и читаемых getStaticPaths() .
Существует поддержка как режимов легкого/темного ветра, так и цветов с семантическими цветами. Темы хранятся в отдельных файлах как переменные CSS, организованные на двух уровнях. Отзывчивый стиль поддерживается как для пространств, так и для типографии. Весь код CSS организован в три слоя для ветра (базы/компоненты/утилиты). Существует работающая система для поддержания стилей типографии синхронизации между содержимым маркировки (плагин tailwindcss/typography и класс prose ) и пользовательские компоненты. Стили типографии настроены и абстрагируются в пользовательский класс my-prose . Большинство стилей компонентов извлекаются в файлы CSS и используют class-variance-authority для вариантов. Динамические имена классов реализованы с использованием tailwind-merge и clsx .
Метаданные являются централизованными и напечатанными или всеми типами страниц ( .mdx , коллекции и списков) с по умолчанию в качестве запасного. Существует конечная точка API для генерации изображений с открытым графом с изображением героя и случайным цветовым градиентом, используя шаблон Satori и HTML, применяемый к каждой странице. Sitemap создается во время сборки с использованием официальной интеграции. Пользовательский стиль 404 страница предоставлена.
Существует организованная структура активов как для оптимизированных ( /src ), так и для неоптимизированных ( /public ) изображений с предоставленными по умолчанию. Для значков используется пакет astro-icon , поддерживающий как значки дизайна материала ( mdi ), так и локальные SVG. Для фильтрации сообщений есть следующие страницы на страницах: по тегам - /tags , по категории - /categories , по странице - /explore - explore (archive). Navbar имеет предметы, хранящиеся в качестве массива, и обладает активным предметом для текущего маршрута. Существует компонент для содержимого для сообщений в блоге, в которой читается иерархия подзаголовков из контента Marckdown. Система дизайна с страницами .mdx доступна на пути /design , обеспечивая четкий предварительный просмотр и отладка всех визуальных компонентов. Поделиться компонентом для обмена сообщениями поддерживает Twitter, Facebook, Reddit, LinkedIn и HackerNews.
Комментарии выполняются с Giscus, а темный режим синхронизируется с основной темой. Внедрение твитов, видео YouTube и Vimeo, а также открытые графические ссылки выполняются с astro-embed . Синтаксическое выделение для встроенного кода реализовано с использованием интеграции expressive-code .
Весь код записан в TypeScript, типы для всего приложения находятся в отдельной папке. Существуют централизованные схемы ZOD для моделей POST, Project и Config с надлежащими значениями по умолчанию, чтобы предотвратить исключения во время выполнения. И переменные конфигурации, и переменные среды вводятся и подтверждены время сборки. Существуют абстрактные типы для моделей постов и сбора проектов, которые могут включать в себя дополнительные поля, такие как рассчитанное время чтения.
tsconfig.json определил псевдонимов пути для чистого и организованного импорта. Код отформатируется с использованием красителя с отсортированным импортом, а Eslint используется для проверки синтаксиса.
Последняя информация о коммит GIT включена в нижний колонтитул веб -сайта для легкой идентификации в настоящее время развернутой версии. Существует три метода для развертывания производства: 1. Страницы GitHub, 2. Nginx и 3. Docker Image, и все они поддерживаются как в действиях GitHub, так и на местном уровне. Копирование активов для Nginx и создания изображений Docker абстрагируются в сценарии Bash и повторно используются как в действиях GitHub, так и в локальном развертывании для облегчения локальной отладки. Существует поддержка для создания изображений linux/amd64 и linux/arm64 Docker.
astro:env - Dode.mdx для RSS с использованием компонентных контейнеровНаиболее важные проекты, примеры, демонстрации, ресурсы, которые я использовал и рассмотрел:
Другие проекты, примеры, демонстрации, ресурсы, которые я использовал и рассмотрел:
