Create a Personal Blog powered by Hexo with GitHub and Vercel

This comprehensive tutorial offers a step-by-step guide to creating and configuring a Hexo Personal Blog using GitHub and Vercel.

Introduction to Hexo

Hexo is a popular blogging framework, often chosen as an alternative to WordPress or Typecho due to its speed, stability, and flexibility for deployment in various free environments.

Key Advantages of Hexo:

• Free and stable platform
• Minimal maintenance 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, which Vercel will automatically pull and deploy.

Installation Guide

Step 1: Account Preparation

First, sign up for a GitHub account. Then, register on Vercel using your GitHub account to view your 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 to your GitHub 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," 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 -v

If the versions display correctly, you've successfully installed Node.js.

Configure Hexo Environment

Install Hexo-cli with the following command:

$ pnpm install -g hexo

Upon 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 -v

A 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.com

If 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!