{"id":22928409,"url":"https://github.com/ciaanh/hosthub","last_synced_at":"2025-10-13T21:12:16.773Z","repository":{"id":91746570,"uuid":"231938252","full_name":"Ciaanh/hosthub","owner":"Ciaanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-23T02:08:55.000Z","size":730,"stargazers_count":5,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-17T23:03:30.730Z","etag":null,"topics":["database","github","github-pages","javascript","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Ciaanh.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,"zenodo":null}},"created_at":"2020-01-05T15:36:03.000Z","updated_at":"2025-04-11T04:01:38.000Z","dependencies_parsed_at":"2024-04-23T04:00:14.994Z","dependency_job_id":"a2996584-84ee-4375-878f-561ad476a3e3","html_url":"https://github.com/Ciaanh/hosthub","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ciaanh/hosthub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ciaanh%2Fhosthub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ciaanh%2Fhosthub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ciaanh%2Fhosthub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ciaanh%2Fhosthub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ciaanh","download_url":"https://codeload.github.com/Ciaanh/hosthub/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ciaanh%2Fhosthub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017053,"owners_count":26085949,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["database","github","github-pages","javascript","react"],"created_at":"2024-12-14T09:19:10.018Z","updated_at":"2025-10-13T21:12:16.756Z","avatar_url":"https://github.com/Ciaanh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What if… hosting sources, website and database on GitHub\n\nI often have ideas, not always good ones and most of the time it remains just an idea but sometimes I need to test it.\nRecently I have been working on a small project (a World of Warcraft addon, I may talk about it when it's finished) and I found out that I needed to have a website to access a database and allow people help me to add simple data in it.\nThe thing is I'm sometime quite lazy and for a little side project I didn't want to setup a whole environment with a server and a database. So I asked myself \"What if I put everything on GitHub?\" and here we are trying to find out if this is possible or just another crazy idea of mine.\n\n## A new react application\n\nFirst we create a basic React application, let's call it \"hosthub\"\n\n```\nnpx create-react-app hosthub\n```\n\nNow we'll customize a bit our basic React application.\nLet's say we want it to allow displaying and editing about users and their roles (same behaviour as my article about [react inside VS Code webview](https://medium.com/younited-tech-blog/reactception-extending-vs-code-extension-with-webviews-and-react-12be2a5898fd)).\nWe use a \"Config\" component to display a small editor with a bit of css and a default JSON file with some sample data, then we add this component to our App instead of the generated code (the logo and \"learn react\" link).\n\nYou can find here the elements I added :\n[Config component](https://gist.github.com/Ciaanh/917d6a035c8a5530f8580e6960fa701c)\n[CSS file](https://gist.github.com/ciaanh/ed8a1d2347fd54a95922ceee5e2ecc41)\n[Sample JSON](https://gist.github.com/Ciaanh/9a018bba4f316babef3b04331578f570)\n\nAnd the changes to the previously generated App.js file to use our new component:\n[https://gist.github.com/Ciaanh/48a357001b38d1a8f1f6747335b39fe4]\n\nTo be sure everything works we can launch the website using `npm start` and push the application to GitHub.\n\n```\ngit init\ngit add -A\ngit commit -m \"first commit\"\ngit remote add origin https://github.com/\u003cYOUR_REPO\u003e\ngit push -u origin master\n```\n\n## Deploy the website\n\nOk, now that we have a React application the next step is to deploy it.\n\nYou may not know this but GitHub offer a solution to host a small static website for your project. This can be really helpful to have a landing point where you can show a little more than a ReadMe.md file ;-)\n\nThe good news is that we won't need much effort as there is a very useful npm package which handle the deployment of our application which is [gh-pages](https://github.com/tschaub/gh-pages).\nOf course you can do it all by yourself, fine tuning the deployment and hosting (and I recommend you to read all you can do with [GitHub Pages](https://pages.github.com/)) but the point of this article is **\"quick and simple\"** that's why I chose to use gh-pages.\n\nWe install the package:\n\n`npm install gh-pages --save`\n\nWe also need to update the package.json to add the commands to deploy our application:\n\n```\n\"predeploy\": \"npm run build\",\n\"deploy\": \"gh-pages -d build\"\n```\n\nAnd most importantly we define the homepage of our application on GitHub as a property of our _package.json_ (if you don't the css and js files will not be found by the generated html). The default url format is \u003chttp://myname.github.io/myapp/\u003e so for my application it will be \u003chttp://ciaanh.github.io/hosthub/\u003e\n\n```\n\"homepage\": \"https://ciaanh.github.io/hosthub/\"\n```\n\nTo make it work we just have to launch the deployment with the command:\n\n`npm run deploy`\n\nWe now have on GitHub a new branch `gh-pages` containing a compiled version of our website. We can visit the website specified in the \"homepage\" variable to check everything is ok.\n\n## Set up the database\n\nCongratulations, we managed to deploy a static website. But the thing is that we want a more _dynamic_ website.\n\nAnd here's the fun idea **use GitHub as a database**\n\nWe know that our application use JSON as a datasource and we can store JSON file on GitHub, so we just have to find a way to load JSON files from our repository and save any changes we make.\n\nI first turned to [Hubdb](https://github.com/mapbox/hubdb) which is a wrapper for GitHub API handling JSON files. But the thing is, this implementation requires a valid token for read and write, this is not exactly what I want as reading from a public repo should not require authentication.\nSo let's take inspiration from Hubdb and implement our own GitHub accessor using [octokat.js](https://github.com/philschatz/octokat.js/) which implement GitHub API in Javascript.\n\nFirst we have to install the GitHub API connector:\n\n`npm install octokat`\n\nWe also need _atob_ and _btoa_ to handle base 64 encoding:\n\n`npm install atob btoa`\n\nLet's create a new branch _\"db\"_\n\n`git checkout -b db`\n\nWe can delete all the files and leave only the _sample.json_ file, then we commit and push the branch:\n\n```\ngit add -A\ngit commit -m \"init db\"\ngit push --set-upstream origin db\n```\n\n\nWe add a GitHubApi class to our application to handle the access to our new branch. Based on the [documentation of octokat.js](https://github.com/philschatz/octokat.js/#readwriteremove-a-file) we need only two functions, _get_ and _update_.  \nThe _get_ function reads the JSON file from the repository and parse it.  \nThe _update_ function take use token to connect to the repository and save the changes with a commit.\n\n[https://gist.github.com/Ciaanh/b5c7f3b81a3a0a79973f4f33489e5c7e]\n\nWe don't have much modifications to make to our Config component, we change the source for our JSON in the _loadDbFile_ function.\n\n[https://gist.github.com/Ciaanh/331a6dd9535a8a5ffc5efb7853fa7485]\n\nWe add an input text field and a button to save the data using a valid GitHub token with a new _saveDbFile_ function\n\n[https://gist.github.com/Ciaanh/d72ccbf9640740f015e493a23e728668][https://gist.github.com/ciaanh/e9ae382925abf818cf83e43e7863e5c9]\n\nAnd it's done, we can read and write a JSON file on GitHub with a React application also hosted on GitHub.\nBut now that we proved that it can be done we have to ask ourselves if it's a good solution or not.  \nI can only let you decide if this solution suits your needs but there are some things to consider here:\n\nPros\n\n- As you can see it is really simple to do.\n- For a small project it can save you the need to set up a complete infrastructure with a web server and a database server.\n- It's free.\n\nCons\n\n- We have to provide a token which is not the best to paste it in our application and a very bad idea if it's stored publicly in our code as anyone could use it to impersonate you on GitHub (one side note, we could add authentication with GitHub to handle access rights and/or allow pull request)\n- If you need only to read from JSON files we can already do it using React as we did at step 1.\n\n\nSource code of every step can be found here https://github.com/Ciaanh/hosthub.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciaanh%2Fhosthub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fciaanh%2Fhosthub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fciaanh%2Fhosthub/lists"}