← Wiki

Do Obsidian ao site: o template do Astro

  • 4 min de leitura
Nesta página

O site é o template de blog oficial do Astro, o blog, que o próprio Astro oferece ao criar um projeto. Ele já traz lista de posts, página de post com capa, feed RSS e mapa do site. Nesta página você o baixa para dentro do vault, liga a pasta de posts dele à sua pasta blog/ e vê o resultado no computador.

Os comandos usam o terminal (o app Terminal no macOS). Testados no macOS com o Astro 7.

1. Conferir o Node.js

O template pede o Node.js 22.12 ou mais novo. Confira a versão instalada:

node --version

Se o comando não existir ou mostrar uma versão menor, instale a versão LTS de nodejs.org.

2. Baixar o template para .site/

No terminal, entre na pasta do vault e crie o projeto:

cd "/caminho/para/Meu vault"
npm create astro@latest .site -- --template blog --install --no-git --yes

O que cada parte faz:

  • .site é a pasta do projeto. O ponto no começo do nome a esconde do Obsidian.
  • --template blog escolhe o template de blog.
  • --install instala as dependências.
  • --no-git evita criar um repositório dentro do vault, que já é um.
  • --yes aceita as respostas padrão das perguntas do instalador.

3. Ligar a pasta de posts ao blog/

O template lê os posts de .site/src/content/blog/, que vem com cinco posts de exemplo. Apague a pasta e ponha no lugar dela um link simbólico para a pasta blog/ do vault:

cd .site
rm -rf src/content/blog
ln -s ../../../blog src/content/blog

O caminho ../../../blog é relativo à pasta do link: sobe de content/, de src/ e de .site/, e chega à raiz do vault. Como é relativo, o link continua funcionando em outro computador e na máquina da automação, onde o vault está em outro caminho.

Este é o único ponto de contato entre o vault e o site. O código do template não muda: ele continua lendo src/content/blog/ e recebe as suas notas.

4. Dar nome ao site

Em .site/src/consts.ts, troque o nome e a descrição do site:

export const SITE_TITLE = 'Meu blog';
export const SITE_DESCRIPTION = 'O que eu escrevo no Obsidian.';

Em .site/astro.config.mjs, o endereço do site, usado no feed RSS e no mapa do site. Se ainda não sabe qual será, deixe como está e volte aqui depois da página da Cloudflare:

site: 'https://meu-blog.sua-conta.workers.dev',

As páginas Home e About do template têm texto de exemplo. Editá-las (src/pages/index.astro e src/pages/about.astro) é opcional e não interfere no blog.

5. Ver o site no computador

Ainda dentro de .site:

npm run dev

Abra http://localhost:4321/blog/ no navegador. A nota que você criou em blog/ na página do Obsidian aparece na lista, como cada nota que entrar na pasta, com o endereço tirado do nome do arquivo. Para parar, Ctrl+C no terminal.

Para conferir exatamente o que a automação vai fazer, gere o site completo:

npm run build

O resultado vai para .site/dist/, que é a pasta enviada à Cloudflare.

O que o template recusa

O template define as propriedades obrigatórias de um post e confere cada nota antes de gerar qualquer página. Se uma nota estiver errada, npm run build para, e a automação também. Nos testes deste guia, estas foram as mensagens (com a formatação do terminal simplificada):

Uma nota com description vazia:

[InvalidContentEntryDataError] blog → vazio data does not match collection schema.
  description: Expected type "string", received "object"

Uma nota com pubDate: amanha:

[InvalidContentEntryDataError] blog → ruim data does not match collection schema.
  pubDate: Expected type "date", received "object"

Uma nota com uma imagem que não existe em images/:

[ImageNotFound] Could not find requested image `images/nao-existe.png`. Does it exist?

A primeira linha diz o tipo do erro e a nota, pelo endereço dela (blog → vazio é a nota blog/vazio.md).

O template não confere links entre notas: um link para outra nota do vault vai para o site como está, e não leva à página dela. Para apontar para outro post, use o endereço do site (/blog/segundo-artigo/).

Enviar

Envie o vault com o GitHub Desktop. A pasta .site/ já vem com um .gitignore que deixa de fora as dependências (node_modules/) e o site gerado (dist/). O link simbólico vai para o repositório como link, e é assim que a automação o encontra.