Setting up a guestbook on your GitHub profile is a great way to interact with visitors and showcase your projects. It allows others to leave comments, feedback, or appreciation for your work, making your profile more interactive and welcoming. Here’s a step-by-step guide on how to set up a guestbook using GitHub Actions.
What is a guestbook?
Guestbook is a simple application that allows visitors to leave messages or comments without creating an account. In the context of GitHub, this can be implemented as part of your profile readme, where users can submit their ideas directly through issues in the repository.
Check here Click the green “Click here” button and add a comment.
Your message will be added to the table.
Why add a guestbook?
- got engaged: The guestbook encourages interaction with your audience and lets them share their thoughts and experiences.
- feedback: It provides a platform for users to provide feedback on your project, which is invaluable for improvement.
- community building: By allowing others to express their appreciation or suggestions, you can foster a sense of community at work.
Step 1: Create the repository
- Create a new repository: Start by setting up a new repository on GitHub where you will host the guestbook. In order to appear on your Github profile, you can name the repository the same as your Github username. For example, https://github.com/LovelyDev829/LovelyDev829.
- Initialize using the readme file: Make sure the repository has a readme file as this will be where the guestbook entries are displayed.
Step 2: Install guestbook operation
To automate the process of adding comments to a guestbook, you can use the readme-guestbook GitHub Action.
-
Add operation: In your repository, create a new workflow file
.github/workflows/guestbook.yml. - Define workflow: Use the following example configuration:
name: Guestbook
on:
issue_comment:
types: [created, edited, deleted]
permissions:
contents: write # Grant write permission to the contents of the repository
jobs:
update_guestbook:
name: Update guestbook
if: ${{ github.event.issue.title == 'Guestbook' }}
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v3
- name: Update guestbook from comments
uses: actions/github-script@v6
with:
script: |
const truncateString = (str, num) => str.length > num ? str.slice(0, num) + "..." : str;
const query = `query($owner:String!, $name:String!, $issue_number:Int!) {
repository(owner:$owner, name:$name){
issue(number:$issue_number) {
comments(first:5,orderBy:{direction:DESC, field:UPDATED_AT}) {
nodes {
author {
avatarUrl(size: 24)
login
url
}
bodyText
updatedAt
}
}
}
}
}`;
const variables = {
owner: context.repo.owner,
name: context.repo.repo,
issue_number: context.issue.number
}
const result = await github.graphql(query, variables);
const renderComments = (comments) => {
return comments.reduce((prev, curr) => {
let text = curr.bodyText.replace(/(\r\n|\r|\n)/g, "
").replace('|', '|');
text = truncateString(text, 125);
return `${prev}| ${curr.author.login} |${new Date(curr.updatedAt).toLocaleString()}|${text}|\n`;
}, "| Name | Date | Message |\n|---|---|---|\n");
};
const fileSystem = require('fs');
const readme = fileSystem.readFileSync('README.md', 'utf8');
fileSystem.writeFileSync('README.md', readme.replace(/(?<=.*\n)[\S\s]*?(?=|$(?![\n]))/gm, renderComments(result.repository.issue.comments.nodes)), 'utf8');
- name: Push guestbook update
run: |
git config --global user.name 'Github Actions'
git config --global user.email '41898282+github-actions[bot]@users.noreply.github.com'
git commit -am ':sparkles: update guestbook' || exit 0 # Avoid error if no changes
git push
Step 3: Create a comment question
Create a question called “Guestbook” in your repository, which will be used as the comments section of your guestbook.
Step 4: Modify your readme file
In the readme file, add a marker for where guestbook entries appear:
| Name | Date | Message |
|---|---|---|
| bryan6738 |12/7/2024, 2:30:38 PM|Nice, highly recommend.|
| bestdeveloper23 |12/7/2024, 2:28:16 PM|WooooooW.|
| reactmaster223 |12/7/2024, 2:25:47 PM|Really Nice Profile !!!|
[](https://github.com/LovelyDev829/LovelyDev829/issues/1)
notes: replace
LovelyDev829Use your Github username.
in conclusion
Adding a guestbook to your GitHub profile is an effective way to increase engagement and build a community around your project. By following these steps, you can create an engaging space that allows visitors to connect with you and provide valuable feedback. Not only does this highlight your work, it also demonstrates your commitment to fostering collaboration and communication within the developer community.
Start setting up your guestbook today and watch the engagement on your profile grow!
Follow me on Github: https://github.com/LovelyDev829