tinystatic
JS helper functions; Dynamic URLs
Um pequeno gerador de sites estáticos, flexível e fácil de usar. É flexível, pois não há estrutura de site obrigatória nem conceitos específicos de blog. É fácil de usar, pois podemos começar com um site HTML padrão e introduzir o tinystatic gradualmente.
O conceito de tinystatic é simples: a partir de cada arquivo em um diretório de entrada, crie um arquivo em um diretório de saída que podemos usar como diretório público de nosso servidor web. A maneira como o tinystatic gera um arquivo de saída depende da extensão do arquivo de entrada: Markdown é convertido em HTML, enquanto CSS, JS e imagens são simplesmente copiados. Para arquivos markdown e HTML, você pode especificar metadados na parte superior de um arquivo. Ao especificar um modelo nos metadados deste arquivo e fornecer modelos em diretórios separados, você pode usar o mecanismo de modelagem HTML do Go. Aqui está um exemplo de um site de blog típico e um guia de início rápido, veja abaixo.
Baixe o binário tinystatic para o seu sistema operacional:
Opcionalmente, adicione o binário ao caminho do seu shell, colocando o binário em um diretório existente como /usr/bin ou adicionando o diretório pai do binário à sua variável de caminho.
Se você adicionou tinystatic ao seu caminho, você poderá chamar
tinystatic -helpCaso contrário, você precisará especificar o caminho para o binário tinystatic ao chamá-lo
/path/to/tinystatic -helpSe não quiser usar os binários pré-construídos, você precisará instalar o compilador Golang para compilar o tinystatic. Então, você pode instalar o tinystatic executando
go install -u github.com/julvo/tinystatic ou clonando o repositório e executando go install ou go build no diretório raiz deste repositório.
Este é um tutorial de 10 minutos no qual construímos um pequeno blog, começando com uma única página HTML e apresentando os recursos do tinystatic um por um.
Primeiro, criamos uma pasta chamada routes . Dentro desta pasta, criamos um único arquivo HTML index.html com o seguinte conteúdo:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > Welcome to our blog </ h1 >
</ body >
</ html > Agora podemos executar tinystatic pela primeira vez. Por padrão, tinystatic espera ser chamado no diretório que contém o diretório routes , mas você pode alterar isso usando o parâmetro -routes . Depois de executar o comando, você deverá ver uma output de pasta aparecendo ao lado da pasta routes . Nossa estrutura de arquivos agora se parece com isto:
my-blog/
routes/
index.html
output/
index.html
Agora podemos executar um servidor web no diretório de saída, por exemplo, usando o servidor integrado do Python para abrir nosso site em http://localhost:8000 :
cd output
python3 -m http.server
Até agora, tudo o que o tinystatic fez foi copiar o index.html das routes para output - o que não é tão útil, mas aguente firme...
Vamos adicionar um segundo arquivo HTML às routes , por exemplo about.html :
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > About us </ h1 >
</ body >
</ html > Depois de executarmos tinystatic novamente e com nosso servidor web ainda em execução, podemos navegar para http://localhost:8000/about . Observe como não há mais .html nesta rota, pois o tinystatic criou uma pasta about com um único index.html nela, assim:
output/
index.html
about/
index.html
O que não gostamos nas nossas páginas atuais é a duplicação de toda a estrutura básica do HTML. Não seria melhor usar um modelo compartilhado para index.html e about.html ? Para fazer isso, criamos uma pasta chamada templates próxima à nossa pasta routes e colocamos um arquivo HTML default.html dentro dela:
my-blog/
routes/
index.html
about.html
templates/
default.html
O conteúdo de default.html deve ser:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html > Além disso, alteramos o conteúdo de routes/index.html para
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}} e o conteúdo de routes/about.html para
---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}} Ao executar tinystatic novamente, a saída é idêntica à saída anterior, mas consolidamos o esqueleto HTML em um único local.
Como visto agora, podemos especificar um modelo para renderizar nosso conteúdo, fornecendo um nome de modelo nos metadados na parte superior de um arquivo. Também podemos incluir outros modelos (veja abaixo) e usar os pipelines de modelos do Go. Durante a renderização, temos acesso aos metadados definidos na parte superior do arquivo, uma estrutura Route com os campos Route.Href , Route.FilePath e Route.Meta que é novamente um mapa de metadados definidos na parte superior do arquivo. Além disso, podemos acessar Routes , que é uma fatia (pense: array para pessoas novas no Go) de todas as rotas, sobre as quais aprenderemos mais adiante.
Vamos usar esses metadados junto com as primitivas de modelagem do Go para alterar o título da página dependendo da página atual. Para isso, alteramos os metadados em routes/about.html para
---
template: default.html
title: About
---
e finalmente altere templates/default.html para
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html >Depois de regenerar o site, o navegador agora deve exibir títulos de páginas diferentes para nosso índice e nossa página sobre.
Agora, vamos criar algumas postagens de blog em nossa pasta de rotas, por exemplo
routes/
index.html
about.html
posts/
first_post.md
second_post.md
Coloque alguma marcação dentro desses arquivos .md com uma seção de metadados na parte superior especificando o modelo como default.html , semelhante a como especificamos os metadados em routes/index.html e routes/about.html . Para first_post.md , isso poderia ser assim:
---
template : default.html
title : First Post
---
# Here could be some fine content
Executando tinystatic novamente para regenerar a saída, agora podemos visitar http://localhost:8000/posts/first_post e http://localhost:8000/posts/second_post . A marcação foi convertida em HTML e colocada dentro de um modelo chamado body para nós, para que seja renderizada no espaço reservado {{template "body" .}} em templates/default.html . Observe como isso é diferente dos arquivos .html , onde precisamos chamar {{define "body"}} ... {{end}} manualmente.
A seguir, vamos criar uma listagem de nossas postagens usando a fatia de Routes mencionada. Alteramos o conteúdo de routes/index.html para:
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
< a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul > Após a regeneração, devemos ver uma lista de nossas postagens na página de índice. A fatia Routes fornece uma lista de todas as rotas que podemos filtrar usando funções auxiliares predefinidas, por exemplo
.Routes | filterFilePath "**/posts/*.md" para exibir todos os arquivos que terminam em .md em qualquer pasta chamada posts.Routes | sortAsc "title" para classificar rotas com base no title do campo de metadados.Routes | limit 10 para obter apenas as 10 primeiras rotas.Routes | offset 3 para pular as três primeiras rotas.Routes | filter "title" "*Post" para filtrar com base no title do campo de metadados que corresponde ao padrão *Post.Routes | filterFileName "*.md" para obter todos os arquivos que terminam em *.md.Routes | filterHref "/*" para obter todas as rotas de nível superior.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 para combinar alguns dos itens acima A seguir, gostaríamos de usar um layout diferente para postagens e para as outras páginas. Os posts devem ter uma imagem antes do texto, por isso queremos definir a URL da imagem nos metadados do post. Portanto, adicionamos um segundo modelo chamado templates/post.html com o seguinte conteúdo:
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
< img src = {{.image}} />
{{template "body" .}}
</ body >
</ html >Alteramos os metadados da postagem para
---
template: post.html
title: First Post
image: https://some-image.url
---
A regeneração da saída deve nos dar uma bela imagem acima de nossa postagem. No entanto, também acabamos com código HTML duplicado em nossos modelos novamente. Para melhorar isso, criamos outra pasta ao lado de routes e templates chamada partials . Dentro dos parciais, criamos um arquivo chamado head.html com
{{define "head"}}
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}} e substituímos <head>...</head> em nossos modelos por {{template "head" .}} , assim
<!doctype html >
< html >
{{template "head" .}}
< body >
{{template "body" .}}
</ body >
</ html > Agora reduzimos ao mínimo a replicação de código entre diferentes modelos. Podemos usar este diretório partials para armazenar todos os tipos de componentes recorrentes, por exemplo, barras de navegação ou rodapés.
Observe que na verdade não precisamos estruturar o projeto usando os nomes de pasta que usamos neste tutorial. Os nomes dessas pastas são apenas os padrões, mas podem ser alterados usando os respectivos argumentos da linha de comando (veja tinystatic -help para mais informações).
Há um exemplo completo de um blog aqui.
