Download hugoplate - download do código-fonte hugoplate

hugoplate

Outras categorias

1.0.0

Baixar

Hugo + Tailwind CSS Starter e Boilerplate

Hugoplate é um modelo inicial gratuito criado com Hugo e TailwindCSS, que fornece tudo que você precisa para iniciar seu projeto Hugo e economizar um tempo valioso.

Feito com ♥ por Zeon Studio

Se você achar este projeto útil, dê-lhe um para mostrar seu apoio.

Demonstração | Velocidade da página (95+)

O que está incluído

Incluímos quase tudo que você precisa para iniciar seu projeto Hugo. Vamos ver o que está incluído neste modelo:

Principais recursos

Vários autores
Sugestão de postagens semelhantes
Funcionalidade de pesquisa
Modo escuro
Tags e categorias
Configuração Netlify pré-configurada
Formulário de contato de suporte
Totalmente responsivo
Escreva e atualize conteúdo em Markdown
Comentário do Disqus
Destaque de sintaxe

Mais de 15 páginas pré-projetadas

Página inicial
Sobre
Contato
Autores
Autor único
Blogue
Blog Único
Personalizado 404
Elementos
política de Privacidade
Etiquetas
Marcação única
Categorias
Categoria Individual
Procurar

Pilha de tecnologia

Hugo
CSS do vento favorável
PósCSS
LimparCSS
AutoPrefixador
Módulos Hugo por Gethugothemes
Remarcação
Mais bonito
Jshint
Netlificar
Vercel
Ações do Github
Gitlab Ci
AWS Amplificar

Começando

Primeiro você precisa clonar ou baixar o repositório de modelos e, em seguida, vamos começar com o seguinte processo:

Pré-requisitos

Para começar a usar este template, você precisa ter alguns pré-requisitos instalados em sua máquina.

Hugo Estendido v0.124+
Nó v20+
Vá v1.22+

Configuração do projeto

Construímos este script personalizado para facilitar a configuração do seu projeto. Ele criará uma nova pasta de tema Hugo e clonará o tema Hugoplate nela. Em seguida, mova a pasta exampleSite para o diretório raiz. Para que você possa iniciar seu servidor Hugo sem entrar na pasta exampleSite. Use o seguinte comando para configurar seu projeto.

 npm executa configuração do projeto

Instalar dependências

Instale todas as dependências usando o seguinte comando.

 instalação npm

Comando de Desenvolvimento

Inicie o servidor de desenvolvimento usando o seguinte comando.

 npm executar dev

Ainda confuso? Assista a um vídeo rápido

hugoplate-configuração rápida.mp4

Personalização

Este modelo foi projetado com muitas opções de personalização em mente. Você pode personalizar quase tudo que quiser, incluindo:

Configuração do site

Você pode alterar o título do site, URL base, idioma, tema, plug-ins e muito mais no arquivo hugo.toml .

Parâmetros do site

Você pode personalizar todos os parâmetros do arquivo config/_default/params.toml . Isso inclui logotipo, favicon, pesquisa, metadados de SEO e muito mais.

Cores e fontes

Você pode alterar as cores e fontes do arquivo data/theme.json . Isso inclui a cor primária, a cor secundária, a família da fonte e o tamanho da fonte.

Links Sociais

Você pode alterar os links sociais no arquivo data/social.json . Adicione seus links sociais aqui e eles serão exibidos automaticamente no site.

Uso Avançado

Adicionamos alguns scripts personalizados para facilitar sua vida. Você pode usar esses scripts para ajudá-lo em seu desenvolvimento.

Atualizar tema

Se quiser atualizar o tema, você pode usar o seguinte comando. Isso atualizará o tema para a versão mais recente.

 npm execute tema de atualização

Nota: Este comando funcionará após executar o script project-setup .

Atualizar Módulos

Adicionamos muitos módulos a este modelo. Você pode atualizar todos os módulos usando o seguinte comando.

 npm executa módulos de atualização

Remover modo escuro

Se quiser remover o modo escuro do seu projeto, você pode usar o seguinte comando para remover o modo escuro do seu projeto.

 npm execute remove-darkmode

Nota: Este comando funcionará antes de executar o script project-setup . Se você já executou o comando project-setup , precisará executar npm run theme-setup primeiro e, em seguida, poderá executar este comando. depois, você pode executar npm run project-setup novamente.

Construir e implantar

Depois de terminar o desenvolvimento, você poderá construir ou implantar seu projeto em quase todos os lugares. Vamos ver o processo:

Comando de construção

Para construir seu projeto localmente, você pode usar o seguinte comando. Ele limpará todo o CSS não utilizado e reduzirá todos os arquivos.

 npm executar compilação

Implantar site

Fornecemos 5 configurações diferentes de plataforma de implantação com este modelo, para que você possa implantar facilmente.

Netlificar
Vercel
Ações do Github
Gitlab Ci
AWS Amplificar

E se você quiser hospedar outras plataformas de hospedagem. então você pode construir seu projeto e obter uma pasta public . que você pode copiar e colar em sua plataforma de hospedagem.

Nota: Você deve alterar o baseURL no arquivo hugo.toml . Caso contrário, seu site não funcionará corretamente.

Guia para permanecer em conformidade

Relatando problemas

Usamos GitHub Issues como rastreador de bugs oficial para este modelo. Por favor, pesquise os problemas existentes. É possível que alguém já tenha relatado o mesmo problema. Se o seu problema ou ideia ainda não foi abordado, fique à vontade para abrir um novo fascículo.