Andaime Jekyll para iniciar novos sites. https://marcanuy.github.io/jekyll-skeleton/
Índice
Este é um site Jekyll básico criado com jekyll new --blank
(sem temas ou postagens de exemplo) para servir como ponto de partida para qualquer site.
Seu objetivo é iniciar rapidamente novos sites clonando este repo e customizando de acordo com suas necessidades, já tendo todos os recursos que eu estava adicionando e configurando toda vez que criava uma nova instância do Jekyll.
A demonstração ao vivo parece tão " minimalista " porque não utiliza nenhum tema e seu único objetivo é mostrar o design de navegação do site e como adicionar posts/categorias.
Sua estrutura usa o design descrito nos artigos Como adicionar Bootstrap 4 ao Jekyll da maneira certa, Jekyll multilíngue sem plug-ins e Como implementar breadcrumbs em um site Jekyll com categorias aninhadas aplicados em uma instância em branco do Jekyll com as sugestões fornecidas pelos plug-ins abaixo.
Basta clonar este repositório e começar a construir o seu.
git clone [email protected]:marcanuy/jekyll-skeleton.git
Gera automaticamente em cada compilação do jekyll :
/sitemap.xml
/feed.xml
. SASS e fácil customização de variáveis do Bootstrap 4 em /assets/main.scss
e /_sass/_variables.scss
.
Adiciona automaticamente tags de metadados para motores de busca e redes sociais
Título da página, com título ou descrição do site anexado
<head>
<title>...</title>
</head>
Descrição da página
<head>
<meta name="description" content="..."/>
</head>
URL canônico
<link rel="canonical" href="..."/>
URLs seguintes e anteriores em páginas paginadas
Site JSON-LD e metadados de postagem para indexação mais rica
<meta property="fb:app_id" content="1822851531277021"/>
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "WebPage",
"headline": "...",
"description": "...",
"url": "..."}</script>
Título, descrição, título do site e URL do Open Graph (para Facebook, LinkedIn, etc.)
<meta property="og:title" content="..."/>
<meta name="description" content="..."/>
<meta property="og:description" content="..."/>
<meta property="og:url" content="..."/>
<meta property="og:site_name" content="..."/>
<meta property="og:type" content="..."/>
<meta property="article:published_time" content="..."/>
<meta property="fb:app_id" content="..."/>
Metadados do cartão de resumo do Twitter
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="..."/>
<meta name="twitter:creator" content="..."/>
Multilíngue
Menu de navegação de idiomas de cada página para todas as outras versões de tradução
<a hreflang="es" href="http://example.com/es/foobar" />
<a hreflang="de" href="http://example.com/de/foobar" />
<a hreflang="en" href="http://example.com/en/foobar" />
Elementos de link alternativos na seção head
do HTML
<link rel="alternate" hreflang="es" href="http://example.com/es" />
<link rel="alternate" hreflang="de" href="http://example.com/de" />
<link rel="alternate" hreflang="en" href="http://example.com/en" />
Redireciona da subpasta de idioma padrão para a página inicial do site ( /en
-> /
)
Breadcrumbs para páginas e postagens
<!-- url: /jekyll-skeleton/en/example-post -->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/jekyll-skeleton/"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li class="breadcrumb-item ">
<a href="/jekyll-skeleton/en">en</a>
</li>
<li class="breadcrumb-item active">
Example Post
</li>
</ol>
jekyll-skeleton foi construído com os seguintes princípios em mente:
jekyll-seo-tag
.git clone https://github.com/marcanuy/jekyll-skeleton
cd jekyll-seleton
make install
make serve
Adicione o idioma a _config.yml
:
defaults:
#languages
-
scope:
path: ""
values:
lang: "en"
layout: default
-
scope:
path: "es"
values:
lang: "es"
Seu nome é _data/locales.yml
e um equivalente para cada página no idioma em /_data/map.yml
:
-
en: index.html
es: es/index.html
-
en: about.html
es: es/acerca.html
Adicione uma postagem em cada idioma localizado no subdiretório de idiomas: /en
, es
, etc.
As seguintes propriedades no front-matter das postagens são usadas:
---
title: # jekyll-seo-tag - The title of the post, page, or document
description: # jekyll-seo-tag - A short description of the page's content
image: # jekyll-seo-tag - URL to an image associated with the post, page, or document (e.g., /assets/page-pic.jpg)
author: # jekyll-seo-tag - Page-, post-, or document-specific author information (see below)
lang: # jekyll-seo-tag - Page-, post-, or document-specific language information
---
Jekyll-skeleton usa os seguintes plug-ins:
Se quiser hospedar um site derivado deste repositório no Github, você pode seguir este guia: Implantação automatizada de sites Jekyll em páginas do Github com um Git Push para o Github.
$ fazer construir rm -fr _site/ rm -fr ativos/fornecedor/ #do fio rm -fr ativos/fontes #fontawesome dependência rm -fr.sass_cache bundle install --path fornecedor/empacotador Aviso: a versão em execução do Bundler (1.13.6) é mais antiga que a versão que criou o lockfile (1.15.0). Sugerimos que você atualize para a versão mais recente do Bundler executando `gem install bundler`. Usando Ruby simultâneo 1.0.5 Usando i18n 0.8.1 Usando o miniteste 5.10.2 Usando thread_safe 0.3.6 Usando public_suffix 2.0.5 Usando o colorador 1.1.0 Usando colorido 1.2 Usando ffi 1.9.18 Usando 2.6.0 estendido para encaminhamento Usando mercenário 0.3.6 Usando mini_portile2 2.1.0 Usando paralelo 1.11.2 Usando grito 2.0.7 Usando atrevimento 3.4.24 Usando rb-fsevent 0.9.8 Usando kramdown 1.13.2 Usando líquido 3.0.6 Usando rouge 1.11.1 Usando safe_yaml 1.0.4 Usando o empacotador 1.13.6 Usando tzinfo 1.2.3 Usando endereçável 2.5.1 Usando ethon 0.10.1 Usando rb-inotify 0.9.8 Usando pathutil 0.14.0 Usando nokogiri 1.7.2 Usando jekyll-sass-converter 1.5.0 Usando suporte ativo 5.1.1 Usando o tifo 0.8.0 Usando ouvir 3.0.8 Usando jekyll-toc 0.2.1 Usando o html-proofer 3.7.2 Usando jekyll-watch 1.5.0 Usando jekyll 3.4.3 Usando jekyll-feed 0.9.2 Usando jekyll-redirect-from 0.12.1 Usando jekyll-seo-tag 2.2.3 Usando jekyll-sitemap 1.1.1 Pacote completo! 7 dependências Gemfile, 38 gems agora instaladas. As gemas agrupadas são instaladas em ./vendor/bundler. instalação de fio instalação de fio v0.24.5 [1/4] Resolvendo pacotes... sucesso Já atualizado. Feito em 0,38s. mkdir -p ativos/fornecedor/ cp node_modules/font-awesome/css/font-awesome.min.css assets/vendor/ cp -r node_modules/font-awesome/fonts assets cp node_modules/jquery/dist/jquery.min.js assets/vendor/ cp node_modules/tether/dist/js/tether.min.js assets/vendor/ cp node_modules/bootstrap/dist/js/bootstrap.min.js assets/vendor/ pacote executivo jekyll build Arquivo de configuração: /tmp/jekyll-skeleton/_config.yml Fonte: /tmp/jekyll-skeleton Destino: /tmp/jekyll-skeleton/_site Compilação incremental: desabilitada. Habilite com --incremental Gerando... feito em 5.474 segundos. Regeneração automática: desabilitada. Use --watch para ativar. $ árvore -L 3 _site/ _site/ ├── ativos │ ├── fontes │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── main.css │ └── fornecedor │ ├── bootstrap.min.js │ ├── font-awesome.min.css │ ├── jquery.min.js │ └── tether.min.js ├── de │ ├── beispiel-post.html │ ├── index.html │ └── categoria inferior1 │ ├── index.html │ └── post-in-unterkategorie.html ├── implantar_key.enc ├── pt │ ├── exemplo-post.html │ ├── index.html │ └── subcategoria1 │ ├── index.html │ └── post-in-subdirectory.html ├── es │ ├── index.html │ ├── post-ejemplo.html │ └── subcategoria1 │ ├── index.html │ └── post-pt-subdirectorio.html ├── feed.xml ├── index.html ├── LICENÇA ├── pacote.json ├── README.md ├── robots.txt ├── mapa do site.xml └── fio.lock 9 diretórios, 32 arquivos $ fazer cheque pacote executivo jekyll médico Arquivo de configuração: /tmp/jekyll-skeleton/_config.yml Os resultados do seu teste chegaram. Tudo parece bem. pacote exec htmlproofer --check-html --http-status-ignorar 999 --internal-domains marcanuy.github.io,localhost:4000 --assumir-extensão _site Executando ["ScriptCheck", "LinkCheck", "HtmlCheck", "ImageCheck"] em ["_site"] em *.html... Verificando 14 links externos... Executei em 13 arquivos! O HTML-Proofer foi concluído com sucesso.
Sinta-se à vontade para abrir questões e/ou contribuir!