create static site Download - create static site Download do código-fonte

create static site

Outras categorias

1.0.0

Baixar

Criar site estático

Crie sites estáticos sem configuração de construção.

Visão geral

 npx create-static-site my-site --template hugo
cd my-site
npm start

(npx vem com npm 5.2+ e superior)

Em seguida, abra http://localhost:3000/ para ver seu aplicativo.

Criando um site estático

Você precisará ter Node >= 6 em sua máquina de desenvolvimento local . Você pode usar nvm (macOS/Linux) ou nvm-windows para alternar facilmente as versões do Node entre diferentes projetos.

Para criar um novo aplicativo, execute:

npx create-static-site my-site --template [template]

Substitua [template] por hugo ou jekyll .

Ele criará um diretório chamado my-site dentro da pasta atual.
Dentro desse diretório, irá gerar a estrutura inicial do projeto e instalar as dependências transitivas:

 my-site
├── LICENSE
├── node_modules
├── package.json
├── README.md
├── static-scripts.config.js
├── .browserslistrc
├── .eslintrc.yml
├── .gitignore
├── .postcssrc.js
├── .stylelintrc.yml
├── site/ # Depends on the static site generator
└── src/
    ├── css/
    │   ├── styles.css
    │   └── imports
    │       └── resets.css
    ├── img/
    │   └── svg/
    │       ├── bitbucket.svg
    │       ├── github.svg
    │       └── gitlab.svg
    └── js/
        ├── scripts.js
        └── imports/
            └── index.js

Nenhuma configuração ou estruturas de pastas complicadas, apenas os arquivos que você precisa para construir seu site.
Assim que a instalação estiver concluída, você pode abrir a pasta do seu projeto:

 cd my-site

Dentro do projeto recém-criado, você pode executar alguns comandos integrados:

`npm start` ou `yarn start`

Os usuários do Jekyll precisarão executar bundle install primeiro

Executa o aplicativo em modo de desenvolvimento.
Abra http://localhost:3000 para visualizá-lo no navegador.

A página será recarregada automaticamente se você fizer alterações no código.

`npm build` ou `yarn build`

Constrói o site para produção na pasta dist .

Filosofia

Uma dependência: há apenas uma dependência de construção. Ele usa Webpack, Babel, ESLint, PostCSS e outros projetos incríveis, mas oferece uma experiência de curadoria coesa sobre eles.
Nenhuma configuração necessária: você não precisa configurar nada. Uma configuração razoavelmente boa de compilações de desenvolvimento e produção é feita para você, para que você possa se concentrar na escrita do código.
Sem bloqueio: você pode “ejetar” para uma configuração personalizada a qualquer momento. Execute um único comando e todas as dependências de configuração e construção serão movidas diretamente para o seu projeto, para que você possa continuar de onde parou.

O que está incluído?

Seu ambiente terá tudo que você precisa para construir um site estático moderno:

Um gerador de site estático (Jekyll ou Hugo)
Extras de linguagem além do ES6, como operador de propagação de objetos.
CSS com prefixo automático
Atualizações descomplicadas para as ferramentas acima com uma única dependência.

A desvantagem é que essas ferramentas são pré-configuradas para funcionar de uma maneira específica . Caso seu projeto precise de mais customização, você pode “ejetá-lo” e customizá-lo, mas depois será necessário manter essa configuração.

Sites estáticos

Sites estáticos são sites criados com arquivos estáticos e imutáveis. Como o conteúdo é estático, entregá-lo aos usuários não requer tempo de processamento do servidor. Esse recurso torna os sites estáticos incrivelmente rápidos e com desempenho.

Os geradores de sites estáticos são a forma moderna de construir sites estáticos. Eles convertem arquivos de conteúdo simples baseados em texto em arquivos estáticos prontos para a web.

Eles são fantásticos para desenvolvedores porque são extremamente rápidos, são desenvolvidos para funcionar com controle de versão e exigem pouca ou nenhuma configuração em comparação com soluções CMS monolíticas existentes, como Wordpress.

Atualmente, create-static-site oferece suporte a dois geradores de sites estáticos:

Jekyll é o gerador de sites estáticos escrito em Ruby e criado pelo fundador do GitHub, Tom Preston Werner.
Hugo é o gerador de sites estáticos escrito em GoLang e criado por Steve Francia.