This detailed tutorial provides a step-by-step guide on how to create and configure a Hexo Personal Blog using GitHub+Vercel.
Introduction to Hexo
Hexo is a widely used blogging framework, often chosen by bloggers as an alternative to WordPress or Typecho. This preference is due to its speed, stability, and the flexibility to deploy it in various free environments.
Key Advantages of Hexo:
- Free and stable platform
- Minimal maintenance effort required
You can learn more about Hexo here. If you prefer Hugo as a framework, this tutorial is still applicable.
The Plan
The workflow involves placing Hexo files on GitHub. Vercel will then automatically pull these files and deploy them.
Installation Guide
Step 1: Account Preparation
First, sign up for a GitHub account. Then, register on Vercel using your GitHub account, allowing you to view your GitHub repositories in Vercel.
Step 2: Create a Hexo Repository
Click the button below to automatically create a Hexo blog on Vercel:
Set the Git Scope as your GitHub account username. Customize the REPOSITORY NAME as desired, and keep the repository Private for security.
Upon completion, click Create. You will now have a unique Hexo domain on "vercel.app," which is useful for debugging.
Vercel will link to your GitHub repository and automatically deploy any changes made to it.
For long-term use, consider using your own domain. For domain registration, we suggest Namesilo.
Step 3: Debug Locally
For efficiency, install the Hexo environment locally for debugging.
Environment Configuration
Download and install Git and Node.js from their official sites: Git and Node.js.
Verify the installation by opening Terminal (macOS) or Git Bash (Windows) and typing the following commands to check the versions:
$ node -v
$ npm -vIf the versions display correctly, you’ve successfully installed Node.js.
Configure Hexo Environment
Install Hexo-cli with the following command:
$ pnpm install -g hexoUpon completion, you’ll see a message displaying the Hexo version, indicating a successful installation.
Upload Method Configuration
We provide two ways to push changes: via Git or GitHub Desktop. GitHub Desktop is recommended for ease of use.
GitHub Desktop
Download and install GitHub Desktop from the official website.
After logging in to your GitHub account, you’ll see the following interface:
Click Add in the top left corner, select Clone repository, choose the Hexo repository you created, and click Clone to download it to your local machine.
Your project’s folder will be located in the file path displayed under Local Path.
Git Method
Install Git from the official website.
After installation, verify the configuration.
For macOS users, open Terminal; for Windows users, open
Git Bash.
Check the Git version with:
$ git -vA displayed version number indicates successful configuration.
Next, configure GitHub and set up an SSH key.
For macOS users, open Terminal; for Windows users, open
Git Bash.
Run the following in Git Bash:
$ ssh-keygen -t rsa -C "your email address"Press enter three times, and the command line will display the location of your public and private key files.
Locate the id_rsa.pub file, open it in a text editor, and copy its contents.
In GitHub, go to Settings -> SSH and GPG keys -> New SSH key or click here.
Paste the copied content into the Key field, set a Title, and click Add SSH Key.
Configure Git by running:
$ git config --global user.name "your GitHub username"
$ git config --global user.email "your GitHub registered email address"Verify successful configuration with:
$ ssh -T git@github.comIf prompted, enter yes. If you see:
Hi [your GitHub username]! You've successfully authenticated, but GitHub does not provide shell access.
This means the configuration is complete.
Clone the GitHub Repository
Go to your GitHub repository, click Code, and copy the HTTPS link.
In the desired directory, use the following command to clone your Hexo repository:
$ git clone [paste your link here]For private repositories, you’ll need to enter your GitHub account email and, instead of a password, use a Personal Access Token.
Generate a token in GitHub -> Settings -> Developer Settings -> Personal Access Token or click here.
Set a No expiration and select the repo permission.
Copy the token (it will only be shown once), and use it as your password during login.
Use Guide
For a comprehensive guide on using Hexo, visit the official Hexo documentation.
Step 1: Install a Theme
Find a theme you like on GitHub and follow the instructions in its README.md file.
Here’s my theme: https://github.com/EvanNotFound/hexo-theme-redefine. Check it out!
Step 2: Install Plugins
Plugins are available on the Hexo official site or GitHub. Follow each plugin’s installation guide.
Example: hexo-generator-sitemap.
Conclusion
Hexo Blog is an excellent choice for those who enjoy customizing their blogs. If you encounter any issues during setup, please feel free to contact me at contact@ohevan.com.
If you found this tutorial helpful, please follow me on GitHub. Your feedback is appreciated. Thank you for reading!