Pesquisar na Comunidade
Mostrando resultados para as tags ''criando um blog estático com jekyll''.
Encontrado 1 registro
-
Estou utilizando o jekyll para criar meu blog acadêmico(ainda em construção por falta de tempo), veja-o AQUI NESSE LINK Não vou ficar entrando em uma discussão sobre porquê utilizar jekyll e não wordpress, procurem no todo poderoso google. Mas deixando aqui minhas considerações e porquê escolhi o jekyll para criar meu blog acadêmico: 1 - Fácil entendimento de código. (Quem veio da plataforma Ghost Blog vai se apaixonar pelo jekyll) 2 - Fácil criação de código, indo desde de Markdown, Liquid até o simples HTML 3 - Organização. Pode até parecer que por ser um gerador de site estático o código fica desorganizado. Mas não. 4 - HOSPEDAGEM DE GRAÇA NO GITHUB :amor: Para mais informações, acessem o site do jekyll Jekyll • Simple, blog-aware, static sites Vamos lá. Programas necessários: Ruby RubyGems Linux, Unix ou Mac OS NodeJS (Por conta do suporte ao CoffeeScript Instalando Ruby(Linux) Instalando RubyGems(Linux) Instalando NodeJS(Linux) Instalando JEKYLL(Linux) gem install jekyll Agora que você já dedicou horas da sua vida pra instalar as coisas necessárias, vamos a parte mais divertida: Criar um site Quem já usou Rails aqui sabe do tesão que é usar Rails new qualquernome Pois bem, o jekyll também fornece essa fácil criação de um novo projeto, vamos usar o comando Jekyll new jekyll new sitesemnome cd sitesemnome Vamos rodar nossa aplicação? SIM, CAPITÃO jekyll serve --w A saída deve ser essa: Vamos acessar o nosso localhost com a porta 4000 e ver o que o jekyll gerou? SIM, CAPITÃO Perceba que, por padrão, o jekyll já gera uma página padrão e um post (Welcome to Jekyll) Capitão, onde eu altero esse arquivo padrão? Primeiro vamos entender a estrutura dos arquivos do jekyll Onde _includes reúne todos os arquivos que poderão ser inclusos depois(explicação mais para baixo) _layouts reúne todos os arquivos que servirão como os padrões de cada página. A pasta _site é onde fica todo o código gerado pelo jekyll. Vamos entender os includes e os layouts? SIM, CAPITÃO Abrindo o arquivo default.html da pasta _layout temos o seguinte código: Perceba que o layout default.html faz 3 usos da função {{ include }} Essa função é responsável por juntar o código de um arquivo da pasta _include. O que facilita na hora de reutilizar código, sem precisar ficar escrevendo um monte de linhas o tempo todo. Vamos abrir o arquivo index.html e ver o que há nele: OPA, MARUJOS, percebam nas 3 primeiras linhas a chamada ao layout default(default.html). Se voltarmos a visualização vamos ver tudo que o default faz por padrão no nosso site. Mas capitão, meu index.html não tem todos esses códigos que mostram na exibição do meu site, como isso acontece? Lembra da declaração de qual layout usar? E que cada layout tem suas próprias includes? então, o layout transporta todos os códigos que suas includes tiverem, para que você possa reutilizar código. Veja uma representação melhor disso tudo: E aqui uma outra forma de representar o que acontece: Que tal agora deixar isso um pouco mais legal? O título do tópico não mente, o que nós vamos criar aqui é um BLOG. Então vamos lá. Se clicar no link para o post Welcome to Jekyll! no seu localhost, vai ver que ele te leva para uma postagem. As postagens ficam na pasta _posts e aí que começa a parte complicada(nem tudo são flores). Para criar um arquivo de postagem é necessário seguir alguns padrões para que o jekyll gere da maneira correta o seu post. O arquivo deve ter o nome da seguinte maneira: ANO-MÊS-DIA-NOME-DA-POSTAGEM.EXTENSÃO Ex: 2015-05-20-Esse-topico-ta-grande.markdown Vamos criar um novo post? SIM, CAPITÃO Crie um arquivo chamado 2015-08-17-Ola-Internet.markdown Agora abra o seu localhost e veja que o jekyll já gerou o seu post OOOOH, CAPITÃO, isso já criou uma nova postagem? Não, ainda falta adicionar algum conteúdo ao arquivo do post Vamos criar algo simples como exibir Olá, forum Não entendeu o layout: post? Volta mais um pouco o tópico para entender. Vamos ver o que o navegador vai renderizar? SIM, CAPITÃO Vamos analisar o que aconteceu. 1 - O link da postagem é separado pela data. Ou sejase eu tiver mais de um arquivo com a data x, todos esses arquivos com a data x estarão da pasta que corresponde àquela data. Isso faz parte da organização do jekyll 2 - Você vai perceber que ele incluiu um título na página e uns links, isso tudo veio dos includes e layouts que já foram padronizados e que você pode alterar sempre que quiser. 3 - Renderizou também, o título da postagem, a data e o conteúdo. Tudo isso vem do layout post 4 - Ele criou todo um footer já definido na include footer.html Reutilização de código! Hell yeah! Mas então, capitão, sempre que eu quiser criar um novo post eu devo escrever o meu código(mesmo sendo pouca coisa)? Infelizmente, meu jovem marujo, sim. Mas isso vai depender do seu nível de curiosidade. Sempre haverão soluções para seus problemas na internet. Como plugins para o jekyll que automatizam algumas tarefas, algum editor de texto avançado(como o da web cheats), etc.. Bom, marinheiros, acredito que eu tenha dado uma boa introdução ao jekyll e que com isso dá pra se ter uma noção do que se pode fazer com esse poderoso gerador de páginas estáticas. Em algum post futuro eu falo um pouco mais sobre Liquid e como hospedar no github. Utilizem da curiosidade para pesquisar a respeito da ferramenta, deem uma googlada.
