{"id":117850,"date":"2022-06-24T08:00:00","date_gmt":"2022-06-24T11:00:00","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=8947"},"modified":"2023-08-01T15:04:42","modified_gmt":"2023-08-01T18:04:42","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/","title":{"rendered":"GitHub Pages: saiba como usar e crie seu portf\u00f3lio"},"content":{"rendered":"\n

Para um programador<\/a>, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um profissional. Para isso, ser\u00e1 preciso preparar um portf\u00f3lio.<\/p>\n\n\n\n

Seja para conseguir um emprego ou atuar como freelancer, uma das formas mais simples de criar o portf\u00f3lio \u00e9 por meio do GitHub Pages, um servi\u00e7o gratuito para a hospedagem de p\u00e1ginas est\u00e1ticas que \u00e9 personaliz\u00e1vel e f\u00e1cil de usar.<\/p>\n\n\n\n

Voc\u00ea j\u00e1 conhece o GitHub Pages? Prossiga com a leitura, saiba quais as funcionalidades dessa ferramenta e aprenda a montar seu portf\u00f3lio com ela!<\/p>\n\n\n\n

O que \u00e9 GitHub Pages?<\/strong><\/h2>\n\n\n\n

O GitHub Pages \u00e9 um servi\u00e7o de hospedagem gratuito para sites est\u00e1ticos \u2014 ou seja, que utilizam apenas HTML, CSS e Javascript<\/a>. Ele utiliza recursos armazenados em um reposit\u00f3rio do GitHub e executa, transformando em uma p\u00e1gina da web.<\/p>\n\n\n\n

\"p\u00e1gina
Com o GitHub Pages, voc\u00ea pode criar p\u00e1ginas e portf\u00f3lios a partir de poucas ferramentas.<\/figcaption><\/figure>\n\n\n\n

Caso voc\u00ea ainda n\u00e3o conhe\u00e7a o GitHub, trata-se da principal ferramenta de versionamento de c\u00f3digos e gerenciamento de projetos em todo o mundo. Atualmente, ela tornou-se quase imprescind\u00edvel para os programadores, pois re\u00fane p\u00e1ginas, c\u00f3digos de diferentes projetos e publica\u00e7\u00f5es, e facilita uma grande variedade de tarefas de programa\u00e7\u00e3o.<\/p>\n\n\n\n

Gra\u00e7as \u00e0 facilidade de utiliza\u00e7\u00e3o do GitHub Pages, ele \u00e9 muito popular entre os desenvolvedores para fazer portf\u00f3lios, pois ele combina uma interface personalizada aos diret\u00f3rios GitHub como forma de armazenar e disponibilizar seus c\u00f3digos e projetos. <\/p>\n\n\n\n

Tamb\u00e9m \u00e9 um recurso muito vers\u00e1til e aplicado na cria\u00e7\u00e3o de sites simples, blogs<\/a>, documenta\u00e7\u00f5es ou projetos de estudos. Para o uso da ferramenta, n\u00e3o \u00e9 preciso lidar com bancos de dados ou configurar servidores, como \u00e9 comum na cria\u00e7\u00e3o de outros tipos de cria\u00e7\u00e3o de sites. <\/p>\n\n\n\n

Al\u00e9m disso, o GitHub Pages oferece uma s\u00e9rie de recursos, e o primeiro deles \u00e9 o controle de vers\u00f5es do site. Naturalmente, por ser uma ferramenta de versionamento, ela mant\u00e9m registros de vers\u00f5es antigas das p\u00e1ginas, e voc\u00ea pode acess\u00e1-las caso queira reverter ou confirmar algo.<\/p>\n\n\n\n

Outro benef\u00edcio \u00e9 poder trabalhar em uma mesma p\u00e1gina com outros profissionais. Assim como no GitHub, diferentes pessoas podem atuar em um mesmo projeto, alterando apenas as partes do c\u00f3digo que forem necess\u00e1rias e recuperando vers\u00f5es anteriores. Pela pr\u00f3pria ferramenta, voc\u00ea pode listar tarefas que ainda est\u00e3o por fazer e implementar mudan\u00e7as em tempo real.<\/p>\n\n\n\n

Como usar o GitHub Pages para criar um portf\u00f3lio?<\/strong><\/h2>\n\n\n\n

O GitHub Pages \u00e9 um servi\u00e7o muito vers\u00e1til e que pode servir para diferentes finalidades. Para exemplificar a cria\u00e7\u00e3o de uma p\u00e1gina, vamos demonstrar como se faz um portf\u00f3lio utilizando essa ferramenta.<\/p>\n\n\n\n

H\u00e1 algum tempo, ele precisava ser ativado no campo de configura\u00e7\u00f5es do GitHub, mas atualmente, basta fazer seu cadastro para come\u00e7ar a usar esse recurso.<\/p>\n\n\n\n

O primeiro passo \u00e9 entrar no site do GitHub (https:\/\/github.com\/<\/a>) e clicar em Sign Up, no canto superior direito. Feito isso, preencha os campos com e-mail, senha e um nome de usu\u00e1rio (que ser\u00e1 p\u00fablico, portanto escolha bem). Para que a conta seja criada efetivamente, entre no seu e-mail e confirme o cadastro. Com a conta criada, fa\u00e7a o login usando suas credenciais. <\/p>\n\n\n\n

A pr\u00f3xima etapa \u00e9 escolher um template. Se voc\u00ea quiser e tiver experi\u00eancia nesse sentido, pode criar uma interface simples<\/a>, que servir\u00e1 como a parte visual da p\u00e1gina, mas voc\u00ea tamb\u00e9m tem a op\u00e7\u00e3o de utilizar um template pronto. No pr\u00f3prio GitHub ou em diversos sites, voc\u00ea encontra \u00f3timas op\u00e7\u00f5es gratuitas que pode readaptar e usar. <\/p>\n\n\n\n

Com o template selecionado, fa\u00e7a os ajustes necess\u00e1rios no c\u00f3digo com rela\u00e7\u00e3o \u00e0 apar\u00eancia utilizando HTML, CSS e Javascript<\/a>. N\u00e3o se esque\u00e7a de incluir suas informa\u00e7\u00f5es, como nome, e-mail e telefone, pois isso ser\u00e1 \u00fatil para os recrutadores.<\/p>\n\n\n\n

Nesse mesmo arquivo, inclua os arquivos que voc\u00ea pretende disponibilizar no seu portf\u00f3lio, e deixe-os linkados \u00e0 p\u00e1gina principal.<\/p>\n\n\n\n

Em seguida, volte ao GitHub e crie um novo reposit\u00f3rio \u2014 que deve estar com visualiza\u00e7\u00e3o p\u00fablica. No momento da cria\u00e7\u00e3o, voc\u00ea pode escolher o nome do reposit\u00f3rio, que ser\u00e1 a sua URL quando a p\u00e1gina estiver pronta. O padr\u00e3o do link ser\u00e1 o nome que voc\u00ea escolheu + github.io. <\/p>\n\n\n\n

Na p\u00e1gina seguinte, voc\u00ea ter\u00e1 acesso \u00e0s configura\u00e7\u00f5es do diret\u00f3rio. Clique em Upload existing file<\/em> e carregue o arquivo com o template do seu portf\u00f3lio. Salve as mudan\u00e7as e aguarde at\u00e9 que o site esteja publicado.<\/p>\n\n\n\n

\"p\u00e1gina
Para subir um arquivo em HTML no GitHub Pages, basta clicar em Uploading an existing file, no campo de Quick Setup.<\/figcaption><\/figure>\n\n\n\n

Por fim, entre na URL e confira se est\u00e1 tudo certo. Se for necess\u00e1rio, fa\u00e7a altera\u00e7\u00f5es no arquivo salvo e fa\u00e7a um novo upload, ou simplesmente abra o arquivo diretamente no GitHub e altere o que for necess\u00e1rio.<\/p>\n\n\n\n

Com tudo publicado e o site no ar, basta acessar o link para conferi-lo. Tamb\u00e9m \u00e9 poss\u00edvel envi\u00e1-lo para recrutadores acessarem, no caso de uma entrevista. <\/p>\n\n\n\n

Aprenda programa\u00e7\u00e3o Front-End<\/strong><\/h2>\n\n\n\n

Se voc\u00ea est\u00e1 iniciando sua carreira como programador e quer melhorar suas habilidades para incluir no curr\u00edculo e conseguir atuar no mercado de trabalho, \u00e9 importante conhecer e estudar os principais conte\u00fados sobre o tema.<\/p>\n\n\n\n

No Curso de Front-End da Awari<\/a>, voc\u00ea aprende como programar utilizando HTML, CSS e Javascript, e tamb\u00e9m a utilizar o React JS e o Next JS para criar interfaces complexas e personalizadas. <\/p>\n\n\n\n

Voc\u00ea ter\u00e1 acesso a m\u00f3dulos de aulas gravadas completas para assistir como preferir, e ainda poder\u00e1 participar de aulas ao vivo com professores especialistas para tirar d\u00favidas e aprender com exemplos pr\u00e1ticos. <\/p>\n\n\n\n

Na plataforma da Awari, tamb\u00e9m ser\u00e1 poss\u00edvel agendar mentorias individuais<\/a> com grandes profissionais do mercado para auxiliar no desenvolvimento da sua carreira. Ao finalizar o curso, voc\u00ea recebe um certificado de conclus\u00e3o autenticado pela Abed (Associa\u00e7\u00e3o Brasileira de Educa\u00e7\u00e3o a Dist\u00e2ncia).
Quer saber mais? Clique aqui e entrenda tudo sobre o curso!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Para um programador, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um profissional. Para isso, ser\u00e1 preciso preparar um portf\u00f3lio. Seja para conseguir um emprego ou atuar como freelancer, uma das formas mais simples de criar o portf\u00f3lio \u00e9 por meio do GitHub Pages, […]<\/p>\n","protected":false},"author":9,"featured_media":121891,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-117850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\nGitHub Pages: saiba como usar e crie seu portf\u00f3lio - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Para um programador, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um pr...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GitHub Pages: saiba como usar e crie seu portf\u00f3lio - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Para um programador, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um pr...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-24T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-01T18:04:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/\",\"name\":\"GitHub Pages: saiba como usar e crie seu portf\u00f3lio - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2022-06-24T11:00:00+00:00\",\"dateModified\":\"2023-08-01T18:04:42+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Para um programador, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um pr...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\",\"width\":2560,\"height\":1708},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GitHub Pages: saiba como usar e crie seu portf\u00f3lio\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GitHub Pages: saiba como usar e crie seu portf\u00f3lio - Fluency.io Brasil","description":"Para um programador, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um pr...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/","og_locale":"pt_BR","og_type":"article","og_title":"GitHub Pages: saiba como usar e crie seu portf\u00f3lio - Fluency.io Brasil","og_description":"Para um programador, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um pr...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/","og_site_name":"Fluency.io Brasil","article_published_time":"2022-06-24T11:00:00+00:00","article_modified_time":"2023-08-01T18:04:42+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/","name":"GitHub Pages: saiba como usar e crie seu portf\u00f3lio - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#primaryimage"},"image":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#primaryimage"},"thumbnailUrl":"","datePublished":"2022-06-24T11:00:00+00:00","dateModified":"2023-08-01T18:04:42+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Para um programador, ter um bom curr\u00edculo \u00e9 essencial, entretanto, muitas vezes as informa\u00e7\u00f5es desse documento n\u00e3o demonstram todas as habilidades de um pr...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#primaryimage","url":"","contentUrl":"","width":2560,"height":1708},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/github-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"GitHub Pages: saiba como usar e crie seu portf\u00f3lio"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=117850"}],"version-history":[{"count":1,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117850\/revisions"}],"predecessor-version":[{"id":197724,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117850\/revisions\/197724"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/121891"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=117850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=117850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=117850"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=117850"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=117850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}