Como fazer um site institucional / blog / portfolio em 2019?

[rubenmarcus]

Olá pessoal tudo bem?
Essa é uma duvida de um dev que trabalhou 2/3 anos fazendo sites wordpress , (com temas) entre 2013 / 2016, e perdeu o bonde do JS, e de 2 anos pra cá venho retomando.

Recentemente, tive um projeto, o site novo da empresa que trabalho, e o dono queria que fosse gerenciavel ( o atual é estatico e era editado pelos fronts da equipe), ai logo pensei: WordPress é claro!!

Mas ai tentei fazer WP Rest API + Front em Next.js (React SSR). Sei que tem CMS em Node, mas como eu tinha um prazo curto e mais exp. com WP , fui no WordPress.

Sei que a maioria dos freelas pra muita gente é esse tipo de site. Então queria saber, quais as opções que temos agora em 2019, e qual a melhor em questão de custos, performance, SEO , e manutenção.

Eu curti fazer o WP Headless, mas pra publica o servidor express na Amazon EC2 foi um pé no saco, muito mais dificil que subir um tema do WordPress. E nem fui eu que fiz, quem fez foi o backend da minha equipe, mas foi legal porque eu to aprendendo a mexer com Amazon e Docker, e nunca tinha mexido.

Além dessas opções, usar uma plataforma tipo Jekyll seria uma boa??

Quais outras existem?

Vale a pena fazer Angular + firebase?

Eu to perguntando porquê eu vou fazer 2 portfolios pessoais meus,
o meu de front que era um json que eu editava na mão e lia com Angular 1.3 ( fiz em 2014)
e o meu de fotografia, onde quero ter um blog também, além das fotos que eu tiro.

E talvez de algum freela que role mais pra frente.

Valeu abraço.

[thiamsantos]

@rubenmarcus hoje em dia eu não vejo motivo para um site institucional ter backend, o conteúdo é alterado com uma frequência tão pequena que não compensa o overhead. Eu prefiro ir de um gerador de site estático, temos várias opções boas jekyll, hugo, gatsby, metalsmith. E de CMS headless tem alguns também, alguns pagos outros com planos limitados, mas as vezes mais vale pagar um desse do que pagar uma infra. Mas o Wordpress API também uma opção boa. E para deploy de front eu iria de netlify ou algum serviço semelhante.

Os fronts aqui da empresa geralmente vão de gatsby (porque dá para aproveitar os componentes do produto no site institucional, design system e tal) deployado no netlify. E o conteúdo depende do caso, mas acho que todas as opções são válidas. Se o cliente já usa wordpress acho tranquilo, se ele não se importa de usar um SaaS é tranquilo também. O netlify também tem um cms próprio também.

Nesse site do JAMstack tem bastante informações sobre esse assunto de site estático e tal.

[rubenmarcus]

Opa @thiamsantos eu já tinha visto o gatsby e achado interessante, vou dar uma olhada, pra mostrar pro meu cliente eu usei o WeDeploy, enquanto me ajudam a mexer na Amazon.

O bom do WordPress que ele tem plugins pra configurar a API e eu deixo ela como eu quiser.

os Outros CMS, não tenho ideia mesmo. Sei que muita gente usa o Ghost.

Eu tenho meu portfolio de Front pra refazer ,meu de fotografia pra fazer e dois sites de clientes que estão no bluehost, estou pensando em migrar tudo pra Amazon, e o serviço de email, existem alguns gratuitos para dominio. (Utilizamos da BlueHost)

a Blue Host é barata, mas tem deixado a desejar em algumas coisas...

[rubenmarcus]

@thiamsantos Mas quando você usa um CMS Headless, já se pressupoe que voce terá um backend em Node pro SSR no front certo? Por questões de SEO e tudo mais?

Algo que é meio obscuro pra mim ainda é sobre sites em front SPA e SEO ...

[thiamsantos]

@rubenmarcus o front vai ser gerado completamente em html estático. Por questões de performance e necessidade não vale a pena fazer front de site instucional com SPA. Eu curto bastante a abordagem do gatsby, ele gera o html de cada página separadamente dai você ganha em SEO, mas na navegação do cliente de uma página para outra, eh tudo SPA, dai o cliente tem o melhor de velocidade. Mas caso seja usado um outro static site generator é gerado o html final de todas as páginas, então não precisa de backend. Você só precisa de um CDN como o netlify para servir os arquivos estáticos. O único backend que você talvez tenha é o da API do CMS em si. Dai você teria que seta um webhook que toda vez que tiver uma atualização de conteudo o site é inteiramente rebuildado e novos htmls são gerados. O netlify e a maioria dos SaaS de CMS headless já tem isso, não sei como é no wordpress.

[rubenmarcus]

Certo, mas Jekyll, etc etc, tem painel de CMS? pergunto isso, porque eu nunca mexi com esses geradores estaticos, e me imaginando abrindo o VS Code e editando, já que não tem um banco de dados por tras tipo um WP

[thiamsantos]

@rubenmarcus nenhum deles tem painel de CMS. Eles são apenas o site. Você teria um CMS normal com painel para edição de conteúdo, só que em vez de o CMS gerar o html final do site, ele apenas exporia uma API para que esse conteúdo tenha acesso. Dai o gerador de site estático na hora de buildar se conectaria na API, buscaria o conteúdo e geraria as páginas de acordo com o conteúdo vindo das APIs. Não sei como que é o suporte do jekyll para isso, de buscar de uma API, mas com certeza deve ter uma gem para isso. Essas páginas seriam servido de forma estática. Dai você configuraria um webhook para que toda vez que tivesse uma alteração de conteúdo fosse triggado um novo build, para que o site tenha sempre o conteúdo atualizado.

[rubenmarcus]

@thiamsantos Entendi, mas ai pra gerar o build vc precisa de um Back-end pro Front em jekyll do mesmo jeito ou não?

E teria que por alguma conf. na API ou algum lugar que por exemplo, Posts de Um blog, ele ia pegar e gerar é isso ? Pq hje no Next no Express

se liga meu server.js:

   const server = express();
        server.use(compression())
        server.get("/blog/:slug", (req, res) => {
            const actualPage = "/post";
            const queryParams = { slug: req.params.slug, apiRoute: "blog" };
            app.render(req, res, actualPage, queryParams);
        });

        server.get("/page/:slug", (req, res) => {
            const actualPage = "/post";
            const queryParams = { slug: req.params.slug, apiRoute: "page" };
            app.render(req, res, actualPage, queryParams);
        });

        server.get("/_preview/:id/:wpnonce", (req, res) => {
            const actualPage = "/preview";
            const queryParams = { id: req.params.id, wpnonce: req.params.wpnonce };
            app.render(req, res, actualPage, queryParams);
        });

        server.get("*", (req, res) => {
            return handle(req, res);
        });

Ele pega automatico..

[ghost]

Gatsby + Netlify CMS é uma boa também! 🙂

[fakenickels]

Gatsby + NetlifyCMS + Hospedagem no próprio Netlify recomendo 1000%

[israelcena]

Além do NetlifyCMS, o próprio Netlify tem uns recursos muito interessantes, exemplo o "forms" onde a própria hospedagem integra a parte de backend dos formulários para o cliente.
Além disso, a Netlify tem uma série de integrações e recursos que vale apena dar uma lida em sua documentação.
Na minha opnião, com todos esses recursos e integrações, o wordpress voltou para o seu devido lugar que era, um criador de blogs dinâmico.

[AmandaFonseca]

Acompanhando esse post e criando coragem para começar a fazer o meu portfólio kkk

[mutheusalmeida]

Eu também achei bastante interessante. Eu já comecei um estático mas se os colegas puderem compartilhar recomendações de leitura, eu serei grato.

[israelcena]

Eu também achei bastante interessante. Eu já comecei um estático mas se os colegas puderem compartilhar recomendações de leitura, eu serei grato.

@atheusalmeida No blog do @willianjusten tem alguns tutoriais excelentes e um curso grátis que ele fez.

[vagnerlandio]

@rubenmarcus hoje em dia eu não vejo motivo para um site institucional ter backend, o conteúdo é alterado com uma frequência tão pequena que não compensa o overhead. Eu prefiro ir de um gerador de site estático, temos várias opções boas jekyll, hugo, gatsby, metalsmith. E de CMS headless tem alguns também, alguns pagos outros com planos limitados, mas as vezes mais vale pagar um desse do que pagar uma infra. Mas o Wordpress API também uma opção boa. E para deploy de front eu iria de netlify ou algum serviço semelhante.

Os fronts aqui da empresa geralmente vão de gatsby (porque dá para aproveitar os componentes do produto no site institucional, design system e tal) deployado no netlify. E o conteúdo depende do caso, mas acho que todas as opções são válidas. Se o cliente já usa wordpress acho tranquilo, se ele não se importa de usar um SaaS é tranquilo também. O netlify também tem um cms próprio também.

Nesse site do JAMstack tem bastante informações sobre esse assunto de site estático e tal.

Para usar o Gatsby eu preciso conhecer ReactJS? No momento estou com um projeto pessoal escrito em Pug, é um PWA e todo o conteúdo é salvo no IndexedDB. O deploy é feito no Netlify.

Gostei da ideia do Gatsby!

[kazzkiq]

Já fazia muito tempo que eu queria criar um blog para compartilhar alguns devaneios, então esse ano resolvi criar um site estático bem simples junto do blog. Essas foram as tecnologias que usei:

• Eleventy (static site generator);
• SASS;
• Vanilla JavaScript;

Funcionou muito bem e achei que ficou tudo extremamente leve (todas as páginas possuem menos de 6kb, tirando as fontes que carregam após todo o resto).

O Eleventy foi o segundo gerador estático que eu usei. Achei muito mais simples de usar (e modificar) do que o hexo. Recomendo.

Pra quem quiser um exemplo prático de código: Olhar esse repo

Meu site feito usando Eleventy: claudioholanda.ch

[rubenmarcus]

e o que acham do vuepress?

[marcelopoars]

e o que acham do vuepress?

Olha, nunca ouvi falar. Entrei no site e dei uma olhada na documentação, e aparentemente faz o mesmo que o Gatsby, só que usando Vue. Não testei, pois eu já trabalho um certo tempo com React, Gatsby, Ntlify e NetlifyCMS.

Se me permite te dar uma dica... não fica pulando de stack em stack. Foca em algo e te dedica, estuda a documentação, aplica em projetos pequenos. Não desista!

E não adianta,... hoje se você quer trabalhar com web, te pucha em JavaScript. Quando mais dominar o nosso querido JS, nais fácil as coisas ficarão!

Sucesso amigo!