This is a personal blog system built with Next.js, featuring a Glassmorphism design. This project includes a frontend display and an independent local backend console. It supports Markdown writing, draft management, and image hosting configuration.
This guide will take you from scratch to deploy and use XHBlogs.
Adjusted mobile visual effects to reduce lag on mobile devices.
Implemented mobile adaptation for Home, Talks, and Archive pages, and added a mobile navigation bar.
Commit history is now visible.
You can now edit the copyable information in the console.
Fixed the crash issue with Start.bat and the inability to modify the title.
Implemented source code updating.
Before starting, please ensure your computer has the following runtime environments installed; otherwise, the program will not start properly:
- Node.js (v18.x or above recommended)
- Package Manager (npm)
- Git (for pulling code and version control)
- Python (v3.10 or above recommended; tested under v3.10)
- Optional: Cloud storage/Image hosting service (detailed configuration instructions provided later)
To easily keep up with the latest features, please use the updater to update the source code! By using the updater, you no longer need to manually compare code, worry about pull conflicts, or fear that your articles and configuration files will be overwritten.
🛠️ Update Steps:
Step 1: Obtain the lossless updater (only required for the first time)
2. Move the downloaded update.bat and update.py to the outermost root directory of your local blog project (i.e., alongside the my-blog-manager and XHBlogs folders).
As shown below:
3. Double-click the update.bat file to update. If it crashes, please run the update.py file using CMD.
Once you have completed the environment configuration above, the basic preparation is done.
First, enter the my-blog-manager folder (
Double-click to run the startup script in the folder:
Start.bat
The script will automatically detect and install the required dependencies. Once the environment configuration is complete, the program will launch the backend console.
Tip: This tutorial primarily demonstrates how to deploy the project to Vercel, as Vercel provides native support for the Next.js framework. Prerequisite: Please ensure Git is installed and you have a GitHub account. Be sure to follow the upcoming steps in order!
Please ensure you have completed the following operations: Step 1: Local Global Configuration
Set username
git config --global user.name "Your_GitHub_Username"
Set email (must be the email associated with your GitHub)
git config --global user.email "your_email_linked_to_github@example.com"
Step 2: Initialize Local Repository Enter your project folder and execute the following CMD commands: (the frontend deployment folder, which is XHBlogs here)
- Initialize Git repository to generate the hidden .git folder
git init - Add all files to the staging area (note the period at the end)
git add . - Commit to the local repository and add a remark
git commit -m "first commit"
1. Configure Local Physical Path
Open the "Settings" page in the console.
The pulled source code contains two core folders: XHBlogs-manager and XHBlogs. Please specify the local physical path of XHBlogs in the console.
Example: F:\Test2\XHBlogs
Crucial Step: After entering the path, you must click [Test Path] to verify connectivity! Once verified, click [Save Dual-Track Configuration] below.
2. Create a Private Repository on GitHub Log in to GitHub and create a new repository to host your blog's source code (it is recommended to set it as a Private repository to protect data privacy).
The repository name can be customized.
Obtain the SSH address of the repository and paste it into the "Line B" configuration in the console:
Enter main for the source code branch. After confirming it is correct, click [Save Dual-Track Configuration] again.
3. Obtain and Configure Deployment Key Click the [Get Line B Exclusive Key] button in the console:
Go to your GitHub repository page and navigate to the Settings -> Deploy keys interface:
Paste the copied key into the Key box. The Title can be anything (e.g., XHBlogs-Deploy-Key).
🚨 Critical Warning: The Allow write access option below MUST be checked! After setting it up, click Add key to save.
4. Initialize and Push Source Code Return to the local console, click [Smart Initialize Dual-Track Environment], and wait for the program to finish executing. Once completed, click the [Sync Source Code Only] button:
The program will begin pushing code to GitHub. During this time, please do not switch pages or close the window:
Once the progress bar is complete, the frontend static page source code has been successfully hosted on GitHub.
A push failure bug may occur here: Please try: Change the SSH repository address as shown below before initializing and syncing the source code.
5. Deploy to the Vercel Platform Visit the Vercel website, register an account, and bind your GitHub authorization.
Click Add New... to add a new Project, and select the repository you just pushed to GitHub from the Import list:
For example, I selected XHBlogS2:
Select Next.js in Framework Preset, then click the Deploy button to start deployment:
Wait for the Vercel server to build your blog.
Deployment successful! Click the preview image to visit your website directly.
In the project Dashboard, you can check the deployment status and detailed logs at any time:
Vercel will assign you a free subdomain by default:
Answer: Here is an example using a domain purchased from "Alibaba Cloud" (the operation logic for other providers like Tencent Cloud, Cloudflare, etc., is similar).
First, log in to the Alibaba Cloud console and enter the [Domain Name Management] page:
Click the [DNS Resolution] button on the right side of the corresponding domain:
Then return to Vercel, enter your project dashboard, and click Settings (or directly click the plus sign next to the domain name):
In the Domains tab, enter the domain you purchased (for example, mine is xinghuisama.top), and click Add to save:
After adding it, Vercel will provide the configuration parameters for the A record and CNAME record. Please add these parameters completely to your Alibaba Cloud DNS resolution settings:
Note: When adding records, be sure to carefully check the record type and Value!
After configuration is complete, wait a few minutes (DNS propagation takes time), and click Refresh on the Vercel page to update the status.
Once the status shows as normal, you can access the blog via your custom domain name! (For example: www.xinghuisama.top).
To protect data safety, this console uses an "Operation Staging Area" mechanism. Please pay special attention! Many settings must be actively "Updated to Local" after modification to be truly saved. When this operation is required, there is usually a highlighted prompt at the top of the interface.
Operation Example: Modifying Personal Profile
After modifying the content, click [Stage to Operation Queue]:
At this point, the top toolbox will prompt pending operations. You can undo at any time (clear all), or click [Update Local].
⚠️ Note: After clicking "Update Local," the data is only saved in your local console environment.
If you want these modifications to take effect on the frontend blog page, you must continue by clicking [Sync Blog] (assuming the physical path of the frontend blog is configured correctly):
The publishing and modification of all content, such as blog posts, moments, and talks, follow this process.
💡 Golden Rule: Staging Queue -> Update Local -> Sync Blog
When you have completed satisfactory creations or settings adjustments locally and want to publish them to the public network for everyone to see:
Please remember, after making any substantial modifications and clicking [Sync Blog], open the synchronous deployment page in the console:
Confirm that the "Line B" address is correct, and click [Sync Source Code Only]. Wait for GitHub Actions or Vercel to automatically capture the update. In a short time, you will see the latest content on the live page.
To optimize the writing experience, the console integrates image hosting upload functionality. This guide uses "7bu Image Hosting" (https://7bu.top) as a reference. If you prefer using direct external links, the console also supports direct insertion of image URLs. If you want to connect other image hosting services that support standard APIs, you can attempt to do so.
Configuration Process:
After filling in the corresponding API Token and other information, you can click [Send Probe to Test Token] to verify in real-time whether the image hosting interface is functional.
The blog system has a built-in AI Cat Assistant (connected to the Gemini model by default). Users can also modify the source code to connect other large language models.
First, you need to apply for a Gemini API Key. After obtaining the API Key, configure it in the console as follows:
After setting the exclusive system prompt (personality) for the cat locally, we need to give the online environment the ability to call the AI. Please log in to Vercel:
Find Environment Variables in the project settings:
Enter your blog project details:
Ensure the scope (environment) includes the online environment, and click Add Environment Variables:
Input your key:
- Key input:
GEMINI_API_KEY - Value input: Your actual API key
Click save. The next time you redeploy, the Cat Assistant will be active online.
The comment system of this blog is based on GitHub Issues (Gitalk or similar solutions). You need to create a Public repository on GitHub specifically to store comments from visitors.
In the console's comment settings, enter your GitHub username and the name of this public repository:
Next, configure OAuth authorization to allow visitors to log in and leave comments:
- Log in to GitHub, click on your profile picture in the top right corner, and go to Settings.
- Scroll to the bottom of the left menu bar and click Developer settings.
- Select OAuth Apps on the left, and click New OAuth App in the top right corner.
Key Application Information Filling Guide:
| Field Name | Suggestion |
|---|---|
| Application name | Custom name, e.g., My-Blog-Comments |
| Homepage URL | The complete address of your blog's homepage (e.g., [https://www.xinghuisama.top](https://www.xinghuisama.top)) |
| Application description | Optional |
| Authorization callback URL | Core parameter: Must be your blog domain. If debugging locally frequently, you can enter http://localhost:3000 |
Extract Core Keys:
- Submit registration (Register application).
- You will see the Client ID on the redirected page, which is the first required piece of data.
- Click Generate a new client secret below to generate the secret.
- 🚨 Immediately copy and securely save this secret! Due to security mechanisms, this secret will be permanently hidden once you leave this page.
Accurately enter this Client ID and Client Secret into the corresponding fields in the console, and save to activate the comment function.
Want to add BGM to your blog? Open the NetEase Cloud Music Web Version via your computer browser. Search for and enter the detail page of a song you like. Observe the browser's address bar; the number in the URL is the song's specific ID:
Copy and paste this ID into the search box in the console to add the song to your blog's playlist library!
XHBlogs has detailed features waiting to be explored during actual use. This project aims to provide an out-of-the-box frontend static display and backend management solution. If you are a developer and feel the console operations can be optimized, you can do secondary development based on the Next.js source code, or write Markdown manually for deployment!
If you find this project helpful, please give me a ⭐ Star on GitHub! Every star is a driving force for continued maintenance and updates. Thank you!
This project is licensed under the CC BY-NC 4.0 license. Free learning, sharing, and republication after secondary modification are allowed (secondary open-source publication must mention the original author), but any commercial use is strictly prohibited.
Implemented custom webpage titles and icon buttons. See the personal card settings in the configuration for details.
Implemented LaTeX formula rendering. Usage example: Input formula like
$E=mc^2$ . Underscores require an escape character "_". Thanks to @inWunsch for assisting with the LaTeX formula rendering update.
Fixed the bug where the comment system failed to fetch properly.
Added multiple items such as faviconUrl and navTitle. Please make sure to save previous information when pulling code updates!
Required environment variables have increased, please take note.