Olá caros, tomei coragem e criei um site pessoal. Achei interessante partilhar porque acabei decidindo por criar meu site bem à moda antiga: tudo em HTML/CSS puro, redigido num bom e velho editor de texto.
Coloquei no ar hoje — é uma versão-embrião ainda…
Já venho com essa ideia do site há décadas, mas sempre adiando. Nesses últimos meses tive bem focado nisso, já assinando hospedagem, acumulando rascunhos de artigos, mas ainda sem criar o tal do site. Posso dizer que a leitura do artigo Então você quer ter um site…? me deu um empurrãozinho final.
Eu ia fazer no WordPress, mas como já vinha estudando um pouco de desenvolvimento web, vi que não seria tão ambicioso fazer tudo via código. Será um site bem minimalista mesmo, sem animações, efeitos complexos, etc. Basicamente só texto.
Quero ver até onde consigo ir apenas com HTML/CSS puro. Mais tarde, e devagar, vou inserindo um pouco de JavaScript pra evitar replicação de código, adicionar umas funções básicas e tal.
Se quiser ver o site (que tá bem cru mesmo) é só clicar no meu nome. Por enquanto, só há duas páginas: a página “home” e a pagina “agora”.
Ah, está em inglês, mas calma, vai ter artigos em português logo. Já tão no forno.
Esse é mais um passinho no meu longo processo de se des-viciar da “Internet Moderna” e voltar à velha Internet, menos tóxica, mais saudável.
🙂
É totalmente viável, o uso de HTML e CSS puro hoje foi engolido pelos frameworks, muitos que usam os frameworks nem sabem como funciona por detras dos panos (acredite kkkk), enfim, o meu mesmo, fiz somente com HTML, CSS e um pouco de JS, mas ta bem capenga, vou dar uma melhorada ainda, em breve compartilho aqui. Mas, vai em frente cara, tem bastante potencial.
Dispensa mais comentários falando que sim haha, mas eu queria contribuir comentando que eu sou designer de produtos digitais, e não programo há muito tempo mas jamais esqueci HTML e CSS, é como andar de bicicleta.
Comecei a construir o meu site (que é exatamente o link no meu nome) em WordPress, mas percebi que não ia ficar acessível como eu gostaria que ficasse, então projetei ele no Framer, e codei somente com HTML e CSS para conseguir fazer as animações que eu queria e tratar acessibilidade na página toda.
Boas, Mateus. Uma pergunta pra você que manja de café:
Conhece uma marca de descafeinado que não tenha gosto ruim?
As vezes queria tomar um bom café à noite, mas se tomo café normal, passo a noite acordado...
Salve!
Tem uma marca que eu gosto muito, que é a Orfeu. Eles tem uma de descafeinado em grão, pó e capsula. Particularmente eu nunca tomei o descafeinado deles, só o normal, mas a Orfeu é uma marca muito confiável pra cafés.
Fiz a mesma pergunta pro Gemini ontem e ele também listou Orfeu. 😎
Orfeu é o primeiro da lista. Vou ver se acho. Obrigado.
Opa! Precisando de qualquer coisa, estamos aí
ps: como um bom stalker, achei muito bonito os seus desenhos no Instagram haha
Faço coro as respostas anteriores dando o meu como exemplo (ainda que caótico, mas, rs).
Seu site é bacana, Jackson! Gostei do link pra alternar entre tema dark/light -- é uma das primeiras coisas que tenho que por no meu site. Não sei se foi intencional ou é um glitch, mas quando ativo o modo escuro, o site volta pro claro quando vou para outra página.
Valeu Cesar! Sobre o comportamento dos modos entre as páginas, é esse mesmo, ainda não tive tempo de revisar o CSS para manter a escolha.
Super viável! O CSS é muito poderoso hoje, com coisas como flexbox, grid, classes aninhadas, pseudo-seletores (
:has,:not)… dá para deixar o leiaute do jeitinho que você quiser.Seu site está bem maneiro. Parabéns!
A menos que você pretenda manter o site enxuto, com poucas páginas (até umas dez), reforço o conselho da galera de usar um gerador de site estático (SSG). Nem precisa ser algo poderoso e/ou popular, como Jekyll, Hugo ou 11ty; se a ideia é manter o site simples *mesmo*, algo como o Gozer adianta a vida sem acrescentar (muita) complexidade ao seu fluxo de trabalho.
Pura verdade! Recentemente estudei CSS lá no W3School. Entender como ele funciona foi o que me motivou a criar um site via código. Ferramentas visuais como Gutenberg, Elementor, ajudam bastante, mas ficamos limitados as opções que existem na interface -- elas ajudam e limitam ao mesmo tempo. Trabalhar com CSS puro simplesmente não impõe limites sobre o que podemos fazer em nosso layout, temos uma liberdade e precisão que acho que nenhuma ferramenta visual vai oferecer. Pra quem ainda não estudou CSS, vale muito a pena, mesmo pra quem usa ferramentas visuais.
Obrigado! 😊
Estou ouvindo falar disso pela primeira vez aqui nesse post, nem conhecia. Vou dar uma boa olhada nisso sim! Acho que o site vai ter bem mais que dez páginas... Obrigado! 🙂
Que legal este Gozer, não conhecia. O legal de GoLang é que minimiza as dependências, geralmente você só precisa do executável. Vou olhar mais a fundo este Gozer, valeu a dica.
Dá sim. E tem potencial de ficar bem redondinho e te dar bem mais liberdade caso queira fazer uma publicação com o layout personalizado por exemplo.
Como o Antonio disse. Tem que pensar um pouco no começo como seria o seu "index.html"
Mas sinceramente acho que o que dá mais trabalho sempre é ter o conteúdo pra postar, o que as pessoas realmente vão ler. Depois que você já tem tudo estruturado, atualizar um link no menu se torna ínfimo.
Ainda sim. Pra aumentar a comodidade eu escreveria em markdown e depois converteria os arquivos em html. Dá inclusive pra escrever arquivos mesclados com as duas linguagens e converter tudo pra html puro depois. Tanto o obsidian como o ghostwriter fazem isso se precisar (mas eu usaria o ghostwriter).
Se você usa linux. Dá pra fazer scripts também para automatizar tarefas e deixar o site puro e bem redondinho. Já fiz isso por um tempo usando este aqui: https://www.youtube.com/watch?v=ayYstrsYImk
Muito bacana o feedback do pessoal aqui! 🙂
Pois é... conteúdo é o principal. Felizmente, meu hábito de escrever pra mim mesmo me fez acumular uma enorme coleção de artigos rascunho em minhas pastas, além de uma grande lista de títulos que são ideias para mais artigos. Por isso minha necessidade de criar um site urgente, tenho uma represa de conteúdo querendo sair pra fora, haha. Claro, terei um bom trabalho em editar e polir antes da publicação. Não será moleza.
Cara, um projetinho que tenho em mente seria criar um script que faz algo parecido. Tipo, eu digito um post qualquer no meu editor de texto, insiro um código especial no início, depois esse script processa o arquivo e magicamente publica ele no lugar certinho lá no site. Imagino que já existam soluções prontas pra isso, mas queria ter o prazer de criar a minha própria solução. Estou longe de ser fluente em JavaScript ou Bash, mas com uma ajudinha da IA não será difícil.
🙂
Muito Legal Cesar, parabéns por ter começado o seu site. Está ficando bacana.
Estes sistemas de SSG que o pessoal está sugerindo ajuda bastante e você ainda pode focar em HTML e CSS. Mas eu acho muito legal fazer na mão, apesar dos meus sites pessoais (um em inglês e outro em português) usarem uma plataforma. (Hugo e ClassicPress)
Conforme você vai adicionando conteúdo começa a ficar um pouco difícil de manter. Imagina o seguinte, você criar cada página do seu site na mão e adiciona o menu de navegação no topo, quando você quer fazer alguma alteração no menu você terá que alterar cada uma das páginas que contém este menu.
A maneira de minimizar estas alterações é planejar o seu menu de forma que ele mude o menos possível e novas páginas entrem como posts (igual a um blog). Desta forma você tem uma única página que lista todos os posts, e é esta página com a lista de posts que vai ficar no menu. Cada post individual não terá menu, apenas um link no top de volta para a página com a lista dos posts. Espero que tenha ficado claro.
Gosto muito deste artigo em inglês sobre o porque é importante criar um website que dure. Vale a pena ler, tem dicas muito boas para quem está criando um site na mão.
Uma coisa legal que você pode fazer, é criar na mão também o RSS Feed. Assim as pessoas podem acompanhar seu blog/website pelo feed. Dá uma olhada neste pastebin é fácil de entender e adaptar para o seu.
O mais importante é não desanimar e se divertir.
Sim, essa era uma das preocupações desde o início: como evitar replicação de código. Sou adepto da programação genérica (o que é meio que o oposto da replicação de código). Minha ideia inicial seria criar um código JavaScript bem simples encapsulando esses componentes que serão repetidos em várias páginas, como o menu, por exemplo. Mas estou em dúvida ainda... não sei se esse seria um bom design pattern -- sairia do conceito de páginas estáticas, que é o que eu quero, além de gerar processamento (ainda que minúsculo) no navegador do usuário, toda vez que ele carrega uma página.
Talvez o SSG (que ainda tenho que entender) seja a solução mais sábia.
Sobre o artigo que você citou, (This Page is Designed to Last), por coincidência, estive a ler isso há uns 4 dias atrás, heheh. 🙂
É possível!! Eu comecei a reestruturar meu blog, ia usar o tailwind, mas o negócio é tão “demais” para o que preciso, que fiquei cansado e desisti. Voltei para o simples css. No meu caso, uso o eleventy e recomendo vc usar pelo menos algum desses sistemas simples.
Opa, já dei uma rápida vista de olhos nesse tailwind.
Eu dificilmente usaria por ele ter muitas funções que não vou precisar, tipo centenas. Mas gostei do conceito por trás da ferramenta, que é nada mais que centenas de classes utilitárias que são "variáveis" que "encapsulam" classes CSS que teríamos que escrever à mão várias vezes.
O legal é que não é difícil extrair o conceito do tailwind e criarmos nossa pequena lista de classes utilitárias, mas só aquilo que vamos usar...
Uma ideia que vou usar com certeza.
É possivel e ainda por cima divertido.
Eu fiz o meu assim desde sempre e atualmente eu montei meu blog lá também na "mão e na marra".
Na marra, principalmente, porque sei muito pouco, o básico mesmo de html e css.
E ainda tive que aprender na marra e no "copia, mas não faz igual" de Ruby, jekyll e liquid pra montar o blog.
Sei quase nada da teoria, mais a prática de codigo, faço pela diversão e tá dando bem certo.
Bons tempos do Frontpage....kkk...fiz tanto site mais basicão por lá, quando era xóvem....
Pois é, eu cheguei a usar ele... Uma relíquia. Tinha o tal de DreamWeaver também, nem sei onde foi parar, se existe...
Meio que tive que aprender com o Dreamweaver por um tempo. Era legal fazer no modo "Faça como verá", pena que tinha muito conflito de navegador na época, e no final não ficava tão bem e o código ficava pesado.
Hoje estou totalmente fora desta área. Só usaria mexer em código para alguma emergência. Fora isso, perdi o gosto de mexer com sites em geral.
"Puro" quer dizer tanta coisa...
Dependendo do que você considerar, viável, é! Já fiz vários, mas não sugiro fazer na mão. Um SSG ajuda muito a otimizar seu tempo, senão você tem que reescrever pedaços de código o tempo todo.
Eu costumo usar o Hugo.
Olá! Bom, pelo termo "puro" quis dizer, sem livrarias, Bootstrap, pré-processadores, etc... Também sem IDE com code completion, assistente IA, tipo VS Code, etc. Pelo menos não no início. Gradualmente vou adicionando essas coisas se precisar.
Sobre livrarias, ando meio com pé atrás sobre isso... Às vezes parece que o tempo que eu gastaria aprendendo uma livraria, é o mesmo tempo que levaria pra construir minha "mini-livraria", customizada pro meu caso específico.
As livrarias são feitas pra atender vários contextos no mundo afora, aí elas acabam se tornando muito complexas para casos onde se quer um site simples, sabe?
Mas tô de olho nesse tal de Hugo.
Eu fiz o meu assim também. Antes eu usava um wordpress, mas só pra manter o meu portfólio. Aí resolvi simplificar. Coloquei os trabalhos em uma lista, um textinho sobre mim no topo, alguns links para newsletter, podcast, redes sociais e pronto. Não precisava ser mais que isso.
Pois é, meu site teria essa mesma simplicidade, por isso senti que WordPress seria muita coisa pra mim.