Desde que entrei no curso técnico, nos idos de 2010, eu sempre quis ter meu próprio site. Cheguei a criar algumas versões em HTML/CSS puro e no que mais tarde seria chamado de JS Vanilla, eu acho esse nome muito bom e engraçado. Mas na época, ter que comprar uma VPC, configurar DNS, Apache e etc era um mundo de coisa que sempre assustou o menino que só estudava Delphi e VB na escola.
Felizmente a tecnologia de hosts para site de texto puro e aplicações simples evoluiu muito desde essa época (Na minha cabeça são alguns anos, mas já fazem 11). Existem várias soluções hoje de click-and-host onde basicamente você não precisa saber de (quase) nada para deixar seu site disponível. Algumas das opções que eu conheço e que já utilizei vão do S3 bucket da amazon a Netlify.
Mas caso você não tenha paciência para ainda assim lidar com algumas configurações como DNS e build, uma outra solução que vem se tornando bem popular são as GitHub Pages, onde você não precisa de (quase) nenhuma configuração.
Pensando nessa modalidade, eu decidi criar um WebSite builder que ao mesmo tempo que entrega a facilidade de criar um site dinâmico e pronto para produção, tem o código fonte embutido para te dar toda a liberdade de modificar e usar sua criatividade da melhor forma possível. O template padrão gerado para o site, é o mesmo do meu site pessoal
Caso tenha lido até aqui, você deve realmente está interessado, então chega de lero lero e vamos para o que você irá precisar:
- Uma conta github
- node e react instalados no seu computador
- git instalado e funcional
O primeiro passo é bem simples, em um browser com sua conta github, acesse https://github.com/matheusmonte/PersonalWebSiteBuilder e utilize o botão "Use this template", a descrição do botão pode variar de acordo com sua configuração de idioma, mas em geral é esse verde da figura abaixo.
Após acionar esse botão, você será levado a tela de criação de repositório, aqui é muito importante que você crie um repositório com a seguinte estrutura:
<seu-usuario-github>.github.io
Essa estrutura vai garantir que esse repositório seja usado para criar a sua página dentro do domínio github.io . No caso, para o meu usuário o nome do repositório deveria ser:
matheusmonte.github.io
Passada essa etapa, você vai ter um repositório novo em sua conta com vários arquivos, precisamos baixar esse conteúdo, para isso, você pode clonar o repositório usando esse comando
git clone <url do repositorio aqui>
e depois desse comando completo, basta entrar na pasta criada
cd <pasta com mesmo nome do repositorio>
você vai deve ser 3 coisas dentro dessa pasta:
- LICENSE
- READ.md
- pasta personal_site_src
Caso você já tenha utilizado o template anteriormente e possui mais arquivos do que somente os listados acima, pode usar esse comando para resetar o seu site, lembrando que caso você não execute o build novamente antes de fazer o commit das suas alterações, seu site não será exibido.
rm -rf asset-* logo* service-worker.js robots.txt static/ favicon.ico index.html precache-manifest.* manifest.json
Modificando seu site
Para modificar os dados que vem junto com o template e adicionar os seus detalhes, você precisa modificar o arquivo
personal_site_src/src/config.js
Ao abrir esse arquivo, você encontrará 2 exports de objectos JS que descrevem os dados do profile e os labels e links das redes sociais:
export const PROFILE = {
image : "profile.jpg",
text : {
introduce : "HI, I'm Matheus",
subintroduce : "Software Engineer based in Dublin",
bio : "I'm current Software Development Engineer at Amazon Web Services, " +
"I love to talk about JavaScript stuff, but I code on Java, C# and Python too. Open source lover, I contributed " +
"to some interesting projects, check on my github for more details. Seahawks (NFL) fan, Flamengo (Soccer/football) supporter and GSW (NBA) nation."
}
};
export const SOCIAL_MEDIA = [
{title : "Github", link : "https://github.com/matheusmonte"},
{title : "Linkedin", link : "https://linkedin.com/in/matheus-monte"},
{title : "Twitter", link : "https://twitter.com/mcsmonte"},
{title : "YouTube", link : "https://youtube.com/matheusmonte"},
{title : "SpeakerDeck", link : "https://speakerdeck.com/matheusmonte"},
{title : "Email", link : "mailto:matheusmonte@protonmail.com"}
]
Modifique as informações e salve o arquivo.
Antes de iniciar o processo de build, lembre-se de colocar a sua foto de perfil, para isso, entre na pasta
personal_site_src/src/resources
apague o arquivo profile.jpg e copie a sua foto para dentro dessa pasta, depois disso, basta renomear para o mesmo nome do arquivo antigo, ou seja, profile.jpg
Feito esses passos, você está pronta para buildar seu próprio website.
Gerando seus arquivos estáticos
Nesse passo, você vai precisar rodar os seguintes comandos em ordem:
- Gerar arquivos estáticos caso você use yarn:
yarn build && mv build/* ../
caso use npm:
npm build && mv build/* ../
- Gerar commit com seu novo website
git add --all && git commit -sm "meu site V1.0"
- Mandar suas alterações para o repositório remoto
git push
e então basta acessar a sua url com o mesmo nome do repositório no sue browser de preferência e seu site novinho em folha vai está lá te esperando.
<seu-usuario-github>.github.io
Lembre que na próxima vez, antes de gerar seus arquivos estáticos, você precisa remover os anteriores com esse comando:
rm -rf asset-* logo* service-worker.js robots.txt static/ favicon.ico index.html precache-manifest.* manifest.json
É isso galera, espero que tenham curtido e estou aberto a sugestões do que queiram ver por aqui.
Top comments (0)