网上看了很多教程,很多都少了步骤,所以决定自己写写。

基本环境(Windows)

Node.js & Git

部署必备二件套
下载链接:Node.jsGit

Hexo主题(请勿直接下载)

个人推荐最多使用的Next或者更美观的Butterfly(移动端有bug)或在GitHub上寻找更多信息
GitHub: Next  或 Butterfly

Github仓库

前提操作

在GitHub创建一个属于您的账号并登入然后点击如图所示的按钮新建一个你自己的仓库
P3
在Repository name处填写如下内容

1
你的用户名.github.io

仓库请选择Public

本地部署

Git基本部署(Windows)

打开Git,输入以下命令

1
2
3
4
npm install hexo-cli -g
hexo init 新建的项目名
cd 新建项目
npm install

Git基本部署(Mac)

和Windows类似 但是需要在npm前加入sudo,像

1
sudo npm install hexo-cli -g

主题载入

此时你的项目位置应为 C:/Users/个人用户名/项目名/

继续刚才的步骤,输入主题安装命令(在步骤1.2中可前往主题官网获取最新命令和教程)

这里以Next举例(此时的状态为你已经cd到你的文件夹)

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

此时主题载入完成,存放于根目录\themes中

为了方便,我们将根目录下的config.yml称为站点配置文件
下载的主题里的config.yml称为主题配置文件

初始化

安装完成后 我们使用

1
2
hexo g
hexo s

初始化我们的网站

然后打开localhost:4000验证是否成功配置完成

使用Ctrl+C退出本地站点服务器

现在,请前往步骤3.1

本地站点配置

打开站点配置文件,滑到底部,将修改Git参数(即你的仓库Git链接),主题theme改为使用的主题和站点个人信息,如图所示

P1

注意theme填写你使用的主题 图中我的为butterfly
P2

连接至GitHub

打开Git,cd到你的文件夹,然后输入以下命令

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

打开GitHub,在头像下方点击Settings,再点击SSH and GPG keys,新建一个SSH,名字可随意填写

回到Git,输入以下内容

1
2
3
ssh-keygen -t rsa -C "你的GITHUB邮箱" #生成公钥和私钥
# 然后小白直接回车到命令结束
cat ~/.ssh/id_rsa.pub #得到私钥

将私钥,粘贴至GitHub处,然后确认保存

回到Git,输入以下内容

1
ssh -T git@github.com

如果出现你的用户名,如下图所示,则为连接成功
P4

新建Hexo分类等页面

这里举例添加分类页面(不添加则可能出现打开分类为404的问题)
确认站点配置文件

1
category_dir: categories

确认主题配置文件

1
categories: /categories

一般只需要删除符号’#’

新建分类文件

在Git中输入以下内容

1
hexo new page categories

然后进入C:\Users\用户名\文件夹\source\categories并打开编辑index.md,添加

1
type: "categories"

如下图所示
P5

完成配置

在同步至GitHub仓库前,可再次尝试本地初始化,检查有无异常

Github Pages

在Git中输入以下内容

1
hexo d

完成后,你的博客已成功同步至GitHub,你的md文件存放于项目/source/_posts 内

配置Netlify

打开Netlify,使用GitHub登录并授权(登录需要魔法),授权完成后,点击New site from Git,选择GitHub,选择你的仓库,然后直接点击Deploy Site,然后就部署完成了

进入部署完成的Sites点击Site Settings,然后点击Change site name,将其更名为你喜欢的名字(请保存或记住。待会需要用到),然后点击左侧的Domain management,点击Add domain alias,输入你的域名即完成

配置Vercel(与Netlify二选一)

打开Vercel官网,与Netlify功能类似 方法也差不多 可以自行摸索