Recentemente escrevi no meu blog pessoal em inglês como criar um blog apenas usando html, css e um editor de texto. Este post aqui é a tradução do post original.
Um tempo atrás eu li sobre Páginas Feitas para Durar(em inglês), um artigo do professor Jeff Huang da Universidade Brown nos Estado Unidos.
Ele fala sobre como os websites eventualmente morrem porque as pessoas que os mantém se cansam de migrar de serviços (quando serviços são terminados – lembra do Geocities?), atualizar bibliotecas e infraestruturas. A proposta dele é usar HTMl e CSS apenas.
Eu tenho olhado algumas plataformas de blog que sejam simples , tipo Bear Blog e Mataroa e mais recentemente Pika.page. Então comecei a pensar como poderia usar apenas HTML e CSS para criar um blog simples como os criados por estas ferramentas.
Olhei como Jeff Huang construiu seu website e criei uma estrutura simples para criação de um blog. Não que seja fácil, porém é muito simples, será necessário atenção para que erros não sejam cometidos. Basicamente para cada blog post será necessário criar uma página e alterar três outros arquivos, a home page, a página com a lista de todos os blogs posts e o arquivo de RSS feed.
Mas porque você faria isso? Porque é divertido! Na minha opinião isso já seria mais que o suficiente, porém no final deste post eu irei dar os prós e contras de criar um blog desta forma, mas já aviso, tem mais contras que prós.
Você pode fazer o download do projeto final aqui. Mas eu irei lhe dar um guia das alterações necessárias para criar uma postagem nova e explicar onde cada pedaço deste blog simples se encaixa.
Como fazer um novo post
Primeiramente descomprima o arquivo que você fez o download acima e então siga os passos abaixo.
- Procure pela pasta
/posts/
.
Na pasta /posts/
você irá encontrar uma sub-pasta chamada /my-first-post/
, copie esta pasta e renomeie com o título do seu novo blog post. Use este formato the-new-title
.
- Na nova pasta abra o arquivo
index.html
.
No arquivo index.html
você irá encontrar o texto de My first post, você precisa apenas apagar o texto e escrever o texto do novo post.
- Volte a pasta
/posts/
e abra o arquivoindex.html
que se encontra lá.
Neste arquivo index.html
procure por onde tem um link para /my-first-post/
e copie esta linha logo abaixo. Depois mude a linha copiada para o novo post. (Sempre mude a linha de cima para que o seu último post seja o primeiro na página)
- Abra o arquivo
index.html
do diretório raiz da pasta/simple-blog
.
Neste arquivo index.html
tem uma lista dos posts mais recentes logo abaixo do título My posts, procure pela linha com /my-first-post/
e copie esta linha e cole logo abaixo. Agora basta alterar esta linha para o novo post. Minha sugestão é que você mantenha os últimos 5 a 10 posts na home page.
- Procure pela pasta
rss
e abra o arquivoindex.xml
.
No arquivo index.xml
você irá notar que a estrutura é diferente. Esta estrutura é o que permite que aplicativo leitores de RSS possam interpretar o arquivo. Para cada novo post tem uma nova estrutura <item>
que precisa ser criada. Então você precisa criar uma cópia do conteúdo que começa com <item>
até quando o mesmo termina com </item>
. Uma vez que você copiou e colou, altere o que ficou no topo do arquivo com o conteúdo do seu novo post. Eu gosto de manter o post inteiro no meu RSS feed, então para fazer isso precisamos copiar o conteúdo do post original para o arquivo RSS e trocar pelo post de exemplo que se encontra no RSS que você está editando.
Publicando seu novo blog
Legal, este cinco passos acima é tudo o que você precisa sempre que quiser criar um novo post no seu blog. Ė simples assim, e é por isso que o nome ficou simple-blog.
Agora vamos publicá-lo. A maneira mais fácil que eu conhece de publicar um site como este é usar o serviço grátis do Netlify. Basta visitar a página deles de Arrastar e Soltar em app.netlify.com/drop. Um vez que o site carregar, pegue a pasta simple-blog
e arraste e solte onde está escrito Drag and drop your site output folder here. Netlify irá criar uma URL para o seu blog que já estará publicado. Depois você pode criar uma conta no Netlify e seguir estes passos para publicar o site no seu domínio próprio. (Veja porque é importante ter um domínio próprio)
Você pode ver o site exemplo que eu publiquei quando segui estes mesmo passos, ele está aqui.
Entendendo a estrutura do simple-blog
simple-blog
|
+-- index.html
|
+-- about
| |
| +-- index.html
|
+-- css
| |
| +-- style.css
|
+-- posts
| |
+ |-- my-first-post
| |
| +-- index.html
| |
+ |-- my-second-post
| |
| +-- index.html
| |
+ |-- my-third-post
| |
| +-- index.html
|
+-- rss
| |
| +-- index.xml
Como você pode ver a estrutura é realmente simples (afinal é o simple-blog) e o segredo é entender como os servidores web trabalham. Quando você visita um pasta com um arquivo index.html
o servidor irá enviar este arquivo para o seu navegador e o navegador irá apresentá-lo. Ao saber disso, podemos criar uma estrutura baseado no nome dos posts, onde cada pasta representa um blog post.
Um detalhe que ainda não falamos a respeito é a pasta /css/
. Esta pasta é onde fica o arquivo css que temos referencias a ele em todas as outras páginas, logo no topo de cada arquivo, como vemos neste exemplo abaixo:
<link rel="stylesheet" href="/css/style.css"/>
este arquivo em particular, eu copiei do site CSS Bed, se você visitar o site irá achar outras opções de css simples que irão dar ao seu website um visual mais bacana, tudo que você precisa é adicionar a linha acima. Eu escolhi usar o css chamado bahunya
que encontrei no CSS Bed. Aconselho olhar os exemplos no CSS Bed e escolher o que você gostar mais, na hora que estiver escolhido basta salvar o arquivo com nome style.css
e colocar na pasta css
substituindo o arquivo que seu website estará de cara nova.
Quais os próximos passos
Como eles dizem, o céu é o limite. Mas faça mudanças e se divirta com este simple-blog. Aprenda como adicionar imagens aos suas postagens. Para tanto basta procurar na web por “como adicionar imagens em html”. Uma coisa que você irá perceber é que conforme a lista de posts irá crescer, será importante adicionar uma estrutura de datas as suas pastas, por exemplo usar uma pasta chamada 2025
e outras pastas 01
, 02
, etc que representam os anos e meses em que os posts foram criados, outra estrutura de datas que pode ser usada nas pastas é 2025-01
. Desta forma será mais fácil encontrar os posts conforme seu website for crescendo.
Vantagens e Desvantagens
- Vantagens
- Divertido (a maior de todas)
- Fácil de entender e ter sobre seu controle
- Feito para durar
- Desvantagens
- Talvez cresça fora de controle
- Requer estar em um computador para publicar (ao contrário de usar um aplicativo)
- Suscetível à erros (são 5 passos que você precisar para fazer um post)
- Muito repetitivo e não automatizado (sim, requer abrir arquivo, fazer alterações e subir no servidor)
- Mais difícil de adicionar compenentes da IndieWeb como Webmentions (ao invés de usar plugins)
Conclusão
Esta é uma maneira divertida de criar um blog. É uma recomendação? Provavelmente não, mas você deveria tentar entender como as coisas funcionam e o que é necessário para criar um blog na unha.