Download hugo boilerplate - hugo boilerplate Code Download

hugo boilerplate

Outras categorias

1.0.0

Baixar

Hugo Boilerplate

Um Boilerplate de Hugo para a construção de sites modernos?

Este caldeira envolve Hugo com Gulp como seu pipeline de construção de desenvolvimento local.

PostCSS e Webpack + Babel são usados para compilação e transpilagem de CSS e JS.

O BrowSerSync é usado para fornecer uma experiência moderna de desenvolvimento local, permitindo que você visualize seu site em vários dispositivos em sincronia.

O BrowSerList é usado para configurar o suporte do navegador.

O SVG Sprite é usado para gerar um sprite SVG.

Instalação

Pré -requisitos

Para usar o Gulp, você deve ter o nó e o NPM instalado.

Configurar

Depois que os pré -requisitos forem instalados, clone o repositório da sua máquina local e, em seguida, execute:

 npm install

Isso instalará Hugo, bem como todas as dependências de nós necessárias para executar seu ambiente Hugo. Isso pode demorar um pouco!

Desenvolvimento

Todas as tarefas de desenvolvimento são executadas usando o NPM RUN. Consulte "scripts" no package.json para obter uma lista completa de comandos.

Desenvolvimento local

O desenvolvimento local é alimentado pelo BrowSync, você poderá desenvolver sites rapidamente através de:

Um servidor de desenvolvimento local em http://localhost:3000/ .
Atualizações automáticas de CSS sem recarregar a página
Página automática recarrega quando o conteúdo é alterado

Executar o servidor de desenvolvimento local é tão simples quanto em execução:

 npm start

Isso exibirá todo o conteúdo de rascunho, datado de futuro ou expirado, que não está incluído na sua construção de produção.

Se você deseja desenvolver com o site como ele aparecerá na produção, execute:

 npm run preview

Construção de produção

Para gerar uma produção final na sua máquina local, você pode executar:

 npm run build

A nova produção de produção do seu site acabará no dist/ Directory.

Comandos de Hugo

Todos os comandos da CLI de Hugo podem ser executados no NPM executando:

 npm run hugo -- <command> --<param>

Por exemplo:

 npm run hugo -- new posts/example-post.md
// => creates a new post at hugo/content/posts/example-post.md

Estrutura do projeto

 .
├── .tmp/                  // Temporary directory for development server
├── dist/                  // The production build
├── hugo/                  // The Hugo project; content, data and static files
|   ├── .forestry/         // Contains Forestry.io configuration files
|   ├── content/           // Where all site content is stored 
|   ├── data/              // TOML, YAML or JSON files containing site data 
|   ├── layouts/           // Your site's layouts
|   |   ├── partials/      // Your site's partials
|   |   └── shortcodes/    // Your site's shortcodes
|   ├── static/            // Where all static files live
|   |   ├── css/           // Where compiled CSS files live
|   |   ├── js/            // Where compiled JS files live
|   |   └── uploads/       // Where user uploads are stored
|   └── config.toml        // The Hugo configuration file
└─── src/
     ├── css               // CSS/SCSS source files to be compiled to /css/
     └── js                // JS source files to be compiled to /js/

Inline SVG

Quaisquer SVGs encontrados no src/img/ serão combinados em um único sprite SVG em hugo/static/svg/sprite.symbol.svg .

Este caldeira vem com um simples parcial para usar SVGs em seus layouts. Você pode selecionar um SVG passando seu ID.

 {{/* Using a logo stored at src/img/github.svg */}}
{{ partial "svg" (dict "id" "github" "class" "optional-class" "width" 32 "height" 32) -}}

Nota: os parâmetros class , width e height são opcionais

Teste

Este caldeira vem com configurações de ESLint e Stylelint padrão que farão com que seus CSS e JS por erros ou problemas de estilo comum, que funcionam com a maioria dos IDEs populares.

Os testes também podem ser executados na linha de comando:

JS: npm run eslint
CSS: npm run stylelint

Se você deseja corrigir automaticamente erros de LINT, também pode fazer isso na linha de comando:

JS: npm run eslint:fix
CSS: npm run stylelint:fix

Limpar

Este caldeira é auto-limpeza e removerá a produção dist/ e de desenvolvimento .tmp/ pastas sempre que um comando for executado para garantir que seu conteúdo esteja sempre atualizado.

Se você deseja limpar manualmente, execute:

 npm run clean

Configuração

Todas as tarefas de construção são tratadas pela Gulp e estão localizadas em gulpfile.babel.js . Todas as partes da compilação são configuráveis em arquivos discretos para facilitar o gerenciamento.

Caminhos

Todos os caminhos de origem e destino da construção podem ser configurados no gulp.config.js .

Hugo

Os comandos de construção do HUGP podem ser configurados no gulp.config.js . Os comandos de construção são definidos com base na variável de ambiente NODE_ENV . Opcionalmente, você pode carregar diferentes args usando a variável de ambiente GENERATOR_ARGS .

Quatro opções estão disponíveis:

default : os comandos de construção padrão que sempre são executados
development : Comandos de construção adicionais para o servidor de desenvolvimento
preview : comandos de construção adicionais para um servidor de desenvolvimento de produção
production : Comandos de construção adicionais para compilações de produção

Servidor de desenvolvimento BrowSerSync

A configuração para BrowSerSync é encontrada em .browsersyncrc.js

CSS/SASS

A configuração para PostCSS é encontrada em .postcssrc.js

JavaScript

A configuração do WebPack é encontrada em .webpackrc.js

Suporte do navegador

Tanto o PostCSS quanto o WebPack usam .browserslistrc para decidir sobre o suporte ao navegador ao compilar.

Dicas e recursos

Para aprender sobre como se desenvolver com Hugo, consulte a documentação de Hugo
Para aprender a usar o sistema de modelos de Hugo, consulte a documentação
Os arquivos estáticos devem ser armazenados na pasta hugo/static/ como devem aparecer no site construído , por exemplo, um arquivo cname deve ser armazenado em hugo/static/CNAME para se tornar /CNAME
Os arquivos JavaScript são compilados da raiz de src/js/ para js/{filename}.js
- JavaScript pode ser escrito usando ES6, suportando require() e import declarações de pacotes NPM e arquivos JS locais
Os arquivos CSS são compilados a partir da raiz de src/css/ para css/{filename}.css
- As declarações de importação são resolvidas e incluídas nos arquivos CSS compilados
Para compatibilidade com silvicultura ou outros CMSs, verifique se os arquivos CSS e JS compilados na hugo/ Pasta estão sempre comprometidos
As variáveis de ambiente são fornecidas aos seus modelos, que podem ser acessados em modelos da seguinte forma: {{ getenv "HUGO_ENV" }}
- Para oleodutos de desenvolvimento, isso é igual ao development
- Para oleodutos de produção, isso é igual à production
- Para o recurso de visualização no aplicativo da Forestry, isso é igual a staging

Usando com silvicultura

Este repositório vem com um exemplo básico de conteúdo pré-configurado para trabalhar com a silvicultura, que você pode usar para começar a criar seu site.

Bire este repositório para sua conta
Inscreva -se para uma conta florestal e importe este repositório como um "site existente"
Quando solicitado pela "raiz do projeto", entre hugo