{"id":23698410,"url":"https://github.com/ribafs/index","last_synced_at":"2025-06-16T09:02:45.363Z","repository":{"id":107204177,"uuid":"509565370","full_name":"ribafs/index","owner":"ribafs","description":"Alguns dos meus principais repositorios","archived":false,"fork":false,"pushed_at":"2022-11-10T13:12:43.000Z","size":964,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-29T17:24:51.770Z","etag":null,"topics":["github","index","ribafs"],"latest_commit_sha":null,"homepage":"https://ribafs.github.io/index","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ribafs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2022-07-01T19:17:13.000Z","updated_at":"2022-11-08T12:45:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"b696bc84-900c-474d-bbd5-5542898d2633","html_url":"https://github.com/ribafs/index","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ribafs/index","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ribafs%2Findex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ribafs%2Findex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ribafs%2Findex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ribafs%2Findex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ribafs","download_url":"https://codeload.github.com/ribafs/index/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ribafs%2Findex/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260130619,"owners_count":22963427,"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","index","ribafs"],"created_at":"2024-12-30T07:16:24.698Z","updated_at":"2025-06-16T09:02:45.356Z","avatar_url":"https://github.com/ribafs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Criação de um site em HTML estático\n\nDe forma prática\n\nPartindo do site criado no tutorial citado ao final (gratidão aos autores)\n\nEste site destina-se a listar por categorias, todos os meus repositórios, inclusive os forks no Github. Como hoje, 08/11/2022, existem 909 repositórios na minha conta, sendo 130 meus e os demais forks, fica muito trabalhoso percorrer ou pesquisar por repositórios. Então resolvi criar um repositório com o nome index e listar todos os repositórios agrupados por categorias. Então, durante a elaboração resolvi criar uma Github page para o mesmo. Procurei um tutorial sobre a criação de um site com Bootstrap, pois para mim é a solução mais prática. Então encontrei o tutorial do link acima, que contém os arquivos para download. Este me agradou especialmente por dois motivos, por ser relativamente simples (seu CSS/BS) e especialmente por ser responsivo.\n\n## Acesse\n\nhttps://ribafs.github.io/index\n\n## Projeto do site\n\n### Categorias\n\nFront-end Back-end Mobile DevOps Servidores Nocode Cursos Ferramentas Extra\n\nDeixarei todos os arquivos no raiz para facilitar meu trabalho.\n\n## Metodologia\n\nA forma mais prática que encontrei para a construção foi usando o método load() do jQuery. Assim fica similar ao include do PHP, não repito código e reduzo meu trabalho.\n\nCriarei uma pasta includes e dentro dela:\n- header.txt - contendo o head, os links e o menu, até a tag \u003c/nav\u003e\n- footer.txt, da tag \u003cfooter\u003e pra baixo\n\nO texto que ficará no body estará dentro das tags \u003cheader\u003e e \u003c/header\u003e\n\nTroquei os arquivos dos assets pelos respectivos CDN, para facilitar apra mim, exceto main.css e main.js.\n\nDurante a construção tive que realizar vários ajustes no template original para adaptar ao meu conteúdo, mas sempre tendo o cuidado de manter o mesmo responsivo.\n\nO uso do método load precisa ser no diretório web, pois se for executado fora dele, não funciona e receberemos erro no console:\n\n\"Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto em file:///backup/transp/index/includes/header.txt (motivo: requisição CORS não é http).\"\n\n## Conteúdo\n\nA forma mais produtiva de criação de sites que já experimentei é usando o CMS Joomla. Quando vou criar um site em HTML estático ficoc procurando formas de fazer isso mais produtivo, pois relativamente é algo trabalhoso.\n\n- Inicialmente criei uma lista em arquivo texto, por categoria, dos repositórios\n- Seleciono cada grupo, copio e colo num arquivo em branco do LibreOffice Texto. Caso tenha hífens eu os removo todos com Ctrl+H\n- Porque o LibreOffice? Porque com ele crio links de forma prática. Basta colocar o cursos ao final do texto e teclar espaço. Então ele cria o link\n- Quando transformo todos em link, teclo Ctrl+A, Ctrl+X e vou ao editor HTML SunEditor e teclo Ctrl+V para colar os links na textarea.\n- Depois de organizar um pouco eu clico no botão para exibir código  fonte\n- Então seleciono tudo e teclo Ctrl+X\n- Agora eu crio o arquivo que será o body do arquivo do site. Um exemplo: css.txt (depois o mudarei para .html). Abro o css.txt e colo o conteúdo do editor.\n\nEste site tem como conteúdo basicamente links. No caso de conteúdo comum, com texto formatado, imagens, vídeos, etc, eu geralmente também uso o editor SunEditor para criar com conforto e exporto o código fonte.\n\n## Como crio cada arquivo\n\nExemplo, para criar o arquivo css.html, eu procedo assim:\n```\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cdiv id=\"header\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://code.jquery.com/jquery-3.5.1.min.js\" integrity=\"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e$( \"#header\" ).load( \"includes/header.txt\" );\u003c/script\u003e\n\n\t\t\u003cheader class=\"main\"\u003e\n\t\t\t\u003cdiv class=\"body text-center\"\u003e\n\t\t\t\t\u003ch1\u003eCSS\u003c/h1\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv class=\"container p\"\u003e\n\nAqui fica a relação de links de repositórios sobre CSS\n\n\t\t\t\u003c/div\u003e\n        \u003c/header\u003e\n\n\u003cdiv id=\"footer\"\u003e\u003c/div\u003e\n\u003cscript\u003e$( \"#footer\" ).load( \"includes/footer.txt\" );\u003c/script\u003e\n```\n\n## Problema\n\nEsta é a melhor alternativa que encontrei de criar sites em HTML estático, mas tem um problema. O método load() do jQuery provoca este efeito blink, piscada, sempre que carrega uma página. Pesquisei bastante mas ainda não encontrei uma solução.\n\n## Crédito pelo original\n\nhttps://websitesetup.org/bootstrap-tutorial-for-beginners/\n\n## Referências\n\nhttps://www.umov.me/tecnologia-no-code\n\nhttps://awari.com.br/linguagens-de-programacao-front-end/\n\nhttps://harve.com.br/blog/desenvolvimento-web/o-que-e-backend-guia-completo/\n\nhttps://www.totvs.com/blog/developers/metodologia-devops/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fribafs%2Findex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fribafs%2Findex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fribafs%2Findex/lists"}