eu tenho um segredo que poupa aos meus clientes uma tonelada de dinheiro, mantém o seu site seguro, e tem backups embutidos.
The secret: I make their website static. Em seguida, eu armazená-lo e Hospedá-lo com GitHub, e usar Cloudflare para servi-lo sobre HTTPS, e torná-lo rápido. Os meus clientes só pagam pelo nome de domínio, mas recebem muito mais do que alguma vez pediram.
porquê conteúdo estático?
sites estáticos são maravilhosamente rápidos, uma vez que não há tempo de processamento do servidor envolvido., Além disso, ao cometer uma base de código de ativos estáticos em um repositório git, o retorno de mudanças simplesmente se torna uma questão de voltar a um commit anterior. Backups são um git push a distância, e você essencialmente serve o seu site inteiro a partir do cache, o que significa que o seu servidor quase nunca terá que processar um pedido novamente.construir uma interface complexa?
com o advento de frameworks front-end, como Reat e seus parentes, você pode criar experiências mágicas com nada mais do que HTML/CSS e JavaScript., Mas terás de separar a tua lógica de fundo da tua frente, mas até mesmo o Ruby on Rails com um modo API agora.
sempre que eu sou contratado para construir um site, Eu considero se um site estático é ou não suficiente para atender às necessidades do meu cliente, e em muitos casos, é.você está se perguntando que tipo de casos de uso eu tenho em mente? Muito bom! Vamos discutir algumas situações em que você pode querer considerar conteúdo estático, e explicar como esta abordagem pode salvar tanto você quanto seu cliente Tempo.,
Brochureware sites são destinados a fornecer informações sobre um negócio, e não mudar significativamente ao longo de sua vida. Uma aplicação dinâmica é claramente exagerada para esses sites, e uma vez que esses sites ficam sem manutenção por anos, recebendo poucos, se quaisquer atualizações, eles geralmente são alvos fáceis para hackers, bem, hackear.
modelos de HTML estáticos são significativamente mais baratos do que os seus homólogos do CMS, e eles são mais fáceis de ajustar no futuro. Os desenvolvedores que pediram para atualizar tais sites não necessitam de conhecimento especializado sobre um CMS particular., Como regra, eu sempre faço sites estáticos para brochureware sites.Bônus: as pequenas empresas adoram não pagar taxas de hospedagem mensais recorrentes. Concedido, hospedagem não é um custo enorme, mas os clientes apenas não têm que se preocupar em pagar nada além do domínio, o que é ótimo.
aplicações de uma só página
está a mostrar uma nova aplicação maravilhosa e fixe que depende dos quadros front-end modernos?
a sua aplicação já está praticamente estática., Tome alguns passos extras para isolar qualquer lógica do lado do servidor em uma aplicação separada, e obter o benefício total de ter seu aplicativo servido inteiramente do cache de Cloudflare.
Sua aplicação estará disponível em todos os momentos.
Blogs
esta é uma venda difícil. É difícil convencer as pessoas de que sites estáticos podem ser empregados para blogs, mas leia – me-Eu não fui longe demais.
Blogs não são nada mais do que conteúdo renderizado com modelos. Você simplesmente não precisa de uma aplicação completa processando cada pedido e rendendo uma nova página. Um site estático é perfeito para este caso de uso.,considere o Jekyll. Você dá-lhe modelos líquidos e conteúdo de marcação, e ele combina-os juntos em um site estático. Não é necessário processamento on-the-fly, e seu blog de repente se sente significativamente mais rápido.
Este fluxo de trabalho é especialmente útil porque as páginas do GitHub suportam as compilações do Jekyll. De repente, posts do blog podem ser contribuídos com pedidos pull, e todo o seu conteúdo é armazenado dentro do controle de versão. Os não-desenvolvedores ainda podem contribuir com posts no Markdown publicando seus posts através do Stackedit.
na verdade, eu estou usando Stackedit para compor este post agora mesmo!,
também, se você quiser comentários sobre suas postagens no blog, Disqus lhe dá um poderoso sistema de comentários, inserindo um trecho de JavaScript.
esta página que você está lendo também usa inquietações.
GitHub Pages
GitHub Pages is Github’s answer to project pages, and it allows you to serve any static website straight from your repository. Uma vez que as páginas do GitHub suportam domínios personalizados, você pode hospedar um site estático nas páginas do GitHub gratuitamente, com o implays diretamente do Git.
implying to GitHub Pages.Basta de conversa, vamos vê-la em acção!,
eu fui em frente e fiz uma única página Reat app que obtém e exibe a taxa de câmbio atual para a rupia paquistanesa a partir de uma API pública. Vamos enviar isto para as páginas GitHub.
Primeiro, vamos criar um novo repositório GitHub.
GitHub páginas são servidos a partir de um ramo chamado de gh-pages então, vamos criar um para o meu projeto.
And let’s push the site up:
And we’re done!, Neste ponto, o site estará disponível em com SSL livre:
notas Importantes:
- GitHub pages serve o
index.htmlarquivo no seu projetogh-pagesbranch - O site é servido em:
USERNAME.github.io/REPOSITORY-NAME
Personalizar o nome de domínio.
servir o site fora do GitHub é bom, mas qualquer site decente precisa de um nome de domínio personalizado. Felizmente, GitHub permite que você traga seu próprio domínio para a festa!,
Primeiro, vamos criar um arquivo especial CNAME e colocar o nosso nome de domínio lá. Isto permitirá ao GitHub saber qual o nome de domínio para se encaminhar para o repositório.
$ echo 'pricecheck.gilani.me' > CNAME$ git add .$ git commit -m 'Add a custom domain'...$ git push...em Segundo lugar, vamos apontar um CNAME para o nosso subdomínio para o GitHub do DNS no USERNAME.github.io:
Cuidado: NÃO use isso para um vértice domínio! Adicionar um id
gravar na raiz o seu domínio irá desactivar o seu id
eTXTregistos., Usa isto apenas para o teu subdomínio. Domínios Apex são discutidos mais tarde.
neste momento, o nosso site deve ser executado em nosso domínio personalizado em HTTP:
notas Importantes:
- por omissão
*.github.iodomínio é servido através de HTTPS. - nosso nome de domínio personalizado é servido através de HTTP inseguro.
- Não utilize um
CNAMEregistar no seu domínio apex a menos que queira matar os seus e-mails.
Limitações das páginas do GitHub:
- Os acordos de recompra devem ser inferiores a 1 GB no tamanho do ficheiro.,
- Os Websites devem ter menos de 1 GB no tamanho do ficheiro.
- O limite de largura de Banda Mensal é de 100 GB. Vamos ignorar isto mais tarde.
a Utilização de um vértice de domínio como um domínio personalizado
A maneira mais fácil de contornar esta limitação é a utilização de www como o seu subdomínio, e redirecionar todo o tráfego HTTP do ápice para www. In my example, I would redirect gilani.meto , which points to my static site, but I don’t like doing things the easy way.,
Se realmente quiser usar um domínio apex, verifique se o seu fornecedor de DNS lhe permite definir ANAME registos. Estas são (simplificado) a meio caminho entre CNAME registros, pois eles permitem que você aponte para domínios e A registros, uma vez que não invalida outros registros na mesma zona.
não ANAME? A última opção é mudar para um provedor de DNS que suporta isso: digite Cloudflare., Cloudflare provides CNAME flatening on apex domains, which is the equivalent of an ANAME record. É melhor fazer a troca agora, já que vamos cobrir a Cloudflare na próxima secção.
TLDR: mudar para DNS livres de Cloudflare e definir um CNAME no seu domínio apex. Eles fazem algo especial com o seuCNAME que o faz funcionar.
SSL e Cloudflare
Bem-vindo à era pós-Snowden., Todos os nossos piores receios de bisbilhotice e pirataria sancionada pelo governo foram confirmados, e o mundo está a tentar proteger dados em trânsito e em repouso.
Como um administrador web moderno, você deve fornecer pelo menos SSL em seu site, sem conteúdo misto.
chegou ao ponto em que o Google Chrome Marca sites HTTPS simples como inseguros e o Google Search está começando a favorecer sites HTTPS mais favoravelmente em seus rankings. Discutiremos ainda mais estratégias para tornar o front-end seguro mais tarde, mas por agora, só vamos cobrir SSL.
felizmente, agora temos que encriptar.,
é uma autoridade de certificados inteiramente automatizada e sem fins lucrativos (CA) que permite a emissão programática de certificados SSL de curto prazo de 90 dias para qualquer domínio que você controle. É uma brisa para usar; é de código aberto; e o projeto é apoiado por uma infinidade de empresas, incluindo Mozilla e a Electronic Frontier Foundation.o Cloudflare é um serviço de proteção DNS, CDN e DDoS.
ele Cache seu site, e serve aos usuários de servidores geograficamente próximos, tornando o seu site mais rápido., Ele tem o benefício adicional de mantê-lo sob o limite de largura de banda de 100GB do GitHub, porque mesmo se o seu site se torna loucamente popular, a maioria dos pedidos irá atingir o cache, e nunca chegar ao servidor.além disso, a Cloudflare oferece um serviço chamado universal SSL, onde lhe emitem um certificado SSL gratuito de seus parceiros da CA, então você recebe HTTPS de graça… para sempre.porquê a nuvem?Eu sei o que estás a pensar, Gilani, acabaste de me dizer o quão incrível é encriptar. Porque é que estás a falar da Cloudflare? Tudo se resume à simplicidade.,
Como um exercício mental, imagine configurar vários cache Nginx e proxies reversos ao redor do mundo, dando-lhes todos os certificados SSL válidos e servindo páginas web dos usuários de seus locais mais próximos.
isso resulta em seu site ser servido via SSL, mesmo que o servidor de origem não tenha um certificado SSL, embora o Cloudflare lhe dê certificados especiais auto-assinados que você pode colocar em seu servidor de origem para garantir a conexão até os servidores do Cloudflare. Isto é o que Cloudflare lhe dá com um plano gratuito, e você nem precisa renovar seu certificado a cada 90 dias.,como freelancer, recebo clientes que querem um site a funcionar o mais rápido possível. Eles não entendem ou se preocupam com questões de segurança, atormentando a web moderna, ou criptografia durante o trânsito. Alguns clientes lutam para entender a idéia de nomes de domínio, e acham irritante quando eles têm que pagar uma taxa anual de $15 “apenas para manter meu site funcionando”. Então tente explicar a eles por que eles têm que pagar por um conjunto de proxies reversos protegendo o seu site que funciona em hospedagem gratuita em si.
configurar a Cloudflare SSL
vamos sujar as mãos outra vez., A primeira coisa a fazer, mudar para roteamento de todo o seu tráfego através de Cloudflare:
a seguir, sob Crypto, definir o nível de SSL para “completo.”
forçar a” reescrita automática dos HTTPS ” para eliminar os avisos de conteúdo misto.
neste ponto, o nosso site irá trabalhar tanto em HTTP como em HTTPS. Vamos forçar os HTTPS para tudo no nosso domínio.
Tudo feito., Nosso site deve sempre carregar sobre HTTPS com uma classificação “segura” verde no Chrome.
Palavras Finais e Considerações de Segurança
Há algumas coisas que eu não abordamos acima, e eu gostaria de tomar um momento para esclarecer alguns pontos.
O astuto entre você irá apontar que existem algumas gritantes problemas de segurança com esta configuração, ou seja, que não há seguro cabeçalhos de HTTP, como:
-
Content-Security-Policy“: carrega os scripts e recursos a partir de uma lista branca de hosts, e pode impedir inline js., -
X-Frame-Options: desactiva o seu website de ser carregado numa iframe.e tens razão. As páginas do GitHub e até mesmo o Cloudflare não permitem que você personalize seus cabeçalhos HTTP. No entanto, você pode definir um CSP usando o HTMLmetatag.Basta inserir na sua página web:
<meta http-equiv="Content-Security-Policy" content="default-src https:">no Entanto, no momento, não há nenhuma maneira prática para definir o
X-Frame-Optionscabeçalho no GitHub páginas, o que significa que um invasor pode carregar sua página da web em um site especialmente criadoiframee retirar um ataque XSS., Se você é dedicado, no entanto, você pode trabalhar em torno deste problema, pedindo aos usuários para confirmar sua senha ou token 2FA em cada ação sensível, ou passando um token CSRF em cada pedido autenticado.uma grande preocupação para alguns é que ao usar os repositórios públicos gratuitos no GitHub, o seu site e código fonte está disponível para qualquer um que queira bifurcá-lo ou baixá-lo. Por isso, penso que a preocupação aqui é deslocada.
conteúdo estático não é código fonte no sentido de que não é compilado ou processado como um script antes de ser servido ao usuário., Seu usuário vai obter a mesma cópia estática exata do site se eles fossem executar um web crawler apontado em seu site. Enquanto hospedar o código em um repositório GitHub certamente torna mais fácil baixar uma cópia de seu site, ele não expõe nada que não fosse já público.
escala, escala ilimitada
as ideias apresentadas neste artigo não se limitam a hospedagem gratuita na web de pequenas aplicações.,
Você pode construir uma camada front-end baseada em um framework JavaScript moderno, conectá-lo a um Backend-as-a-Service baseado em nuvem de grande escala (BaaS), como Firebase, e criar aplicações complexas sem se preocupar com servidores, uptime, ou qualquer outro problema relacionado com a infraestrutura.a fazer um novo jogo excitante baseado na web?! Confira GameSparks, e você está pronto para ir.
usando as páginas Github como um serviço de hospedagem “padrão”, que se espera para lidar com sites de alta largura de banda, é desencorajado e não deve ser feito., Adicionar CDN Cloudflare em cima das páginas do GitHub faz esta solução funcionar. Cloudflare é muito mais do que um serviço SSL gratuito. É uma empresa com um CDN global que protege seu site de surtos e mantém a carga nas páginas GitHub minimizada.resumo, confissão, e Links
neste artigo, eu fiz com que parecesse como se tivesse publicado manualmente o meu aplicativo Reat para
gh-pages. Não fiz nada disso., Eu trabalheimastere quando chegou a hora de implantar, eu corrinpm run deployque arrancou um script de compilação e empurrou a compilaçãogh-pages. Por favor, veja a ramificaçãomasterdo meu repositório para ver como ele funciona.,Resultados
Prós:
- Instant implantação
- Fácil de colaboração
- ambiente de hospedagem Seguro
Avisos:
- Sem acesso aos cabeçalhos HTTP
- Fácil de fazer download de uma cópia do site
- GitHub conhecimento necessário
- Depende de fornecedores de tecnologia
Links: