快速搭建 Hexo 博客站+部署上线
前言
Hexo是基于Node.js构建简洁高效的博客框架。用户可使用 Markdown 编写文章内容,Hexo 使用 Markdown解析文章,几秒内即可利用靓丽的主题生成静态网页。支持丰富的主题与插件,主题用于页面展示效果,插件用于实现博客的特殊功能 如:文章及内容搜索、图片懒加载、一键远程部署等。
准备
一台电脑
勤劳的双手
搭建 Hexo 博客站
先安装Node.js
因为
Hexo是基于Node.js的,所以在安装Hexo之前我们需要安装Node.js
大家可以去官网下载长期维护版安装使用,因为Hexo 需要Node.js 版本不低于 10.13,建议使用 Node.js 12.0 及以上版本,如果电脑上有低版本的Node.js,非常推荐大家通过nvm工具统一管理。我这里使用的版本是Node.js 12.22.12。

下载安装后,按下 Windows + R 打开窗口,输入cmd并回车,打开命令提示符,依次输入以下命令查看版本号,能看到版本号的话代表安装成功!
1 | node -v |
查询结果和你安装的版本号一致

安装Hexo
在安装Hexo之前需要先修改一下npm的镜像,使用如下命令
1 | npm config set registry http://registry.npm.taobao.org/ |
执行如下命令,进行Hexo的全局安装
1 | npm install -g hexo-cli |
执行如下命令,进行版本的查看
1 | hexo -v |

出现以上的信息Hexo就安装成功了
初始化Hexo博客目录
现在需要建立一个文件夹用来存放你的博客文件,我这里用的D:\Blog_test作为博客目录,现在需要从命令行进入到这个目录
依旧是按下Windows + R 打开窗口,输入cmd并回车,打开命令提示符,使用cd进入到我们的博客目录,如果目录不在C盘的在D盘的话,还需要加/d这个参数
1 | cd /d D:\Blog_test |
通过此电脑进入到相对应的目录中,点击位置的地方直接,把D:\Blog_test删除键入cmd按Enter键便可以进入到相对应的目录

在这个目录的命令行中,输入hexo init初始化你的博客目录,等待几分钟
1 | hexo init |
在博客根目录下我们常常需要用到的命令有
| 常用命令 | 简写 | 中文含义 |
|---|---|---|
| hexo server | hexo s | 本地启动 |
| hexo generate | hexo g | 生成静态文件 |
| hexo deploy | hexo d | 部署网站 |
| hexo clean | 清除缓存和已经生成的静态文件 |
初始化之后我们需要安装相关依赖,并且生成静态文件,依次在博客目录命令行中执行以下命令
1 | npm install |
命令执行完成后,进入到你自己建的目录中,我的是D:\Blog_test,可以看见已经初始化生成一些文件了

node_modules:是项目包含依赖的模块public:执行hexo g生成静态文件存放的位置scaffolds:用来存放创建分类、标签和文章的一些模板source:包含生成网页所需要的文件,其中就有我们花心思写的Markdown文章,里面的_posts文件夹用来存放你的文章(初始化后你会发现已经有一个hello-world.md文件)themes:用来存放一些主题_config.yml:博客的配置文件_config.landscape.yml:默认主题landscape的配置文件
运行Hexo
在博客目录的命令行中输入hexo s启动博客,在浏览器中打开 http://localhost:4000 预览页面效果,默认是4000端口,也可以通过hexo s -p 端口号指定端口启动
1 | hexo s |

这样简单的博客就本地启动成功啦!
简单修改网站信息
打开博客的的配置文件_config.yml,简单的修改第5行# site里面的一些内容即可
例:
1 | title: TZY の 博客 |
修改之后按ctrl + c停止项目,然后输入hexo s重启项目,页面就发生了对应的变化

部署上线
将Hexo博客部署到Github上让他人能访问你的博客
什么是
Github?Github是一个面向开源及私有软件项目的托管平台,因为只支持
Git作为唯一的版本库格式进行托管,故名GitHub。简单来说,GitHub是一个代码托管云服务网站,帮助开发者存储和管理其项目源代码,且能够追踪、记录并控制用户对其代码的修改。甚至你可以简单粗暴的把它当作一个网盘,用来存储任何东西。
注册Github
进入Github的官网,右上角Sign up注册并登入,记住用户名和注册邮箱
安装Git
直接从Git的官网下载安装程序,然后安装默认选项安装即可,安装完成之后,在桌面右击出现Git Bash Here,如下图所示说明安装成功!(失败的话可以参照Git安装教程)

点击Git Bash Here,之后进行将Github的用户名和邮箱配置到Git中
在出现的页面依次输入以下命令
1 | git config --global user.name "你的用户名" |
配置完成后可以通过以下命令查看是否配置正确
1 | //使用这行命令查看全局配置 |
如果发现用户名或者邮箱填写错误,可以通过以下命令修改
1 | //使用这行命令修改你的用户名 |
创建Github仓库
登入Github之后,在首页点击右上角的加号,点击New repository,创建新的仓库

仓库名命名规则:你的用户名.github.io,必须是用户名加.github.io后缀!!!例如我的用户名是TResuni,那么我的命名就是TResuni.github.io

创建完之后进入仓库,可以看到我们仓库的HTTPS地址,复制这个地址,后面会使用Git通过这个地址将我们的代码推送到这个地方,下面截图是我自己的仓库,新建的仓库是没有内容的

部署
回到我们的博客目录,比如上面我的博客目录是
D:\Blog_test,鼠标右击,点击Git Bash Here,后面的操作都在这里
推送之前我们需要先安装hexo-deployer-git
1 | npm install hexo-deployer-git --save |
然后在博客目录中,修改博客的配置文件_config.yml,如果有这个配置直接修改就行,没有的话可以直接复制添加改配置,repo替换成上面你自己复制的链接
1 | deploy: |
修改保存然后退出,回到上面的Git Bash Here中,依次输入以下命令
1 | hexo clean |

选择Sign in with your browser

点击Authorize GitCredentialManager
耐心等待一会即可!
有梯子的点开
众所周知,Github对国内用户不友好,如果你有梯子的话,那么Git推送代码将会更顺利啦
在Git Bash Here界面上,输入以下命令,socks5和http代理选一个就行,因人而异,我使用http代理可以,使用socks5代理不行。
1 | # 以下使用socks5代理 |
后面的地址填写电脑设置中的代理

经过以上的配置你会发现代码推送出错的概率大大降低
经过上面的步骤,我们的博客已经部署到Github上去啦,只需要输入我们的仓库名就可以访问我们的博客啦,或者可以在仓库中的设置,找到Pages,点击即可

现在可以将你的博客地址发给你的小伙伴们啦
