在云服务器上搭建Hexo博客

在云服务器上搭建Hexo博客

Hexo简介

Hexo是一个基于Node.js的静态网站生成器。它使用Markdown（或其他标记语言）作为输入，通过渲染和转换这些文本文件，生成静态HTML网页。

为什么选择Hexo？

1）个人喜好md编辑器记笔记

2）大佬推荐

搭建步骤

1）安装Node.js

Node.js 的官方下载地址：https://nodejs.org/

下载后点击安装，无脑点第一步即可。

安装完成后打开cmd窗口查看是否安装成功

输入node -v和npm -v

显示出版本信息则说明安装成功

2）安装Git

Git 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。Git Bash 可以便捷后面的操作。

Git Bash 和 CMD 的区别：Bash是基于CMD的，Bash在CMD的基础上新增了一些命令和功能，故建议使用Bash更方便。

官方网站：https://git-scm.com/ 选择Windows版本安装。

3）安装Hexo

由于 npm 服务器在国外，因此使用 npm 直接下载可能会遇到卡顿的问题，所以我们先将 npm 转换成淘宝的源。

在 cmd 或 Git Bush 中输入命令：

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

然后安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

再安装Hexo：

cnpm install -g hexo-cli

安装完成后选择一个目录来初始化博客：

我在E盘创建了名为blog的文件夹注意，如果你要在D盘上安装hexo，请在D盘中打开cmd，否则默认装在C盘上，安装到E盘等其他盘同理。

#建议用这种方法
cd E:/
hexo init blog
cd blog

执行成功后安装两个插件：

npm install hexo-deployer-git --save
npm install hexo-server

接着输入hexo s

经过不懈努力过后终于进入下一步…

进入网站http://localhost:4000/

这便是Hexo博客的初始界面

然后在cmd窗口中按下Ctrl+c终止批处理操作

本地初始化完成，接下来在部署环节介绍。

注意：部署到 GitHub 或者 云服务器 ，选一种就可以了，个人推荐GitHub，以下给出参考操作步骤。

4）部署到GitHub

1，准备工作

打开 GitHub ，点击 new 一个repository，创建一个新的仓库，仓库名称必须要遵守 GitHub Pages 的格式： 用户名.github.io ，否则会出问题，并且勾选 Initialize this repository with a README ，如下图所示

建好仓库后，在 Settings 设置中有一个 GitHub Pages 一项，里面就写着 GitHub Pages 为我们创建好的域名。在浏览器中访问就可以看到一个初始的界面。这就是博客的默认地址，当然后面我们也可换成自己的域名。

2，设置SSH

务必确保在 本地PC 已经完成了Node.js、Git 和 Hexo 的安装，在搜索中输入Git Bash并打开

默认打开是/c/Users/xxx

我们需要打开我们blog保存的目录，在此为E：/blog

在窗口中输入cd e:/blog

如果是第一次使使用 Git 的话:

# 以下 user.name 和 user.email 输入自己的，示例：
git config --global user.name "330"
git config --global user.email xxxxxxxxx@qq.com

使用 ssh-keygen 生成私钥和公钥：

ssh-keygen -t rsa

然后一路回车

运行完成后找到自己的密钥 id_rsa 和公钥 id_rsa.pub 的位置

接着在 GitHub 头像下的 Settings 里找到 SSH and GPG keys，点击New SSH key 。

将刚刚生成的公钥 id_rsa.pub 文件里的内容复制到 Key 里面（用 记事本 打开公钥文件），然后选择添加，GitHub 会提示输入密码确认。
接着在 本地PC 的 bash 上输入：

ssh -T git@github.com

然后输入yes，如果看到 Hi 后面是自己的用户名，就说明成功了。

3，在本地PC上完成推送部署

接下来回到我们的 PC 上，在刚刚我们生成的 e:/blog 目录下，找到 hexo 的配置文件 _config.yml ，使用各种好用的编辑器打开它（我用的是 VSCode）。在最下面有个 deploy 的配置，在那里修改为自己的 ID，示例：

同样需要更改的是url，将url更新为自己GitHub仓库的地址

如url: https://仓库名.github.io

注意：缩进必须保持一致！

保存并退出，然后发布到GitHub上

HexoBlog部署到git我们需要安装hexo-deployer-git插件,在blog目录下运行一下命令进行安装

输入npm install hexo-deployer-git --save

安装完成后，尝试创建一篇文章，输入hexo new post "hello,hexo"

在这个命令中，post 是文章的布局（layout），"hello,hexo" 是文章的标题。您可以根据需要更改布局和标题。

Hexo 将会在您的博客目录中的 source/_posts 文件夹下创建一个新的 Markdown 文件，文件名根据您指定的标题自动生成。例如，对于 “hello,hexo” 这个标题，Hexo 可能会创建一个名为 hello-hexo.md 的文件。

使用编辑器编好文章，接着就可以使用命令：

hexo clean && hexo generate && hexo deploy
# 当然也可简写成
hexo clean && hexo g && hexo d
# 这里，不一定每次都要 clean，clean 会清除缓存，导致一些计数脚本清零。

在 本地PC 浏览器上输入 GitHub Pages 的域名 https://自己的用户名.github.io 访问我们的博客。

以下为正常进入博客的页面

5）完成部署

到此，Hexo博客就算部署完成了，接下来就是自行修改、美化主题了

该过程遇到的问题

问题1：安装Hexo的未知错误

我在D盘创建了名为blog的文件夹

# 如果在图形界面中创建过文件夹，可直接进入
cd d:/blog
hexo init
#我使用的方法是第一种
# 如果没有创建文件夹
cd d:/
mkdir blog
cd blog
hexo init
# 或者按照官方文档的安装方法
cd d:/
hexo init blog
cd blog

执行完成后安装两个插件：

npm install hexo-deployer-git --save
npm install hexo-server

这一阶段需要经过 漫长 等待

安装完成之后输入hexo s发现出错了

嗯…需要寻找一下问题所在原因

经过煞费苦心的寻找原因，最后发现blog目录安装错了，准确来说hexo都安装错了。

所以重新过一遍安装hexo的流程…

注意，如果你要在D盘上安装hexo，请在D盘中打开cmd，否则默认装在C盘上，安装到E盘等其他盘同理。

在 cmd 或 Git Bush 中输入命令：

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

然后安装 cnpm ：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后安装 Hexo ：

cnpm install -g hexo-cli
等待安装结束。

这次我们按照官方文档的安装方法进行安装

依次在cmd窗口中输入

cd D:/
hexo init blog
cd blog

额，又出错了

但是找不到是什么原因，所以我选择安装在E盘这是我最后的倔强

解决方法就是操作步骤3中hexo装在E盘

问题2：hexo部署到GitHub上访问404

解决方法：用户名和仓库名字需保持一致

如我的用户名为666，仓库名为233，此时访问网站会显示404

故我们在原先仓库的设置中对仓库进行重命名（与用户名保持一致），即都为666

接着在设置中的pages页面，将branch改为master后点击Save

在 本地PC 浏览器上输入 GitHub Pages 的域名 https://自己的用户名.github.io 访问我们的博客。

出现这种情况是baseurl配置问题，尝试在网上寻找办法

最终确定是配置文件 _config.yml中url出现了问题

此处的url应为博客的完整 URL，包括协议和域名

比如GitHub仓库地址为https://github.com/用户名/仓库名.github.io

那么url应为url: https://仓库名.github.io而非https://github.com/用户名/仓库名.github.io

更改保存后，在GitBash上输入$ hexo clean && hexo g && hexo d即可

重新输入https://自己的用户名.github.io 便可以正常访问我们的博客

如图所示：

参考资料

1. 安装Hexo博客并部署到GitHub或云服务器（细节教程，越过各种坑）_hexo安装教程-CSDN博客
2. hexo搭建Github博客上传后，网页显示404问题解决方案_hexo 404-CSDN博客
3. 【终于解决了hexo发布到GitHub出现404的问题了】_github404-CSDN博客