Publique um site sem código em 10 minutos

A solução sem código, sem software e sem custo para publicar sites sofisticados gerenciados por pessoas não técnicas. Pegue o Projeto GitHub ou Siga-nos no Twitter.

Sir Issac Newton descobriu a lei da gravidade ao praticar o “distanciamento social” durante a Praga. O que você faria? Um lado positivo da quarentena é que todo esse tempo livre desperta o espírito empreendedor e a criatividade em nós! No entanto, principalmente por causa da quarentena, agora mais do que nunca, qualquer nova idéia ou projeto deve ter um site. Soluções tradicionais de CMS, como WordPress, Squarespace ou Wix, são difíceis de usar, ou parecem datadas, caras ou todas as opções acima!

Queremos criar um site que tenha uma aparência sofisticada, mas que seja fácil de personalizar. Uma pessoa não técnica deve poder editar os arquivos de origem e ver as alterações no site ao vivo em alguns minutos. Idealmente, também deve ser gratuito (para sempre gratuito, não apenas gratuito por enquanto) e pode ser dimensionado para lidar com milhões de visitantes, caso se torne popular. Isso é possível? Neste breve artigo, mostrarei uma solução baseada na estrutura Hugo, GitHub Pages e GitHub Actions. Você pode começar a trabalhar com seu novo e brilhante site até o final deste artigo.

É tão fácil que meu filho de 9 anos fez isso. Ele agora gerencia um site para seu país fictício chamado Arenztopia. Confira.

TL; DR

Se você deseja apenas iniciar um site em funcionamento o mais rápido possível, primeiro verifique se você possui uma conta gratuita no GitHub.

Vamos para este repositório do GitHube clique no botão “Forquilha” no canto superior direito e garfo na sua própria conta.

Vá para o seu repositório bifurcado e clique na guia Ações. Você verá uma mensagem como a seguinte. Clique em o botão “Eu entendo meus fluxos de trabalho …”.

Vá para a guia Configurações do seu repositório e role para baixo até Páginas do GitHub. Selecione novamente a gh-pages a partir do menu suspenso para a criação do site.

Vá para a guia Código do repositório, abra o config.toml arquivo e edite-o. mudança Está title atribuir a outra coisa e clique no botão “Confirmar alterações” na parte inferior. Precisamos desta etapa para acionar o fluxo de trabalho no novo repositório.

Aguarde alguns minutos, vá para o endereço “publicado em” nas páginas do GitHub e você verá o site modelo.

Em seguida, você pode personalizar o site editando o config.toml arquivo e os arquivos no content pasta. Vá para a seção “Adicione seu próprio conteúdo” no final deste artigo para ver como. Você pode conferir as instruções para o tema Ananke aqui.

É isso para o início rápido! Nas próximas seções, explicarei com mais detalhes os conceitos e processos.

Hugo basics

As soluções CMS de geração mais antiga, como o WordPress, são muito difíceis de se adaptar aos novos designs de sites, e as soluções hospedadas comercialmente, como o SquareSpace, são muito caras e pouco flexíveis. Os geradores de sites estáticos, como Hugo, oferecem um bom equilíbrio entre recursos, flexibilidade e facilidade de criação.

• Os sites da Hugo podem ser personalizados e modificados através de arquivos de configuração.
• Novas páginas e seções de conteúdo podem ser escritas em descontos, em vez de HTML. Isso facilita muito a criação de conteúdo.
• Existem muitos temas de design moderno para você escolher.
• A saída de Hugo é um site HTML estático que pode ser implantado em qualquer provedor de hospedagem de baixo custo.
• Juntamente com serviços estáticos de hospedagem de sites, como o GitHub Pages e o Netlify, eles podem oferecer uma solução totalmente gratuita.

A distribuição do software Hugo é acessível em todos os principais sistemas operacionais. Você pode aprenda aqui. Porém, como usaremos as Ações do GitHub para criar automaticamente nossos sites da Hugo, não precisamos instalar o software da Hugo aqui. Aqui está como fazê-lo.

Crie um site modelo

Primeiro, selecione um tema Hugo. tem muitos. Alguns são voltados para sites com uma ou mais páginas de conteúdo, enquanto outros são otimizados para sites semelhantes a blogs com postagens com timestamp.

Encontre o que você gosta, baixe um pacote zip ou clone um repositório do GitHub e descompacte o tema em uma pasta. Vamos supor que a distribuição do tema seja descompactada em uma pasta chamada my-theme. A seguir, são apresentados comandos em um terminal Linux. Você pode usar o aplicativo Terminal no Mac ou PowerShell no Windows.

Em seguida, crie o diretório do projeto do seu site no seu computador.

$ mkdir -r my-site/themes

Copie a pasta do tema no seu projeto.

$ cp -r my-theme my-site/themes

Em seguida, copie o tema exampleSite para o diretório de nível superior do projeto.

$ cd my-site$ cp -r themes/my-theme/exampleSite/* ./

Edite o config.toml no diretório raiz do projeto my-site/ para apontar para o tema certo.

baseURL = "/"themesDir = "themes"theme = "my-theme"

Em seguida, crie um repositório GitHub chamado my-sitee empurre o my-site diretório em seu master ramo. Aqui estão as etapas para fazendo upload de arquivos da interface do usuário da web do GitHub. Agora estamos prontos para publicar o site de exemplo de tema.

Para que um sistema baseado em Hugo seja utilizável por um não desenvolvedor (ou um jovem desenvolvedor que ainda domina as ferramentas de linha de comando), precisamos automatizar o processo de criação e implantação do site estático.

Automatizar a implantação

No projeto GitHub, vá para Configurações e ative as Páginas do GitHub. Selecione a fonte para ser o gh-pages ramo.

Em seguida, criamos um fluxo de trabalho Ações do GitHub para executar o comando Hugo nos arquivos de origem de master ramifique e envie os arquivos HTML gerados para o diretório gh-pages ramo para publicação. Na guia Ações do projeto, clique no botão “configurar você mesmo um fluxo de trabalho”.

O fluxo de trabalho é armazenado no master ramificar como .github/workflows/main.yml Arquivo. O conteúdo do arquivo é o seguinte.

name: github pageson:  push:    branches:      - masterjobs:  deploy:    runs-on: ubuntu-18.04    steps:      - uses: actions/checkout@v1  # v2 does not have submodules option now        # with:        #   submodules: true      - name: Setup Hugo        uses: peaceiris/actions-hugo@v2        with:          hugo-version: '0.62.2'          extended: true      - name: Build        run: hugo      - name: Deploy        uses: peaceiris/actions-gh-pages@v3        with:          github_token: ${{ secrets.GITHUB_TOKEN }}          publish_dir: ./public

O que acontece aqui é que os autores e editores do site alteram o conteúdo e os arquivos no master ramo. Sempre que novo conteúdo é enviado para o master ramo, o fluxo de trabalho automatizado de ações do GitHub será configurar o software Hugo, execute o hugo comando e transforme esses arquivos em arquivos HTML para um site estático. Os arquivos HTML são empurrado ao gh-pages ramo do mesmo repositório. Eles serão publicados no endereço da Web especificado pelo GitHub Pages, conforme configurado.

Observe o cname atributo na última linha. Esse é o nome de domínio personalizado nós configuramos com as páginas do GitHub. Se você não possui um nome de domínio personalizado, remova esta linha e poderá acessar seu site no domínio fornecido pelas páginas do GitHub.

Agora vá ao site e você verá a página padrão do tema.

Adicione seu próprio conteúdo

Para alterar o site do tema padrão para o seu próprio conteúdo, você só precisa alterar os arquivos no master ramo. Por favor, consulte o documentação do seu tema selecionado. Em geral, os modelos Hugo funcionam da seguinte maneira.

• As páginas da web são criadas no formato de descontos e os md arquivos estão no content pasta.
• Cada md o arquivo tem uma seção de cabeçalho com propriedades como posicionamento do menu da página, prioridade, carimbo de data e hora, trecho etc.
• A configuração geral, como itens de menu e propriedades usadas por várias páginas, são armazenadas no data pasta.
• Conteúdo estático, como arquivos HTML não processados, arquivos JavaScript e arquivos de imagem, pode ser colocado no diretório static pasta.

Em particular, aqui está como você personaliza o tema Ananke que acompanha o nosso modelo.

• o config.toml O arquivo permite configurar o título do site, os ícones sociais em todas as páginas e a grande imagem em destaque na página inicial.
• Todas as imagens devem ser carregadas no estático / imagens pasta.
• o content / _index.md O arquivo contém o texto da página inicial.
• Para adicionar páginas ao site, você pode simplesmente criar remarcação arquivos no conteúdo pasta. Um exemplo é o contact.md Arquivo. Observe que, na parte superior do arquivo, existem atributos para controlar se essa página deve estar no menu do site.
• Para adicionar artigos ao site, você pode criar arquivos de remarcação no conteúdo / postagem pasta. Esses são artigos de conteúdo semelhantes a blogs com datas e títulos no topo. Os dois artigos mais recentes serão exibidos na página inicial.

Se você estiver interessado em aprender mais e ver como fizemos isso, assista ao nosso progresso em

Boa sorte e mantenha-se saudável!

Sobre o autor

Dr. Michael Yuan é o autor de 5 livros em engenharia de software. Seu último livro Criando aplicativos Blockchain foi publicado por Addison-Wesley em dezembro de 2019. Você pode começar com seu primeiro aplicativo da web descentralizado em 5 minutos usando o BUIDL IDE online (com tutoriais do livro)

Ele também é o CEO da Segundo Estado, uma empresa que se concentra em trazer as tecnologias WebAssembly e Rust para aplicativos em nuvem, blockchain e IA.

Antes do Segundo Estado, o Dr. Yuan colaborou por muito tempo em código aberto na Red Hat, JBoss e Mozilla.

Fora do software, o Dr. Yuan é um pesquisador principal nos Institutos Nacionais de Saúde, com vários prêmios de pesquisa em pesquisas sobre câncer e saúde pública. Ele é PhD em astrofísica pela Universidade do Texas em Austin.