hexo+github从0到1博客搭建

发表于 更新于 分类于

环境准备

  • 操作系统：Windows 11
  • Node
  • Git
  • Hexo
  • VScode
  • Github账号

安装Node

Node.js
下载后傻瓜式安装即可
安装完成后 win+R输入cmd，回车，打开命令行窗口，输入node -v，看到版本信息，则安装成功。
111
修改npm源。npm下载各种模块，默认从国外服务器下载，这里改配置为淘宝镜像。

1
npm config set registry https://registry.npmmirror.com

安装Git

Git
下载后傻瓜式安装即可

在电脑的应用里看到有Git Bash即可

  • Git CMD 是windows 命令行的指令风格
  • Git Bash 是linux系统的指令风格（建议使用）
  • Git GUI是图形化界面（新手学习不建议使用）

打开Git Bash如图即安装完成

环境配置

常用命令

1
2
3
4
5
git config -l  //查看所有配置

git config --system --list //查看系统配置

git config --global --list //查看用户（全局）配置

配置用户名和邮箱

1
2
3
4
5
git config --global user.name "你的用户名"

git config --global user.email "你的邮箱"

输入后没有报错代表设置成功

通过git config -l检查配置是否成功

至此git安装配置完成。

安装Hexo

自己选定一个盘符，新建一个文件夹，命名个MyBlog
在这个文件夹路径栏输入cmd打开命令行，执行如下命令，安装hexo

1
npm install -g hexo-cli

安装完成，输入hexo -v验证是否安装成功。

创建Github仓库

先创建一个自己的Github账号。
然后去创建仓库
仓库名的格式必须为：<用户名>.github.io
Destricption：为仓库描述
勾选：Initialize this respository with a readme 初始化一个README.md文件
点击Creat repository 进行创建

连接Github

生成ssh公钥
cmd执行如下代码

1
ssh-keygen -t rsa -C "你的邮箱"

然后找到在c盘用户文件夹下的.ssh文件夹，会看到id_rsa.pub,这是公钥

用记事本打开id_rsa.pub，复制里面的内容，然后在GitHub中配置ssh密钥

进入GitHub，右上角点击头像选择settings
进入设置页选择SSH and GPG keys
然后点 New SSH key
title可以随便可以取，把key粘过去

然后点Add SSH KEY

测试连接

1
ssh -T git@github.com


这就成功了！

初始化Hexo项目

在博客文件夹路径栏，输入cmd，打开命令行窗口，执行hexo init初始化项目

1
hexo init


在文件夹中可以看到有了这些文件

继续执行npm i ，安装依赖

1
npm i



用vscode打开MyBlog文件夹 (vscode直接到浏览器搜索vscode下载安装即可)；

打开终端，在终端输入hexo sever或者hexo s

Ctrl键+鼠标左键单击网址，打开链接

这就成功在本地部署了

将静态博客部署到GitHub Pages

安装hexo-deployer-git

修改_config.yml文件
将博客目录下的_config.yml，也就是整个Hexo框架的配置文件了，可以在里面修改大部分配置。
修改最后一行的配置，将repository修改为自己的github项目地址。
项目地址可以到github仓库复制过来。

设置分支为：main

1
2
3
4
deploy:
  type: git
  repository: git@github.com:blttttt/blttttt.github.io.git
  branch: main

部署项目到github
在终端执行如下命令

1
2
3
hexo cl
hexo g
hexo d

hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令，可用hexo cl。
hexo generate：生成静态文章，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写
出现 Deploy done，则说明部署成功。
打开浏览器访问：https://blttttt.github.io，就可以看到博客内容了。

创建博客

执行命令

1
hexo new "文章标题"

就会创建一个md文件，就可以在vscode里面写文章了。
Ctrl+k + (大写锁定下的)V，可以打开侧边预览实时看到预览效果。

上传本地图片

在你上传本地图片的时候可能会发现，在vscode里面预览的好好的，而到了本地或者github网页界面，图片无法显示。
这个时候需要安装一个插件了。

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

同时要去_config.yml文件里修改配置，这个修改是能够实现我们每次new一个md文件时，都会自动创建一个文件夹，文件夹的名字和博客文件名字一样，在里面放置要引入的图片。

1
post_asset_folder: true  //把这里改为true

在引用图片时,我用的方式是![](放图片的文件夹名/图片名.jpg)