GitHub+Hexo搭建个人博客 - 详细教程

所需环境条件：

1、git已安装

2、node已安装

1、在GitHub创建个人仓库

点击图中https://xxx.github.io/即可浏览到页面。

​

2、安装Hexo

在电脑中选一个合适的位置创建一个文件夹，命名为Blog，Hexo框架和以后自己发布的网页都在这个文件夹中。创建好后，进入文件夹中，按住shift键，右击鼠标点击命令行。

​

输入命令安装Hexo：

npm install -g hexo-cli 

​

安装完成后，初始化并检测网站雏形：

hexo init  // 初始化
hexo g  // 生成静态文件
hexo s  // 启动服务预览

​

在浏览器中输入http://localhost:4000/即可看到

​

3、变更主题

可以在 https://hexo.io/themes/index.html 进行主题的挑选更换。

这次我选了比较喜欢的极简风格的主题：oranges

在Blog themes文件中打开命令行，输入以下命令下载主题：

git clone https://github.com/zchengsite/hexo-theme-oranges.git

然后使用记事本打开Blog文件中的_config.yml文件，更换主题名称：

​

在Blog中运行以下命令：

hexo clean
hexo g
hexo s

​

再刷新http://localhost:4000/网址，即可看到新的主题页面。

4、更换主题配置

更换语言：通过修改Blog中的配置文件_config.yml中的language，中文zh-CN，英文en。

其他配置更改步骤在主题网址中有具体描述，根据自身需求更改即可。

5、配置SSH Key

鼠标右击打开Git Bash

​

若还没有user.name 和user.email，先配置

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后连续三个回车，默认不需要设置密码，然后找到生成的.ssh文件夹中的id_rsa.pub密钥，将内容全部复制

找到Github Setting keys页面，新建new SSH Key

​

​

标题随意填，将刚复制的id_rsa.pub密钥粘贴到Key中，最后Add SSH key。

在Git Bash中检测GitHub公钥设置是否成功，输入 ssh git@github.com 

​

如上即说明成功了！

6、连接Hexo与GitHub

获取ssh地址：

​

打开Blog文件中的_config.yml（即站点配置文件），翻到最后修改为：

deploy:
  type: git
  repo: 刚获取的ssh地址
  branch: main

然后保存。

最后安装Git部署插件：（在根目录下执行，而不是在git bash里）

npm install hexo-deployer-git --save

安装时遇到了这个错误

​

换成以下命令就成功了

pnpm install hexo-deployer-git --save

这时再输入以下命令：

hexo clean
hexo g
hexo d // 部署到服务上

将代码推送到git上，再然后访问https://github.com/xxx/xxx.github.io，就能看到部署好的主题页面了，大功告成！

7、解决图片上传问题

在本地typora写好一篇笔记后，上传到博客上，会发现图片显示不出来，因为笔记中的图片地址指向本机电脑，上传到博客之后，自然就无法显示了。

这里我是在GitHub新建了一个专门用来存放图片的仓库。

​

​

选择文件上传后点击Commit changes就ok了。

上传好图片后，接下来就是使用图片了。

获取图片外链

在上传好的图片上单机右键，选择复制链接地址，然后将其使用在markdown图片外链地址上，这时图片并没有正常显示，只需要修改成以下格式：

https://github.com/用户名/repository仓库名/raw/分支名main/图片文件夹名称/.png or.jpg

(我这里只将复制地址中的blog改成了raw就成功啦)

8、发布文章

在Blog中打开终端命令行输入：

hexo n "你的文章标题名"

接着在\Blog\source\_posts文件夹中就能看到新建的markdown文件，编辑好后重新执行hexo clean、hexo g、hexo d命令就ok了。