5.2 KiB
title | localeTitle |
---|---|
Use Github Static Pages to Host Your Front End Projects | Use páginas estáticas do Github para hospedar seus projetos front-end |
Benefícios
Eu amo o Codepen.io, é uma ferramenta maravilhosa e fácil de usar para experimentos simples de front-end. Mas à medida que os projetos da FCC se tornaram mais complexos, percebi que codificar localmente iria me salvar um monte de dores de cabeça. Meu editor de texto e combo de código de código são apenas mais rápidos.
- autocompletar
- Compile tudo (codepen foi realmente arrastando tentando compilar Jade)
- Melhor atualização automática
- Construído em caramanchão
- Versão do Git
- Experiência aprimorada de imóveis na tela
Git para o Github
Como eu já estou salvando localmente e usando o git para controle de versão, imaginei que poderia fazer o upload para o Github. Além disso, o Github tem um fantástico serviço gratuito para projetos front-end chamados Github Pages . Basta atualizar seu repositório e suas alterações estão ativas.
Como isso funciona é simples. O Github verifica se o seu repositório tem uma ramificação chamada gh-pages
e serve qualquer código que esteja naquela ramificação. Não há coisas de back-end aqui, mas HTML, CSS e JS funcionam como um encanto.
Primeiras coisas primeiro
Vamos criar uma nova pasta para o seu projeto. Vou usar o projeto Camper News como meu exemplo.
Chegue ao seu diretório de trabalho e faça um novo. Você pode fazer isso no terminal (ou não).
Agora, entre no diretório do projeto e (com certeza no terminal desta vez) use o comando git init
. Note que este tutorial pressupõe que você tenha o git instalado .
Tudo bem, incrível. Agora estamos prontos para trabalhar.
Próximos passos
Crie alguns arquivos no seu diretório campNews. Eu não sei, talvez um index.html e provavelmente app.css e app.js, ou qualquer convenção de nomenclatura que você preferir. Coloque seu código nesses arquivos. Tudo bem, agora estamos prontos para nosso primeiro commit. Leva dois passos .
git add -A
irá preparar todos esses novos arquivos e o novo código dentro delesgit commit -m 'relevant message'
cometerá todo o trabalho que você fez para o ramo em que você está atualmente ('master' por padrão)
A chave para essa coisa toda
Ok, até agora ainda somos locais. Há algumas coisas que temos que fazer para levar o nosso trabalho e movê-lo para o github. É neste momento que gosto de trocar de ramo. Lembre-se - o github só serve de páginas gh, e se você seguiu até aqui, seu ramo é chamado de 'mestre'. Vamos criar um novo branch de páginas gh (local).
git checkout -b gh-pages
irá criá-lo, copiar todo o trabalho do mestre para o gh-pages e passar para o branch. Ufa
git branch -d master
irá se livrar do branch master. Parece loucura, eu sei, mas para que precisamos disso? Apenas pense em gh-pages como seu novo branch master.
Agora, git add -A
e git commit -m 'relevant message'
novamente, apenas no caso. E esteja preparado para deixar seu editor e terminal e entrar on-line pela primeira vez.
Vá para o seu perfil do github e crie um novo repo. Nomeie algo relevante, como campNews.
Uma vez criado, entre e pegue o URL clone HTTPS. (Ignore os arquivos na minha captura de tela, o seu repo estará vazio neste momento).
Colocando tudo junto
E você pode deixar o mundo online. De volta ao terminal! Vamos conectar nosso projeto local a este repositório do github. Tudo o que é necessário é um comando.
git remote add origin <server>
Apenas substitua o servidor pelo url HTTPS que você acabou de copiar. Então meu comando é assim:
git remote add origin https://github.com/gkobilansky/campNews.git
.
Ok, até agora nós temos:
- Criou nosso projeto
- Versioned no git
- Comprometido algumas mudanças
- Mudou para o ramo 'gh-pages'
- Conectou ao github
Último passo!
Empurre seu projeto para o github. Mais uma vez, simples:
git push origin gh-pages
Esse comando garantirá que seus commits mais recentes sejam enviados para o github. Uma vez que você tenha feito isso pelo menos uma vez, seu projeto deve estar disponível http: // username .github.io / repository , então para mim é http://gkobilansky.github.io/campNews .
Quando tudo isso for feito, o processo simplesmente se repete:
git add -A
git commit -m 'relevant message'
git push origin gh-pages
Concedida, curva de aprendizado mais íngreme do que codepen.io, mas mais rápido e mais flexível, uma vez que você pegar o jeito dele.
Codificação feliz!
PS. Graças a este guia por Roger Dudler para manter as coisas simples.