Este é o repositório do meu blog de codificação Nemanjamitic.com. Grátis e de código aberto, sinta -se à vontade para reutilizar o código e personalizar para o seu próprio blog de desenvolvedores. As postagens do blog (futuro) exigem atribuição.
Método | Url |
---|---|
Nginx | https://nemanjamitic.com |
Páginas do Github | https://nemanjam.github.io |
Docker | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.nemanjamitic.com/nemanjamitic.com
No final de 2023. Comecei a pensar em capturar idéias do meu trabalho de codificação diária habitual em artigos de blog arredondados, então comecei a procurar um modelo de blog limpo, minimalista e bem estruturado. Comecei a pesquisar e considerei Jekyll, Hugo, Next.JS, mas acabei percebendo que atualmente o Astro é a melhor ferramenta para um site estático e pessoal.
Então eu pesquisei e revisei todos os exemplos de Astro de código aberto que eu pude encontrar com a intenção de reutilizá -lo e apenas personalizar estilos, mas nenhum deles atendeu à minha preferência pela estrutura de código e aos recursos desejados, então decidi compilar as melhores partes de todas elas em uma estrutura e um estilo de codificação do meu próprio gosto. Veja a seção de créditos abaixo.
Pretendo usar este site nos próximos anos, então considero o esforço extra bem gasto. Além disso, isso me ajudou a ganhar alguma experiência prática com o Astro no processo.
No desenvolvimento, você pode ver as postagens de rascunho por padrão.
# .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
Existem três métodos de implantação disponíveis localmente e nas ações do GitHub. Você sempre pode identificar facilmente a versão atualmente implantada, verificando as informações mais recentes de compromisso no rodapé do site implantado.
Para ações de trabalho do GitHub, você precisará definir esses segredos nas configurações do repositório do GitHub:
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAME
Para implantações locais, você precisará definir o alias SSH para o servidor remoto, no seu arquivo de configuração SSH local, por exemplo:
# /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
Todas as implantações do NGINX se resumem a criar o site e copiar os arquivos compilados da pasta /dist
na pasta Raiz da Web Nginx em um servidor remoto.
# 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
Basta acionar um dos seguintes fluxos de trabalho:
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.yml
Disponível apenas em ações do GitHub. Basta acionar um dos seguintes fluxos de trabalho:
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.yml
Para criar imagens do Docker linux/arm64
localmente, se você tiver o computador x86, precisará instalar o Qemu e o BuildX localmente, consulte este tutorial:
Imagens multi-arco com Docker Buildx e Qemu
Se você estiver no Ubuntu, provavelmente precisará executar isso também.
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
Depois disso, você pode criar e pressionar imagens de várias plataformas localmente.
# 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
Basta acionar esses fluxos de trabalho:
# .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
Um ótimo cuidado é dedicado a uma estrutura de código sólida, clara, abrangente, compreensível, sustentável e personalizável. A intenção por trás disso é manter as coisas separadas, claras, legíveis e óbvias e reduzir a complexidade e o ruído.
Abaixo está uma visão geral mais detalhada dos recursos e suas implementações:
Este site Astro, de alto desempenho gerado estaticamente, de alto desempenho. Possui coleta de conteúdo de postagem e projeto com arquivos .mdx
e eles servem como um modelo principal do aplicativo. As tags (1: n) e as categorias (1: 1) são suportadas para as relações entre as postagens. As transições de visualização são ativadas e as postagens são animadas em todas as páginas usando transition:name
. As imagens são otimizadas do astro e todos os tamanhos de imagem são extraídos como predefinições constantes reutilizáveis para consistência e redução da sobrecarga. A paginação está disponível para páginas de postagem e lista de projetos. O modo de visualização está disponível com o script astro preview
ou configurando PREVIEW_MODE=true
em .env.production
. Os feeds de RSS e JSON são implementados como pontos de extremidade estáticos da API. Existe uma integração do React para todos os componentes que requerem interatividade do lado do cliente.
As configurações para integrações e plug -ins são extraídas para manter astro.config.ts
limpos e legíveis. Todas as rotas do site são centralizadas em um único objeto constante, o mesmo para os caminhos de arquivo. As camadas são separadas e organizadas hierarquicamente e suportam layouts centralizados e de largura total para todos os tipos de páginas: 1. Páginas .mdx
, 2. Consultando os principais modelos de aplicativos - As coleções de conteúdo de postagem e projeto são extraídas na pasta /modules
para getStaticPaths()
.
Há um suporte para modos de vento de cauda claro/escuro e temas de cores com cores semânticas. Os temas são armazenados em arquivos separados como variáveis CSS organizadas em dois níveis. O estilo responsivo é suportado para espaçamentos e tipografia. Todo o código CSS está organizado em três camadas de vento de cauda (base/componentes/utilitários). Existe um sistema elaborado para manter os estilos de tipografia em sincronia entre o conteúdo de marcação (plug -in tailwindcss/typography
e a classe prose
) e componentes personalizados. Os estilos de tipografia são personalizados e abstraídos em uma aula personalizada my-prose
. A maioria dos estilos de componentes é extraída em arquivos CSS e usa class-variance-authority
para variantes. Os nomes de classes dinâmicos são implementados usando tailwind-merge
e clsx
.
Os metadados são centralizados e digitados ou todos os tipos de páginas ( .mdx
, coleções e listas) com padrões como fallback. Existe um ponto de extremidade da API para gerar imagens de gráficos abertos com imagem de herói e gradiente de cores aleatórias usando o modelo Satori e HTML aplicado a cada página. O sitemap é gerado no momento do trabalho usando a integração oficial. Página 404 de estilo personalizado é fornecido.
Existe uma estrutura de ativos organizados para imagens otimizadas ( /src
) e não otimizadas ( /public
) com padrões fornecidos. Para ícones, é usado o pacote astro-icon
que suporta ícones de design de materiais ( mdi
) e SVGs locais. Para postagens de filtragem, existem as seguintes páginas paginadas: por tag - /tags
, por categoria - /categories
, por ambos - /explore
- Explore (Archive). O NavBar possui itens armazenados como uma matriz e denominou um item ativo para a rota atual. Existe um componente para o índice para postagens de blog que lê a hierarquia de sub-cabeçalhos do conteúdo do Markdown. Um sistema de design com páginas .mdx
está disponível no caminho /design
, fornecendo uma visualização clara e depuração de todos os componentes visuais. Compartilhar componente para compartilhar postagens suporta Twitter, Facebook, Reddit, LinkedIn e Hackernews.
Os comentários são feitos com o GISCUS e o Modo Dark é sincronizado com o tema principal. A incorporação de tweets, vídeos do YouTube e Vimeo e links de gráficos abertos são feitos com astro-embed
. O destaque da sintaxe para o código incorporado é implementado usando a integração expressive-code
.
Todo o código está escrito no TypeScript, os tipos para todo o aplicativo estão localizados em uma pasta separada. Existem esquemas ZOD centralizados para modelos de postagem, projeto e configuração com padrões adequados para evitar exceções de tempo de execução. As variáveis de configuração e ambiente são digitadas e validadas no tempo de construção. Existem tipos abstratos para modelos de coleta de postagens e projetos que podem incluir campos adicionais, como o tempo de leitura calculado.
tsconfig.json
definiu aliases de caminho para importações limpas e organizadas. O código é formatado usando mais bonito com importações classificadas e o ESLint é usado para verificação de sintaxe.
As informações mais recentes do Git Commit estão incluídas no rodapé do site para facilitar a identificação da versão atualmente implantada. Existem três métodos para implantações de produção: 1. Páginas do Github, 2. Nginx e 3. Imagem do docker e todas elas são suportadas tanto em ações do GitHub quanto localmente. Os ativos que copiam para o NGINX e as imagens do Docker de construção são abstraídos em scripts de bash e reutilizados em ações do GitHub e implantações locais para depuração local mais fácil. Há um suporte para a criação de imagens linux/amd64
e linux/arm64
Docker.
astro:env
- feito.mdx
para RSS usando contêineres componentesOs projetos mais importantes, exemplos, demos, recursos que reutilizei e revisei:
Outros projetos, exemplos, demos, recursos que reutilizei e revisei: