{"id":26382993,"url":"https://github.com/raissakrupek/tutorial_github_pages","last_synced_at":"2026-01-04T00:08:07.007Z","repository":{"id":279128738,"uuid":"937798324","full_name":"RaissaKrupek/Tutorial_GitHub_Pages","owner":"RaissaKrupek","description":"Guia prático para publicação de websites pelo GitHub Pages.","archived":false,"fork":false,"pushed_at":"2025-02-24T00:16:48.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T00:18:18.057Z","etag":null,"topics":["github-pages","tutorial","website"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RaissaKrupek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-23T22:51:44.000Z","updated_at":"2025-02-24T00:16:51.000Z","dependencies_parsed_at":"2025-02-24T00:18:19.297Z","dependency_job_id":"d20b9a8c-8dda-43e7-8b38-1494bdf6e4e5","html_url":"https://github.com/RaissaKrupek/Tutorial_GitHub_Pages","commit_stats":null,"previous_names":["raissakrupek/tutorial_github_pages"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaissaKrupek%2FTutorial_GitHub_Pages","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaissaKrupek%2FTutorial_GitHub_Pages/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaissaKrupek%2FTutorial_GitHub_Pages/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaissaKrupek%2FTutorial_GitHub_Pages/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaissaKrupek","download_url":"https://codeload.github.com/RaissaKrupek/Tutorial_GitHub_Pages/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243982260,"owners_count":20378607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github-pages","tutorial","website"],"created_at":"2025-03-17T06:19:38.240Z","updated_at":"2026-01-04T00:08:06.962Z","avatar_url":"https://github.com/RaissaKrupek.png","language":null,"readme":"# 👩🏻‍💻Tutorial GitHub Pages👩🏻‍💻\n\nOlá!\n\nEste é um guia prático sobre o GitHub Pages, um serviço de hospedagem de sites que permite que você publique conteúdo com base no código-fonte gerenciado em um repositório do GitHub. Aqui, você encontrará **comandos essenciais**, conceitos importantes e um passo a passo para publicar seu website forma eficiente e simples. 🚀\n\nMuitas informações não serão abordadas, pois o intuito é fornecer apenas o essencial. Entretanto, para quaisquer dúvidas, você pode consultar a [documentação oficial](https://docs.github.com/pt/pages/getting-started-with-github-pages/creating-a-github-pages-site) do GitHub Pages.\n\nEspero que gostem e que isso ajude no dia a dia de cada um! ☺️\n\nAtensiosamente, Raissa Souza Krupek.\n\n## Conceitos Iniciais 📝\n\n- O que é hospedagem? 🤔\n  \nHospedagem é um serviço online que possibilita a disponibilização de um site ou aplicativo na internet. Basicamente, trata-se de um espaço em um servidor onde ficam armazenados todos os arquivos essenciais para que sua página seja acessível. Para facilitar a compreensão, podemos compará-la a um terreno: o site seria a casa construída nele, o domínio representaria o endereço e a internet funcionaria como a rua que conecta tudo.\nExistem diversos serviços de hospedagem na internet e um deles é o Github Pages.\n\n- Introdução ao GitHub Pages\n  \nO GitHub Pages é um serviço gratuito de hospedagem de sites estáticos diretamente a partir de um repositório do GitHub. Ele permite que você publique conteúdo de forma simples e eficiente, sem necessidade de servidores externos. Com ele, eh possivel puplicar com o domínio github.io, se estiver utilizando o GitHub free, ou mesmo [personalizar seu domínio](https://docs.github.com/pt/pages/configuring-a-custom-domain-for-your-github-pages-site). Estes e alguns outros conceitos serão melhor abordados mais a frente 😉\n\n## Criando um repositório para seu site 📁\nAntes de tudo, é importante saber que é possível criar um site do GitHub Pages em um repositório **novo** ou **existente**. Aqui, primeiramente, abordaremos a criação do website do inicio, criando um novo repositório!\n\n**1º**- Na página inicial, vá até a opção `Criar novo repositório`\n\n- Nesta etapa, você irá inserir as informações do projeto, como o nome do repositório, adicionar uma descrição breve e, em seguida, `criar repositório`.\n\n**2º**- Use o menu suspenso Proprietário para selecionar a conta que deseja atribuir como proprietário do repositório.\n\n**3º**- Digite um nome para o repositório e uma descrição opcional.\n\n \u003cimg src=\"Images/im_01.png\" width=\"600\"\u003e\n\n- Se você estiver criando um site de usuário ou de organização, seu repositório precisará ser chamado `\u003cuser\u003e.github.io` ou `\u003corganization\u003e.github.io`. Antes de definir o nome do repositório, é importante destacar que a **URL do site** publicado será gerada a partir da combinação do seu nome de usuário e do nome do repositório, por exemplo, `https://username.github.io/reponame/`. No entanto, caso mude de ideia, é possível alterá-lo posteriormente, ajustando a configuração do repositório e, se necessário, atualizando os links associados.\n  \n  \u003e ⚠️ Observação: Se o nome do usuário ou da organização contiver letras maiúsculas, você precisará colocá-las em minúsculas!\n\n**4º**- Selecione Inicializar este repositório com um `README.md`.\n\n  \u003e ⚠️ Observação: Se a conta do proprietário do repositório for o GitHub Free ou o GitHub Free para organizações, o repositório precisará ser **público**.\n\n   \u003cimg src=\"Images/im_02.png\" width=\"500\"\u003e\n\nOpcionalmente, você pode configurar um [domínio personalizado](https://docs.github.com/pt/pages/configuring-a-custom-domain-for-your-github-pages-site) para um site do GitHub Pages, o qual permitira, por exemplo, a personalização da URL de seu website, mas antes de explorar esse assunto, você deve colocar seu site em funcionamento com o domínio padrão\n\n## Configurando seu repositório ⚙️\n\n**1º**- No seu repositório, acesse a opção `Settings`.\n\n \u003cimg src=\"Images/im_03.png\" width=\"600\"\u003e\n\n**2º**- Na seção `Code and automation` da barra lateral, clique em `Pages`.\n\n \u003cimg src=\"Images/im_04.png\" width=\"300\"\u003e\n\n**3º**- Confugure uma fonte de publicação para o site\n\n\u003e   Você pode publicar seu site de duas formas: enviando suas alterações para um **branch específico** ou configurando um **fluxo de trabalho com GitHub Actions**.\n  Se você não precisa de um controle avançado sobre a construção do site, a forma mais simples é configurar a publicação automática quando houver um **push** para um branch escolhido. Você pode definir qual **branch** e qual **pasta** serão usados como fonte de publicação.  \n  O branch pode ser qualquer um do seu repositório, e a pasta pode ser a **raiz do repositório (/**) ou a pasta **/docs** dentro desse branch. Sempre que fizer um **push** com mudanças, os arquivos da pasta escolhida serão atualizados automaticamente no seu site pelo **GitHub Pages**.\n\n  **I.** Em \"Build and deployment\", no menu suspenso `Source`, selecione `Deploy From a Branch` (fazer implantação de um branch).\n  \n  **II.** No menu suspenso de branch, selecione uma fonte de publicação.\n\n   \u003cimg src=\"Images/im_05.png\" width=\"600\"\u003e \n\n  \u003e ⚠️ Observação: Por padrão, os repositórios do GitHub geralmente começam com um branch chamado `main`.\n\n   \u003cimg src=\"Images/im_06.png\" width=\"600\"\u003e\n  \n  **III.** Opcionalmente, use o menu suspenso de pasta a fim de selecionar uma **pasta** para a fonte de publicação.\n\n   \u003cimg src=\"Images/im_07.png\" width=\"300\"\u003e\n  \n  **IV.** Clique em `Salvar`.\n\n\n## Acesse sua URL 📲\nPara acessar a URL de seu website, volte em `Pages`, acessado atraves de `Settings`, e clique em  `Visit site`.\n\n\u003cimg src=\"Images/im_08.png\" width=\"600\"\u003e\n\n## Dicas extras 😉\n\n- Deixe sempre os arquivos `.html` na pasta raíz da sua fonte de publicação ou na pasta elegida dentro do branch.\n- Não se preocupe se demorar para que sua página esteja no ar. Este processo pode demorar de alguns segundos a minutos. Caso nao esteja conseguindo acessar sua URL, atualize a pagina.\n- Se o seu site não tiver uma página 404 ainda (uma página de erro que será exibida sempre que um usuário tentar acessar um caminho que não existe na sua url), é possível adicionar essa página com o Github Pages. Saiba como [neste link](https://docs.github.com/pt/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site).\n- Se alguma ação acarretar em um erro 404, procure por solucoes atraves [desta pagina](https://docs.github.com/pt/pages/getting-started-with-github-pages/troubleshooting-404-errors-for-github-pages-sites).\n\n\n## Mas por onde construo meu website? 🤔\nAgora que um **serviço de hospedagem** foi configurado para seu site, o proximo passo eh **cria-lo**, adicionando os arquivos em seu repositorio do Github referente ao website. Para isso, você pode escolher diferentes abordagens, dependendo do seu nível de conhecimento e da complexidade do site que deseja desenvolver. Aqui estão algumas opções:\n\n🔹 HTML + CSS + JS → Site estático e simples.\n\n🔹 Jekyll (baseado em Markdown) → Blogs e documentação (suporte nativo no GitHub Pages).\n\n🔹 [Quarto](https://quarto.org/docs/publishing/github-pages.html) → Ciência de dados e relatórios interativos, blogs científicos e documentação técnica. ⭐ \n\n🔹 Hugo, Gatsby, Next.js (frameworks modernos para sites otimizados, escaláveis e de alto desempenho) → Sites rápidos e dinâmicos. \n\n\u003e ⚠️ Observação: é possível adicionar um tema para personalizar a aparência do site.\n\n🛠 **Onde** Construir seu Site? \n\nVocê pode construir seu site em diferentes ambientes e depois enviar (commit/push) para o GitHub. Mais detalhes de como realizar esse processo utilizando o ambiente RStudio, acesse [Tutorial_Git_Github](https://github.com/RaissaKrupek/Tutorial_Git_Github)\n\n- RStudio → Ótimo para projetos em Quarto e Markdown.\n- VS Code → Versátil para HTML, CSS, JS, Jekyll, Hugo, Next.js e outros frameworks.\n- Jupyter Notebook → Pode ser usado para relatórios interativos com Quarto.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraissakrupek%2Ftutorial_github_pages","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraissakrupek%2Ftutorial_github_pages","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraissakrupek%2Ftutorial_github_pages/lists"}