banner
Magneto

Magnetoの小屋

Magneto在區塊鏈上の小屋,讓我們的文章在互聯網上永遠熠熠生輝!!

Quickly Build a Hexo Blog with Vercel + GitHub

Basic Operations#

image

Select the content checked in the gray box, which is your GitHub, then click the Select button, and then click GitHub to choose the user you want to store Hexo under GIT SCOPE. Fill in the repository name you want to store Hexo in at REPOSITORY NAME, and check the Create private Git Repository option, which sets the repository to private and invisible to others. Then click the Continue button, and without modifying anything, click Deploy directly, waiting for it to complete the build automatically, which should take about 3 minutes, and it will distribute a free secondary domain name that can be temporarily used (it will not be reclaimed, but it is not recommended to use).

::: gallery
image
image
:::

After the deployment is complete, it will be bound to the repository you just filled in. Once there are any changes in your repository, it will automatically sync and deploy, and the whole process can be completed in about 5 minutes.

Next is the advanced gameplay, customizing themes and writing articles.

Advanced Gameplay#

Local Modifications#

Preparing the Environment#

  • Windows operating system computer
  • Git for Windows
  • Node.js ≥ v12
  • NPM
  • Hexo

Environment Installation

If you already have these, you can choose to skip this step, or if you don't need to check if they can run, you can also choose to skip the installation.

This tutorial's environment is installed based on Windows 10 20H2.

Git (must install, even if you don't check if it can run normally)

To use Git on the Windows platform, you need Git for Windows, download and install it (if you find the official download speed too slow, you can go to Taobao NPM mirror to download).

I used this link to download Git-2.25.0-64-bit.exe, with all default options installed.

Verify Installation

In the right-click menu of Explorer or the Start menu, you can find Git Bash. After opening it, you will see a command line interface, which is essential for checking whether the Hexo system can run normally.

Open Git Bash and check the version with the following code:

node -v
npm -v

image

If you see the version numbers, it means the environment installation was successful.

Hexo

Hexo is a fast, simple, and efficient blogging framework.

Open Git Bash and run the following command to install Hexo (you may need to wait for a while after pressing Enter; I waited for 100s here):

npm install -g hexo

If you see + hexo@{{version number}}, it means the installation was successful.

GitHub & SSH key (this section is adapted from FlyingSky)

Go to GitHub to register your account (please verify your email address in a timely manner).

Open Git Bash and run the following command:

ssh-keygen -t rsa -C "{{your email address}}"

Press Enter three times, and a directory containing public and private keys and other data will be generated in your user directory (usually C:/Users/{{your username}}/.ssh/).

Open this directory, find the id_rsa.pub file, and open it with your favorite text editor (Notepad) to copy its contents. Go to GitHub -> Settings -> SSH and GPG keys -> New SSH key (i.e., this link):

Paste the copied content into Key, fill in Title with your preference, and click save (Add SSH Key).

Set Up Git

Run the following commands:

git config --global user.name "{{your GitHub username}}"
git config --global user.email "{{your GitHub registered email address}}"

Verify Success

Open Git Bash and run the following command:

ssh -T [email protected] # No need to change the email address here

If prompted with Are you sure you want to continue connecting (yes/no)?, type yes and press Enter.

Hi {{your GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access.

If you see this message, it means the configuration was successful.

At this point, the local environment is set up, and you can start making modifications.

Local Modifications#

Use the git command to clone the repository stored on GitHub to your local machine.

git clone https://github.com/{{username}}/{{repository name}}.git

Note that cloning a private repository requires entering your GitHub account and password.

After cloning, you can choose to switch themes and then write an article.

Switching Themes

If you like the default theme, please skip this section.

I will demonstrate using SumiMakito/hexo-theme-Journal.

In your Hexo site directory, use Git Bash to run the following command to install the theme (you will need to wait):

git clone {{theme git file address}} themes/{{theme name}}

For example:

git clone https://github.com/SumiMakito/hexo-theme-Journal.git themes/journal

After downloading, modify _config.yml to change theme: landscape to theme: {{theme name}}, and then execute hexo g to regenerate.

If you encounter some inexplicable issues, execute hexo clean to clear the contents of public, and then regenerate and publish.

Installing Plugins

In your Hexo site directory, use Git Bash to run the following command:

hexo new '{{article name}}'

After running, the source\_posts\ directory will have a new {{article name}}.md file. Open this file with your favorite text editor (Notepad), and hexo will have generated header information by default.

The file content structure is as follows:

---
title: {{article name}}
date: {{article time}}
categories: {{article category}}
tags: {{article tags [tag1,tag2,tag3]}}
description: {{article summary}}
---
{{article content}}

Article content supports Markdown syntax.

Running Tests

After writing the article and installing the theme, you can check if it runs normally by executing the following command:

hexo g -s

After entering the command, visit localhost:4000 to check if it runs properly.

Deploying Hexo Blog#

If the previous step runs normally, you can push it to GitHub using Git Push, and Vercel will automatically pull and deploy. If you don't know how to push, you can search for tutorials on Baidu, CSDN, or Blog Park; this article will include a push tutorial at the end, but it won't be detailed, so it's recommended to learn it on your own.

CloudStudio Modifications#

Environment and Preparation#

Environment Installation

I won't teach you how to register for CloudStudio here.

After entering Coding, find CloudStudio on the left, authorize it, then click New Workspace, select Node.js, and name it whatever you like, choosing an empty code source.

After creating the workspace, enter it, click on the terminal, and create a new terminal. Most of the following content needs to be completed in the terminal.

Verify Installation

In the terminal, enter the following content:

node -v
npm -v

If both show version numbers, you can start modifying in CloudStudio.

image

Hexo

Hexo is a fast, simple, and efficient blogging framework.

Open the terminal and run the following command to install Hexo:

npm install -g hexo

If you see + hexo@{{version number}}, it means the installation was successful.

GitHub & SSH key

First, you can see that the path is RemoteWorking, but we need to set the file storage path to root.

You can execute:

cd /root

We choose to open a folder and then enter the root folder.

In the terminal, enter:

ssh-keygen -t rsa -C "{{your email address}}"

Press Enter three times, and a directory containing public and private keys and other data will be generated in your user directory (usually C:/Users/{{your username}}/.ssh/).

Open this directory, find the id_rsa.pub file, and open it with your favorite text editor (Notepad) to copy its contents. Go to GitHub -> Settings -> SSH and GPG keys -> New SSH key (i.e., this link):

Paste the copied content into Key, fill in Title with your preference, and click save (Add SSH Key).

Set Up Git

Run the following commands:

git config --global user.name "{{your GitHub username}}"
git config --global user.email "{{your GitHub registered email address}}"

Verify Success

Open Git Bash and run the following command:

ssh -T [email protected] # No need to change the email address here

If prompted with Are you sure you want to continue connecting (yes/no)?, type yes and press Enter.

Hi {{your GitHub username}}! You've successfully authenticated, but GitHub does not provide shell access.

If you see this message, it means the configuration was successful.

At this point, the local environment is set up, and you can start making modifications.

CloudStudio Modifications#

Then, use the git command to clone the repository stored on GitHub to CloudStudio.

git clone [email protected]:username/repository name.git

Note that cloning a private repository requires authorization; you can go to https://github.com/settings/tokens/new to generate a token with full permissions to submit to CloudStudio for authorization.

After cloning, you can choose to switch themes and then write an article.

Switching Themes

If you like the default theme, please skip this section.

I will demonstrate using SumiMakito/hexo-theme-Journal.

cd /{{directory where Hexo is located}}

Run the following command to install the theme (you will need to wait):

git clone {{theme git file address}} themes/{{theme name}}

For example:

git clone https://github.com/SumiMakito/hexo-theme-Journal.git themes/journal

After downloading, modify _config.yml to change theme: landscape to theme: {{theme name}}, and then execute hexo g to regenerate.

If you encounter some inexplicable issues, execute hexo clean to clear the contents of public, and then regenerate and publish.

Installing Plugins
Enter the directory where Hexo is located:

cd /{{directory where Hexo is located}}

In the terminal, enter the following command:

npm install hexo-deployer-git --save

Writing Articles
Enter the directory where Hexo is located:

cd /{{directory where Hexo is located}}

In the terminal, enter the following command:

hexo new '{{article name}}'

After running, the source\_posts\ directory will have a new {{article name}}.md file. Click on the file, and hexo will have generated header information by default.

The file content structure is as follows:

---
title: {{article name}}
date: {{article time}}
categories: {{article category}}
tags: {{article tags [tag1,tag2,tag3]}}
description: {{article summary}}
---
{{article content}}

Article content supports Markdown syntax.

Deploying Hexo Blog#

Since local running tests cannot be completed, you can directly push. Generally, if there are no issues with the theme or plugins, pushing and deploying directly should not have any problems. If you don't know how to push, you can search for tutorials on Baidu, CSDN, or Blog Park; this article will include a push tutorial at the end, but it won't be detailed, so it's recommended to learn it on your own.

GitHub Push#

Here I only provide a code; specific situations need to be learned through Baidu. Git commands are as profound as Linux commands...

git status
git add .
git status
git commit -m 'comment'
git branch -m master
git push -f origin master

Generally, for the first push, you need to execute git add before running this command.

Of course, you can also use IDE software for control, which is very convenient.

Conclusion#

Alright, this lengthy Hexo deployment tutorial is complete, and I will modify it based on circumstances in the future.

All reference materials:

Help me complete this article's needs:

  • A cup of water
  • A cup of milk
  • GitHub Proxy Github proxy acceleration
  • 50 songs averaging 4 minutes long

If there are errors, you will also need to learn deeply through Baidu or refer to the materials I have referenced.

This article is synchronized and updated to xLog by Mix Space. The original link is https://fmcf.cc/posts/technology/Hexo_on-_Vercel

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.