Hexo Build Github Blog Tutorial

1. Environment configuration

(1) Install Git Bash: Windows Installation and Configuration Git Tutorial (2022.11.18 Git2.38.1) .

(2) Install NodeJS: NodeJS installation and configuration .

(3) Modify npmthe image source:

npm config set registry https://registry.npm.taobao.org

(4) Install Hexo:

npm install hexo-cli -g

(5) Install the deployment plugin:

npm install hexo-deployer-git --save

If the following error occurs here, you need to open it as an administrator cmd, and then cmdinstall it in:

insert image description here

2. Build a local blog

First create a folder Hexo, then enter the folder, create the folder blog, open it as an administrator cmd, enter blogthe folder, and initialize the Hexo blog:

hexo init

insert image description here

Then start it locally to see the effect:

hexo s

Then open the link: http://localhost:4000/, and then we will debug the page in this local link, the page is as follows:

insert image description here

blogOpen the folder with VS Code :

insert image description here

Among them, source/_poststhe articles we write are stored in the folder, and themesthe theme of the blog is stored in the folder, which _config.ymlis the global configuration file of the blog and _config.landscape.ymlthe theme configuration file of the blog.

3. Deploy to Github

Create a repository on Github named 用户名.github.io:

insert image description here

blogOpen the folder in VS Code , find _config.ymlthe file, find it deploy, and modify it according to the following format:

deploy:
  type: git
  repo: [email protected]:你的用户名/你的用户名.github.io.git
  branch: master

Finally execute the following command:

hexo clean  # 清除缓存
hexo g      # 生成静态网页
hexo d      # 部署到Github，注意需要在Git Bash中部署

Then visit the domain name: https://用户名.github.io/you can enter your own blog.

4. Blog theme settings

Hexo theme official website: Hexo Themes .

Put the downloaded theme into blog/themesa folder:

insert image description here

Then _config.ymlmodify the theme in the root directory to the downloaded theme, for example:

theme: shoka

_config.ymlThen enter the theme folder, there is also a file under this folder , modify the content of this file to modify the style of the current blog homepage.

5. Blog backup

blogCreate a new private repository named Github :

insert image description here

After the warehouse is created, Hexo/blogopen Git Bash in the directory and execute the following command:

git init  # 初始化仓库
git add .  # 添加文件到暂存区
git commit -m "initial blog"  # 将暂存区内容添加到仓库
git branch -M main  # 重命名分支为main，和博客的分支master区分开
git remote add origin [email protected]:你的ID/blog.git  # 添加到远程版本库
git push -u origin main  # 提交到Github

If git add .a warning appears during execution: , the folders in the directory You've added another git repository inside your current repository.can be deleted.blog.deploy_git