Is it possible to have some data stored somewhere on your personal GitHub Pages?
For example a button that triggers a counter. When you click on the button, counter increments by 1. When other user visits that page and clicks the button, counter gets incremented by 1 once again.
So it would be a sum of all click across all visitors that would be displayed on the page.
Github pages only allow for static content, so you'd have to use something like firebase in order to get a database.
The accepted answer about Firebase is a good, quick reply, but I want to write a longer and more comprehensive response for anyone who is investigating this topic, as Firebase is one of several ways to achieve this kind of functionality.
By way of background, databases/datastores like mysql, postgres, redis, mongodb, etc. are the most common way to store visitor data in the way that the next visitor and see or access it. Content management systems such as Django, Wordpress, and Drupal are built to read and write to a database. These services tend to be server-side technology, which is to say that a server admin sets them up, and blocks of code that the website's users cannot see communicate with the database. That server side code base also builds the rendered html that a user will see. So in general, Github Pages are not used with these kinds of technology because they support only static html, css, and javascript--that is, they allow client side code only.
For more on this topic, see How to connect html pages to mysql database?
If you want to set up a read only datastore, you have a lot of options on Github pages. You could put a json file in your repo, query a drive document, upload an sqlite.db file to your repo and query it, etc. In this imagined example, you would have to be ok with a website user seeing any data in your datastore, as the setup would not provide a way to make some data invisible to the user.
As soon as you're thinking about writing to your database, however, security is a concern. If you set up some kind of offsite database and put DB access credentials into your client-side code, any user could see those credentials and compromise your database (inject data, take it over, delete it, etc.) For this reason alone, you need a setup that passes data from the front end to the back end and vice versa without letting website traffic see under the hood. As I understand it, this is a level of functionality that Github Pages can't give you.
For more on client-side database security, see this thread: https://softwareengineering.stackexchange.com/questions/180012/is-there-any-reason-not-to-go-directly-from-client-side-javascript-to-a-database
One potential workaround is to use your static side to link to a third party service. You can, for example, embed a Google form in an html page. That form can link to a Google sheet. That sheet can be published to the web and be set to update automatically. Your Github pages site can reference the public version of that page and update (on a delay) when changes are submitted. This type of setup is clunky (I assume Google sheets get slow if they get too big) and should be used with caution, as a poorly designed form of this kind could be a spam magnet. Not to mention that anyone who looks at your client side code will be able to find an view the public version of your Google sheet, which will include submission time and user data if you collect it. However, if used carefully, it could work for the use case mentioned above.
Using Github's HTTP REST API: https://developer.github.com/v3/ One can commit/update a json file or an sqllite file into a github pages repo via browser js.
Depending on your needs, you can try GithubDB
From their docs:
Ever wanted to use Github as your private database, now you can.
Why would I want to use Github as my database?
Good question. Developers have many choices of different databases, GithubDB however leverages all the features you have come to love from Github.
Logging (With Github, you can quicky look at your commits and see the write and updates for your request).
Visualization (Github offers amazing tools to visualize the incoming number of read/writes).
Persistance (With Github you can rollback to early stages of your data and see how it has evolved).
Security (Using Github, your database inherits the same standards from Github).
Availability (Github has known to be down, but let's be honest, it is good enough unless you are Facebook).
GitHub Pages is a static site on its own, as many have already pointed out. There are a few workarounds for using an external database, but why not rely on a public repository's issue tracker? Programmatically, we can read any issue from a repository.
If the database is just needed for a blog-like page or a dynamic news page on GitHub Pages, you can create a script that queries the issues from your public repository and lists them as posts. By clicking on one of these posts, you can load the issue content and also display the comments as replies.
You don't actually need a data entry interface for your blog, since you can do that directly in your GitHub public repository.
Here, by following the API documentation, you can specify which issues written by a particular username you want to query, or which issues with specific labels you want to fetch, or you can sort them, etc.
const username = 'laravel'; const repo = 'framework'; async function getIssues(page = 1, perPage = 10) { try { // Query issues const response = await axios.get(`https://api.github.com/repos/${username}/${repo}/issues`, { params: { page: page, per_page: perPage, } }); if (response.data.length === 0) { console.log('No more issues.'); return; } console.log(`Issues on page ${page} (total ${response.data.length} results):`); response.data.forEach(issue => { console.log(`#${issue.number}: ${issue.title} - ${issue.html_url}`); }); } catch (error) { console.error('Error fetching issues:', error); } } // Fetch the first 10 issues getIssues(1, 10); // Fetch the second 10 issues getIssues(2, 10);<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>const username = 'laravel'; const repo = 'framework'; async function getIssueDetails(issueNumber) { try { // Query the issue const issueResponse = await axios.get(`https://api.github.com/repos/${username}/${repo}/issues/${issueNumber}`); console.log(`Issue #${issueResponse.data.number}: ${issueResponse.data.title}`); console.log(`Description: ${issueResponse.data.body}`); // Query the comments for the issue const commentsResponse = await axios.get(issueResponse.data.comments_url); if (commentsResponse.data.length === 0) { console.log('No comments.'); } else { console.log(`Comments:`); commentsResponse.data.forEach(comment => { console.log(`- ${comment.user.login}: ${comment.body}`); }); } } catch (error) { console.error('Error fetching issue details:', error); } } // Example: Query issue #5 getIssueDetails(5);<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>To display the content, you just need a markdown renderer.
document.getElementById('output').innerHTML = marked.parse(` # Marked in browser\n \n \`\`\`\n const example = "hello world";\n \`\`\`\n \n Rendered by **marked**. `);<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <div id="output"></div>