Como Criar Uma Página Na Rede Linux Com Hugo?
Quer criar uma página pessoal para escrever um blog, armazenar seu portfólio/cv ou mesmo só precisa da página obrigatória do TCC?
Você consegue fazer isso usando a rede linux do IME.
Tem gente que faz páginas bem legais e diferentonas. Hoje espero te ajuda a estar um pouco mais próximo dessa galera.
Então vamos lá ao passo a passo.
1) Primeiros passos
Verifique que você tem uma conta linux e seu acesso via ssh está habilitado (https://contas.linux.ime.usp.br).
Se estiver tudo ok, você consegue acessar a sua página em: https://linux.ime.usp.br/~<seu_username>/ (você deve ver uma página em construção)
Acesse a linux pelo terminal via ssh
ssh <seu_username>@linux.ime.usp.br
e verifique a pasta /home/bcc/<seu_username>/www/ , é nela que todas as informações da sua página estarão armaenadas.
Se você quiser, já pode acessar o /www/index.html pelo vim, alterar alguma string e acessar a sua página novamente para ver o que ocorre.
Para criar uma rota /~<seu_username>/
A partir daqui você pode criar os diretórios e arquivos de maneira muito simples editando os arquivos html, css, js …
Agora, se você quer ter uma página minimamente estética e não quer explorar muito a parte de frontend, então eu tenho uma sugestão para você:
2) O framework Hugo
O que é? Hugo é ferramenta para geração de sites estáticos escrito em go.
Existem várias outras ferramentas legais, mas eu vou focar nesse daqui pois achei bom o suficiente, rápido o suficiente, é bem fácil de criar e editar (em geral), dá pra escrever fórmulas LaTeX, escrever linhas de código com syntax highlighting, dentre outras coisas …
Além de tudo isso, para facilitar ainda mais as nossas vidas, existem temas pronto.
Lá você vai encontrar vários temas legais e outros, digamos, bem criativos mesmo.
- aqui eu uso o Anatole.
A partir daqui a jornada pode ser um pouco diferente para cada pessoa, a depender do tema que você escolheu.
3) Quickstart
Instale Hugo na sua máquina (e garanta que ele está na versão mais atualizada).
hugo new site <nome_do_seu_site>
cd <nome_do_seu_site>
git init
git submodule add <link_do_github_do_seu_tema>
echo "theme = '<nome_do_seu_tema>'" >> hugo.toml
hugo serve
Para mais detalhes acesse o quickstart.
A depender do tema que você escolhe, esses passos devem ser o suficiente para você rodar uma versão inicial, porém vários deles exigem passos adicionais, então leia atentamente o README.md do seu.
4) O que editar?
Algumas pastas e arquivos são especialmente importantes.
- hugo.toml (ou, alternativamente) /config/_default/hugo.toml
O principal aqui é modificar o baseURL=“https://linux.ime.usp.br/~<seu_username_linux>/” Isso vai ser importante nota: a depender do seu tema, você vai ter que editar outros arquivos para garantir que os links internos te redirecionam para os lugares adequados.
- /content
O conteúdo das suas páginas e posts são renderizados a partir desses arquivos markdown.
- /static
Aqui são armazenados as imagens e outros recursos estáticos
favicon: o ícone que aparece no seu site
site-feature-image: a imagem que aparece no whatsapp/telegram quando você manda o link do seu site
- /public
Essa é a pasta de saída. O hugo e os scripts do seu tema irão compilar todas as informações de conteúdo que você edita e colocar nesta pasta os arquivos estáticos que você irá enviar para a sua pasta linux.
5) Explore, edite e crie o seu conteúdo.
Agora é explorar os arquivos do seu tema e ir editando até ficar satisfeito com o resultado, tudo localmente usando o comando hugo serve.
Quando estiver tudo pronto (ou só bom o suficiente), use o comando hugo para compilar mais uma vez os arquivos na pasta public.
6) Enviando os arquivos para rede linux
Você pode colocar o conteúdo criado por você na sua página linux de várias formas, usar git para atualizar os arquivos, ir com um pendriver na rede linux ou usar o comando:
rsync -rva --delete ./public/ <seu_username>@linux.ime.usp.br:/home/bcc/<seu_username>/www/
Explicando o comando…
rsync : comando para sincronizar pastas, no nosso caso via ssh entre pcs distintos
-r : aciona o rsync recursivamente nos arquivos e diretórios da SOURCE_FOLDER
-v : aumenta verbosidade para você ver o que está acontecendo
-a : preserva alguns metadados dos arquivos
–delete : flag para deletar todos os arquivos que existem na pasta TARGET_FOLDER mas não na SOURCE_FOLDER ./public/*
<seu_username>@linux.ime.usp.br:/home/bcc/ : SOURCE_FOLDER
<seu_username>/www/ : TARGET_FOLDER
Lembre-se de testar todos os links, especialmente por causa da questão com a baseURL do passo 4.
Aproveite o sua nova página!