Como criar um blog estático usando o Cactus [OS X]

Atualizar: Aplicativo Cactus foi descontinuado.

Se você não precisa de um CMS e prefere apenas obter um site ou blog estático, Jekyll é uma boa ferramenta para se arriscar. No entanto, se você preferir uma ferramenta com uma GUI, em vez de trabalhar com ferramentas de linha de comando, talvez queira fazer o checkout Cacto.

Cactus é um livre gerador de site estático equipado com ferramentas poderosas que podem ajudá-lo construir sites localmente, mais rápido e mais fácil com tecnologias web modernas. Dá-lhe um ponto de partida no seu projeto com 4 modelos pré-definidos para que você possa atingir o chão correndo.

Enquanto trabalha no seu projeto, o Cactus monitore todas as alterações feitas em seu projeto e atualizar automaticamente o navegador para que você possa ver as alterações imediatamente no seu Mac ou dispositivo móvel. Ele também suporta SASS / SCSS e Coffescript fora da caixa, então cada mudança neste arquivo também é gerada automaticamente.

Iniciar

Primeiro de tudo, você precisa baixar o Cactus de sua homepage, então execute a instalação. Depois de concluído, abra-o e você verá quatro botões: Criar, Implantar, Editar e Visualizar.

Para criar um novo projeto, clique em Crio. Você verá 4 modelos disponíveis lá. Para este tutorial, vamos com o modelo Blog. Clique Crio.

Você será solicitado a fornecer o nome do seu projeto e escolher o local onde o projeto existe. Aqui eu dou nome “Meu blog incrível” para o projeto. Depois disso, você verá seu projeto já no Cactus.

Modificando Arquivos

O projeto gerado usando o template Blog agora existe no seu Finder. Vamos agora inspecionar os elementos necessários para construir o nosso Blog. Vá para o diretório onde seus arquivos são mantidos. Os diretórios principais que usaremos são Modelos, Páginas, e Estático diretório. Vamos pular os outros por enquanto.

Para manter as coisas breves, aqui está o objetivo de cada diretório:

• Modelos: Contém arquivos HTML que se comportam como modelo, usados ​​por arquivos HTML em páginas para construir.
• Páginas: Contém todos os arquivos HTML que se tornarão uma página com o mesmo caminho. Por exemplo: hello.html aqui vai se tornar http://yoursite.com/hello.html
• Estático: Contém todos os recursos estáticos, como CSS, Javascript e imagens.

Agora, vamos editar três arquivos principais dos diretórios: base.html e post.html no diretório de modelos e index.html no diretório Páginas.

Cactus usa Mecanismo de modelo do Django para a linguagem de templates. Com isso, você pode incluir elementos HTML de outros arquivos HTML, para que você não precise duplicar códigos. Os recursos mais usados ​​aqui são herança de modelo e variável.

Para ver como eles funcionam, primeiro abra o base.html no diretório Template.

             % block content% Conteúdo principal % endblock content% ---   

base.html é o arquivo html simples que usamos como um modelo 'esqueleto'. Contém elementos comuns do nosso site. Você pode ver alguns “Blocos” lá; vamos usar o modelo filho para substituir esses blocos.

Agora abra o post.html localizado no mesmo diretório com base.html.

 % extends "base.html"% % título do bloco% title | Cactus % endblock title% % bloquear conteúdo% --- 
 
title
 
headline 
 
 
 % block body% Aqui é onde está o conteúdo da postagem. % endblock body% 
 --- % endblock content% 

o post.html contém a marcação para a nossa página de entrada do blog. Na primeira linha você pode ver isso post.html estende o base.html. Isso significa que vamos substituir os blocos em base.html com os blocos aqui.

Também podemos encontrar variáveis ​​aqui, como title e headline. Vamos definir os valores dessas variáveis ​​nas postagens do blog postar mais tarde.

Agora, vamos olhar para o % block body% quadra. Isso será substituído pelo modelo filho que contém as entradas de postagem do nosso blog.

Vá para o diretório páginas / posts. Aqui estão as outras entradas dos nossos posts.

 title: Meu post de Entradas de Postagens: Meu autor de Post Headline: Agus date: 15-01-2015 % extends "post.html"% % block corpo% % filtro markdown% Lábem ipsum dolor sit amet, consectetur adipisicing elit. Earum, perferendis inventore dolorum rerum et tempora sintetica nem illum ab saepe, suposto, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

Nas postagens, damos valor à variável, como título, título, autor e data. Este valor passará quando chamarmos o nome da variável no modelo pai. Então nós escrevemos o conteúdo do nosso blog com o Markdown.

Agora vamos para a página de índice do nosso blog, aberto index.html no Páginas diretório. Ele contém a lista de nossas entradas de blog e o link para cada entrada. O código principal parece abaixo:

 % extends "base.html"% % bloquear conteúdo% -- 
 % de postagem em postagens% 
  post.title 
post.headline 
 % endfor% 
 -- % endblock content% 

Neste ponto temos um blog simples com duas páginas principais, o página de índice que contém as entradas do blog e as página de entrada do blog em si.

Vá para a janela do Cactus e clique no botão Visualizar para iniciar o servidor. Ele abrirá automaticamente o navegador e abrirá seu site.

Estilizando o Blog usando o SCSS

Um ótimo recurso do Cactus é que ele funciona com SASS / SCSS fora da caixa. Somente Solte seus arquivos .sass ou .scss no estático diretório e toda vez que você editar e salvar os arquivos, o Cactus irá gerar automaticamente o CSS.

Aqui vou dar um exemplo usando o bootstrap-sass para estilizar o nosso blog. Supondo que você esteja usando o bower, abra o terminal e navegue até o estático diretório do nosso projeto usando CD comando. Então instale o bootstrap-sass usando este comando:

$ bower instalar bootstrap-sass-official

Quando o download estiver concluído, você verá um bower_components diretório dentro do diretório estático contendo bootstrap-sass-official.

Agora vá para este diretório: static / css. Crie o arquivo scss, dê a ele o nome syle-bs.scss e insira este código.

 @import "… / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

O que o código faz é importar tudo de bootstrap-sass. Depois de salvar o style-bs.scss, você verá o style-bs.css gerado no mesmo diretório que contém todos os estilos do bootstrap.

Implemente seu projeto

Por fim, quando seu projeto estiver pronto, você poderá implantar seu projeto na versão ao vivo facilmente usando o Amazon S3.