GitHub Pages｜Create Free Custom LinkTree-Style Personal Link Pages Fast

点击这里查看本文章简体中文版本。

點擊這裡查看本文章正體中文版本。

This post was translated with AI assistance — let me know if anything sounds off!

---

linkyee — Quickly Create a Personal LinkTree-Style Page for Free Using GitHub Pages

Create Your Own Link Page Quickly with GitHub Pages: 100% Free, Customizable, and Supports Custom Domains

Results

https://link.zhgchg.li

I have open-sourced the project and packaged it as a Template Repo (linkyee). Friends who need it can directly Fork to quickly deploy and use.

linkyee — Your Own Link Pages

Advantages:

• Direct Deployment on Github Pages: Stable and Free

• Master the HTML source file to freely modify layout, styles, remove ads, and copyright notices; (the default style is created by me using GenAI ChatGPT)

• Support Custom Domain Names

• Supports dynamic variables, such as preset Medium followers and GitHub repo star count variables, which can automatically update and display follower numbers on the page. 🚀🚀🚀

• Fast Page Loading

• Follow these simple steps to complete the setup and deployment.

Github Pages

Github Pages is a free static site hosting service provided by Github. All Github Free accounts can use it directly for Public Repos. For Private Repos, you need to upgrade your Github account with a paid plan.

Limitations

• Only static file resources can be hosted: HTML, CSS, JavaScript, font files, image files, PDFs, audio files, text files, etc.

• The website (Repo) size must not exceed: 1 GB. This seems to be a soft limit, as my Github Pages Jekyll Repo is already nearly 5 GB.

• Longest Deployment Time: 10 minutes

• Maximum deployments per hour: 10 times (soft limit)

• Monthly Data Limit: 100 GB (soft limit)

• Too many requests may result in an HTTP 429 response.

Other Github Pages Application Articles

• I deployed my Jekyll Blog using Github Pages ➡️ ZhgChgLi

• Painless Migration from Medium to Github Pages

• Github Pages Custom Domain Tutorial

Getting Started — Deploy on GitHub Pages

Step 1. Click the “Use this template” button at the top right of the linkyee template library -> “Create a new repository”:

Step 2. Check “Include all branches,” enter your desired GitHub Pages repository name, then click “Create repository”:

The GitHub Pages repo name will be the access URL.

If you name the repo your-username.github.io, this will become the direct access URL for your GitHub Pages site.

If you already have a your-username.github.io repo, the GitHub Pages URL will be your-username.github.io/Repo-Name.

Waiting for the Fork to complete. Deployment errors may occur initially due to permission issues with the Forked repository. Next, we will make adjustments step by step.

Step 4. Go to Settings -> Actions -> General, and make sure to select the following options:

• Actions permissions: Allow all actions and reusable workflows

• Workflow permissions: Read and write permissions

After making your selection, click the Save button to save the changes.

Step 5. Go to Settings -> Pages, and confirm the GitHub Pages branch is set to “gh-pages”:

The message “Your site is live at: XXXX” is your GitHub Pages public access URL.

Step 6. Go to Settings -> Actions, and wait for the first deployment to complete:

Step 7. Visit the GitHub Pages URL to confirm if the Fork was successful:

Congratulations! Deployment successful. You can now edit the configuration file and replace it with your data. 🎉🎉🎉

Settings

Setting up the file

Edit the config.yml file located in the root directory.

# Website Configuration  

# Theme name, corresponds to directory: ./theme/xxxx  
theme: default  

# HTML language setting  
lang: "en"  

# Plugins (implemented in ./plugins/PLUGIN_NAME)  
# Use {{ vars.PLUGIN_NAME }} in the settings below  

# Plugin output can be used below, e.g.: {{vars.MediumFollowersCountPlugin}}  
plugins:  
  # Automatically fetch Medium followers count  
  - MediumFollowersCountPlugin:  
      username: zhgchgli  
  # Automatically fetch GitHub repo stars count  
  - GithubRepoStarsCountPlugin:  
      - ZhgChgLi/ZMarkupParser  
      - ZhgChgLi/ZReviewTender  
      - ZhgChgLi/ZMediumToMarkdown  
      - ZhgChgLi/linkyee  

# Google Analytics tracking ID  
google_analytics_id:  

# HTML title  
title: "ZhgChgLi's Link Collection"  

# Avatar image path  
avatar: "./images/profile.jpeg"  

# Name block text  
name: "@zhgchgli"  

# Tagline block text  
tagline: >-  
    An iOS, web, and automation developer from Taiwan who loves sharing, traveling, and writing.  

# Links list  
# icon: use Font Awesome icons (https://fontawesome.com/search?o=r&m=free)  
# text: text displayed on the link  
# title: link title  
# url: link URL  
# alt: alternative text (for accessibility)  
# target: `_blank` opens in new tab, `_self` opens in same page  
links:  
  - link:  
      icon: "fa-brands fa-medium"  
      text: "Tech Blog <span class='link-button-text'>({{vars.MediumFollowersCountPlugin}} Followers)</span>"  
      url: "https://blog.zhgchg.li"  
      alt: "ZhgChgLi's Tech Blog"  
      title: "ZhgChgLi's Tech Blog"  
      target: "_blank"  
  - link:  
      icon: "fa-brands fa-medium"  
      text: "Travel Journal <span class='link-button-text'>({{vars.MediumFollowersCountPlugin}} Followers)</span>"  
      url: "https://medium.com/ztravel"  
      alt: "ZhgChgLi's Travel Journal"  
      title: "ZhgChgLi's Travel Journal"  
      target: "_blank"  
  - link:  
      icon: "fa-solid fa-rss"  
      text: "Personal Website"  
      url: "https://zhgchg.li/"  
      alt: "ZhgChgLi's Website"  
      title: "ZhgChgLi's Website"  
      target: "_blank"  
  - link:  
      icon: "fa-brands fa-swift"  
      text: "ZMarkupParser <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/ZMarkupParser']}} Stars)</span>"  
      url: "https://github.com/ZhgChgLi/ZMarkupParser"  
      alt: "ZMarkupParser is a pure Swift library to convert HTML strings into NSAttributedString with custom styles."  
      title: "ZMarkupParser is a pure Swift library to convert HTML strings into NSAttributedString with custom styles."  
      target: "_blank"  
  - link:  
      icon: "fa-brands fa-app-store-ios"  
      text: "ZReviewTender <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/ZReviewTender']}} Stars)</span>"  
      url: "https://github.com/ZhgChgLi/ZReviewTender"  
      alt: "ZReviewTender is a tool to fetch app reviews from App Store and Google Play Console and integrate them into workflows."  
      title: "ZReviewTender is a tool to fetch app reviews from App Store and Google Play Console and integrate them into workflows."  
      target: "_blank"  
  - link:  
      icon: "fa-brands fa-markdown"  
      text: "ZMediumToMarkdown <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/ZMediumToMarkdown']}} Stars)</span>"  
      url: "https://github.com/ZhgChgLi/ZMediumToMarkdown"  
      alt: "ZMediumToMarkdown is a powerful tool to easily download and convert Medium articles into Markdown format."  
      title: "ZMediumToMarkdown is a powerful tool to easily download and convert Medium articles into Markdown format."  
      target: "_blank"  
  - link:  
      icon: "fa-brands fa-github"  
      text: "linkyee <span class='link-button-text'>({{vars.GithubRepoStarsCountPlugin['ZhgChgLi/linkyee']}} Stars)</span>"  
      url: "https://github.com/ZhgChgLi/linkyee"  
      alt: "linkyee is a fully customizable and open-source LinkTree alternative deployable directly on GitHub Pages."  
      title: "linkyee is a fully customizable and open-source LinkTree alternative deployable directly on GitHub Pages."  
      target: "_blank"  

# Social media links list  
# icon: use Font Awesome icons (https://fontawesome.com/search?o=r&m=free)  
# title: link title  
# url: social media URL  
# alt: alternative text (for accessibility)  
# target: `_blank` opens in new tab, `_self` opens in same page  
socials:  
  - social:  
      icon: "fa-brands fa-medium"  
      url: "https://blog.zhgchg.li"  
      title: "ZhgChgLi's Medium"  
      alt: "ZhgChgLi's Medium"  
      target: "_blank"  
  - social:  
      icon: "fa-brands fa-github"  
      url: "https://github.com/ZhgChgLi"  
      title: "ZhgChgLi's GitHub"  
      alt: "ZhgChgLi's GitHub"  
      target: "_blank"  
  - social:  
      icon: "fa-brands fa-twitter"  
      url: "https://twitter.com/zhgchgli"  
      title: "ZhgChgLi's Twitter"  
      alt: "ZhgChgLi's Twitter"  
      target: "_blank"  
  - social:  
      icon: "fa-brands fa-linkedin"  
      url: "https://www.linkedin.com/in/zhgchgli/"  
      title: "ZhgChgLi's LinkedIn"  
      alt: "ZhgChgLi's LinkedIn"  
      target: "_blank"  
  - social:  
      icon: "fa-brands fa-instagram"  
      url: "https://www.instagram.com/zhgchgli/"  
      title: "Instagram"  
      alt: "ZhgChgLi's Instagram"  
      target: "_blank"  
  - social:  
      icon: "fa-solid fa-envelope"  
      url: "zhgchgli@gmail.com"  
      title: "Email: zhgchgli@gmail.com"  
      alt: "zhgchgli@gmail.com"  
      target: "_blank"  

# Footer text  
footer: >  
    Welcome to my website! Follow me on Medium or GitHub for the latest updates, or stay connected on Instagram and LinkedIn.  

# Footer copyright statement  
# Linkyee is a 100% free open-source project—you can freely modify the copyright statement. :)  
copyright: >  
  © 2024 <a href="https://zhgchg.li" target="_blank">ZhgChgLi</a>. Powered by <a href="https://github.com/ZhgChgLi/linkyee" target="_blank">linkyee</a>.  

Please note, after each file modification, you need to wait for GitHub Actions to complete the automated build, page build, and deployment tasks.

Refresh the page to apply the changes. 🚀

Success!!

Customize Style, Modify Default Theme

• ./themes/default/index.html

• ./themes/default/styles.css

• ./themes/default/scripts.js

Create New Topic

• ./themes/ YOUR_THEME

• Update in the config.yml file to theme:YOUR_THEME

That’s right, you can use GenAI tools like ChatGPT to help you create custom link pages! (The default style was also generated by ChatGPT)

Automatic Redeployment

By default, the project redeploys automatically once a day to refresh the dynamic variable values of the plugin. You can adjust the cron settings in Github Action — Automatic build ( .github/workflows/build.yml):

schedule:
 - cron: '0 0 * * *' # Run daily at midnight 00:00 (UTC)

If you don’t need to redeploy on a schedule, you can remove the schedule block directly.

Custom Domain ❤️❤️❤️

You can set up a custom GitHub Pages domain, for example mine: https://link.zhgchg.li .

You can refer to my previous article “Github Pages Custom Domain Tutorial” for a step-by-step guide from purchasing to binding a domain. You can also buy a domain through my Namecheap referral link — I will receive a commission, which helps me continue contributing to open source projects.

Buy me a coffee ❤️❤️❤️

https://www.buymeacoffee.com/zhgchgli

If this project helps you, please consider Starring the Repo or recommending it to friends, or buying me a coffee. Thank you for your support!

Feel free to submit an Issue or contribute fixes via Pull Request. :)

If you have any questions or feedback, feel free to contact me.

---

This post was originally published on Medium (View original post), and automatically converted and synced by ZMediumToMarkdown.

Improve this page on Github.

Follow Me on Medium 1K+ Followers