./DanXavier
Categorias Tags Cronologia Sobre mim
./DanXavier

Criando página em hugo e hospedando no Codeberg

Dan Xavier  incluído  na categoria web
     1416 palavras   7 minutos    visualizações     comentários  

Se deseja aprender em público e/ou criar um jardim digital e/ou ter um espaço para sua contribuição para o movimento slow web, e que seja livre de anúncios, usando markdown e sem utilizar javascripts bizarros, veio ao lugar certo.

Ao ler e por em prática esta publicação, você terá seu espaço na internet gastando pouco (ou nada).

Meu incentivo maior para escrever esta publicação foi o pedido de um amigo que, mais a frente, irei perguntar se posso informar quem é, o link e o propósito da página dele.

Entre vários propósitos que possam ser escolhidos ou definidos, mesmo que eu não explique ou defina aqui, saiba que seu uso não é errado (desde que não seja nada ilegal, imoral ou anti-ético).

Li uma matéria que fala sobre aprender em público e os benefícios dessa atitude para si e para os outros. Recomendo a leitura.

Se você não faz ideia do que seja um jardim digital, entenda bem o que é nessa publicação, em inglês, de Maggie Appleton, nessa publicação do Manual do Usuário e nessa publicação do contraforma.

A ‘devagar web’ ou ‘internet devagar devagarinho’ (termos usados de forma jocosa por Jacqueline Lafloufa) é relacionado ao movimento slow web e que pode ser melhor compreendido nessa publicação do Manual do Usuário.

Ao seguir os passos desta postagem você fará o seguinte:

  • Aprender markdown (ou ter referência)
  • Utilizar uma conta para sincronização via git no Codeberg
  • Configurar página via Codeberg
  • Instalar o hugo e o git
  • Criar página hugo
  • Baixar o tema hugo
  • Publicar

Vamos ao que interessa…

Guarde para ler depois ou leia logo o seguinte link: Markdown

O Codeberg é amigável no sentido de que não coleta e nem vende seus dados. Tem nota A no tosdr! Veja aqui.

  1. O primeiro passo é criar sua conta, se não tiver, em codeberg.org.
  2. Configure o acesso com uma chave SSH (é mais prático para fazer os commits no repositório). Clique no ícone de seu usuário, depois em configurações e, na página que abre, escolha a aba Chaves SSH/GPG. Nesta seção já há links informativos de como fazer sua chave ssh.
  3. Crie um repositório para seu site (segundo aqui, seu repositório precisa ser pages)
  4. Siga para os próximos passos para configurar sua página Hugo e para fazê-la sincronizar com seu repositório no Codeberg

Para instalar o hugo, recomendo pegar o binário, da versão extended, compatível com seu sistema operacional: AQUI (tem que estar escrito hugo_extended no início do nome do binário).

Para instalar o Git, caso não o tenha, basta instalá-lo com seu repositório ou seguindo as instruções daqui

No terminal/prompt, vá na pasta onde você deseja guardar sua página hugo e execute:

1

hugo new site meu-site-hugo

Será criada uma pasta com o nome meu-site-hugo e, dentro da pasta, estará toda a estrutura do seu site hugo.

A estrutura inicial da pasta é a seguinte:

1
2
3
4
5
6
7
8
9

meu-site-hugo
 ├── archetypes
 │   └── default.md
 ├── config.toml
 ├── content
 ├── data
 ├── layouts
 ├── static
 └── themes

Agora chegou a parte de baixar e instalar o tema.

Será usado o tema hugo-classic, para mais detalhes e outras informações, clique aqui.

Ainda dentro da pasta do site meu-site-hugo, execute:

1

git clone https://github.com/goodroot/hugo-classic.git themes/hugo-classic

Depois edite o arquivo config.toml com as seguintes informações (mudando com seus dados):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

baseurl = "https://SEUUSUARIO.codeberg.page/"
enableEmoji = true
footnotereturnlinkcontents = "↩"
googleAnalytics = ""
ignoreFiles = ["\\.Rmd$", "_files$", "_cache$"]
languageCode = "pt-br"
theme = "hugo-classic"
title = "Meu Site Hugo"

[markup.goldmark.renderer]
unsafe = true

[markup.highlight]
anchorLineNos = false
codeFences = true
guessSyntax = false
hl_Lines = ""
lineAnchors = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
style = "monokai"
tabWidth = 4

[permalinks]
post = "/:slug/"

[[menu.main]]
name = "Categorias"
url = "/categories/"
weight = 1
[[menu.main]]
name = "Tags"
url = "/tags/"
weight = 2
[[menu.feed]]
name = "RSS"
url = "/index.xml"

[params]
custom_css = ["css/theme-override.css"]
description = "Meu site hugo: simples e direto ao ponto."
footer = "© 2019 - 2022 Eu | <a rel='license external nofollow noopener noreffer' href='https://creativecommons.org/licenses/by-sa/4.0/' target='_blank'>CC BY-SA 4.0</a>"

Crie a pasta css dentro de static com o comando:

1

cp -a themes/hugo-classic/static/css static/

Edite o arquivo static/css/theme-override.css com o seguinte conteúdo para ter o tema dark:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

footer { font-size: 90%; }
body {
  background-color: #393E41;
  color: white;
}

blockquote {
  background: #393E41;
}

a {
  color: #EBC3DB;
}

header {
  background: #393E41;
  border-bottom: 2px dotted #EBC3DB;

}

.article-meta, .menu a {
  background: #393E41;
  color: white;
}

table {
  margin: auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
table thead th { border-bottom: 1px solid #666; }
th, td { padding: 5px; }

Na pasta content, acrescentei uma imagem chamada foto01.webpe editei o arquivo _index.md com o seguinte conteúdo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---
title: Início
description: "Aqui fica a descrição do meu site hugo"
---



            
Fazendo meu site hugo

        





## Um sinal do meu site hugo

### 🌱 🌎 😆

Aqui estou eu em meu site hugo que fiz e ficou boladão!

Acesse-o!

Tem como colocar imagem com shortcode hugo ou com markdown!

![Fazendo meu site hugo com markdown](foto01.webp)

---

## Outras coisas que escrevi

Para fazer uma nova postagem/publicação, você pode escolher entre escrever apenas um arquivo .md dentro de content/post ou você pode criar uma pasta dentro de content/post com o arquivo index.md.

Ex1.: Para organizar cada conteúdo da postagem em sua própria pasta, crie a nova publicação/postagem com o seguinte comando em exemplo:

1

hugo new post/postagem-com-imagens/index.md

Coloco uma imagem foto01.webp na mesma pasta e no arquivo index.md, coloquei o seguinte conteúdo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

---
title: "Postagem Com Imagens"
date: 2022-02-08T22:22:39-03:00
draft: false
categories: [escrita]
tags: [imagens, escrita, tutorial]
slug: nova-postagem-com-imagens
---

![só imagens várias vezes](foto01.webp)
![só imagens várias vezes](foto01.webp)
![só imagens várias vezes](foto01.webp)
![só imagens várias vezes](foto01.webp)

Ex2.: Para criar uma postagem/publicação apenas com texto e que não há interesse de organizar em uma pasta, execute o seguinte comando:

1

hugo new post/postagem-mais-simples.md

Obs.: No exemplo 2 ainda é possível usar conteúdos externos, ou na pasta static, ou na mesma pasta que está o arquivo, ou etc. Gohugo é bastante flexível quanto a isso.

Depois de terminar as configurações ou terminar de escrever sua publicação, abra seu terminal/prompt, vá na pasta raiz de meu-site-hugo e execute os seguintes comandos:

  1. Apague a pasta public para evitar qualquer informação desnecessária ou a mais
1

rm -Rf public
  1. Rode o comando a seguir para gerar, novamente, o conteúdo
1

hugo

Será gerada, numa velocidade absurda, toda sua página numa nova pasta chamada public.

Ao terminar, hora de enviar para seu repositório git (famoso commit). Execute:

Agora é a parte que você configura o git em sua pasta para sincronizar com o Codeberg.

  1. Entre na pasta public, depois execute os comandos:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

git init

git checkout -b main

git add .

git commit -m "breve descrição do commit"

git remote add origin git@codeberg.org:SEUUSUARIO/pages.git

git push -u origin main

Depois de tudo feito, sempre que for criado uma nova postagem/publicação, basta executar o comando hugo na pasta raiz, acessar a pasta public e executar os comandos para commit das modificações:

1
2
3
4
5

git add .

git commit -m "um texto que descreve este commit"

git push

Fim!

Conclusão

  • Esta rotina pode ser feita com outros temas, desde que leve em consideração as variações de configurações baseados no tema escolhido
  • Agora você terá uma página estática, hospedada no Codeberg e poderá colocar um domínio próprio apontando para o endereço do codeberg

Obs.: Se achar qualquer coisa estranha ou algum erro, favor me informar que melhoro ou modifico este how-to!

Até mais!

Atualizado em 08-02-2022
Leia em markdown
 gohugo, webdesign, plantando 🌱
Voltar | Home