Hexo 从入门到放弃

从入门到放弃计算机

发布日期: 2022-11-11

文章字数: 2.3k

阅读时长: 9 分

阅读次数:

引言

折腾完Jekyll，看了好多Jekyll模版博客，感觉基本上都挺简洁的。再看看几个Hexo模版博客，感觉好骚呀，那就搞一个吧。

准备工作

新装Windows11系统（Windows Sandbox）,不做任何花里胡哨的优化。

用到的东西：

必要：Node.js、Hexo、git、梯子、github帐号
可选：Microsoft Visual Studio、GitHub Desktop

安装Node.js

首先安装 Node.js ，打开Node.js 下载页面，选择Windos安装包，我下载的版本是node-v18.12.1-x64.msi

打开刚下载下来的 node-v18.12.1-x64.msi 文件，点 next 后同意条款，然后一路点击 next ，直至读条结束完成安装点击 Finish ，Node.js 就算安装完成啦。

安装git

接下来安装 git ，打开你 git 下载页面，点 Click here to download 下载。

打开刚下载下来的 Git-2.38.1-64-bit.exe ，一路点 next
，读条结束点击 Finish ，git 就算安装完成啦。

搭建blog

在开始菜单中找到刚安装好的 Git Bash（Node.js command prompt也可以），输入 node -v 和 git -v 看看刚才的 nodejs 和 git 是否成功安装吧。成功安装的话，会显示已安装的版本。

接下来安装 Hexo ，输入 npm install -g hexo-cli

输入 hexo -v 看到下图，就表示安装成功啦。

输入 hexo init myblog 新建名为blog的原生博客模板

输入 cd myblog 进入myblog文件夹

输入 npm install 安装博客依赖的包

输入 hexo generate（或者hexo g）构建新建的博客

输入 hexo serve（或者hexo s）将构建好的博客模板部署到本地服务器中

浏览器打开 http://localhost:4000 就可以本地浏览新建好的博客啦

结束记得在 Git Bash 中按下 ctrl + c 退出本地服务

部署到Github

接下来我们就要将这个原生的博客部署到 Github 上，以便在网络中浏览。

首先注册号 Github 账号，记下 GitHub 账户用户名和邮箱。

进入 Github 主页，创建名为 用户名.github.io（例如我的仓库： jupeiqi.github.io ）的公共仓库

打开新建好的仓库，记下 HTTPS 地址： https://github.com/jupeiqi/jupeiqi.github.io.git ，这就是自己的仓库地址

返回 Git Bash ，配置 git 的 Github 账户信息，输入 git config --global user.name "jupeiqi" 按回车，接着输入 git config --global user.email "xiaojupeiqi@foxmail.com" 按回车，没有提示任何消息就是好消息。（引号内的用户名和邮箱账号记得换成自己的）

输入 ssh-keygen -t rsa -C "xiaojupeiqi@foxmail.com" 后连按几次 Enter 键，直到看到下图

打开电脑文件夹 C:\Users\用户名.ssh ，可以看到刚生成的两个文件

用记事本打开 id_rsa.pub ，复制其中所有内容

浏览器打开 Github 主页，点击右上角个人头像，点击Settings

点击左侧 SSH and GPG keys ，点击 New SSH key

在 Title 下随便输入，在 Key 下将刚才复制的内容全部粘贴进去，然后点 Add SSH key

可以看到如下界面

我们返回 GIt Bash ，输入 ssh -T git@github.com ，看到如下界面，git 和 github 就算连上啦

打开 myblog 目录，找到 _config.yml 文件，这是博客的配置文件，用记事本打开，找到 deploy: 这一段，将其中 repo 值更改为自己的仓库地址， type 值改为 git

回到 GIt Bash ，输入 npm install hexo-deployer-git --save 安装 hexo-deployer-git 插件

输入 hexo deploy （或者 hexo d），将博客部署到github上

首次部署会弹窗网页登陆验证，直接点 Sign in with your browser ，然后看到 Authentication Succeeded 就算验证通过了

片刻后，我们打开浏览器，输入 https://github.com/jupeiqi/jupeiqi.github.io ，进入到自己的仓库，可以看到刚上传进来的网页源文件

依次点 Settings 、 Pages ，Branch 下的 None 更改为 master ，点 Save 保存

等待5分钟后，浏览器输入 jupeiqi.github.io 就可以在网上看到自己的博客啦

使用 github 上别人的主题模板

原生的博客模板还是挺素的，在知乎，搜索 Hexo模板 我们可以看到很多非常洋气的主题模板，随便挑一个吧 blinkfox 点链接，直接下载下来。打开刚下载的 hexo-theme-matery-master.zip 主题文件，解压到 myblog 文件夹下的 themes 文件夹中，然后记事本打开 _config.yml 文件，将 theme： 后的值改为 hexo-theme-matery 后保存。

打开 GIt Bash ，依次执行 hexo clean ， hexo g ， hexo s ，浏览器打开 http://localhost:4000 ，就可以看到自己的博客一下子就变洋气啦

返回 Git Bash 中按下 ctrl + c 退出本地服务，执行 hexo d 将这洋气的博客部署到 github 上，等待5分钟后，就可以在网上输入 jupeiqi.github.io 查看啦

可能遇到的问题

用 npm install 安装包时，连接不上，可以尝试使用淘宝代理cnpm镜像。输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 这个命令，安装完成之后，使用 cnpm 来安装包就可以啦，比如安装 Hexo 输入 cnpm install -g hexo-cli 。安装 hexo-deployer-git 输入 cnpm install hexo-deployer-git --save 。
部署到 github 上后仍然无法打开个人博客主页，可以检查下自己建的仓库是否为公共仓库， Pages 是否是从 master 主分支上构建。
使用 hexo d 命令部署博客到 github 上时，总是失败，可以检查下 .ssh 文件夹下密钥文件是否和 github 配对，电脑中是否登录过其他的 github 账号，如是，可以打开 控制面板>>用户账户>>管理 Windows 凭据>> Windows 凭据>>普通凭据，删除其中 git:https://github.com 后重新配置 git 的 Github 账户信息
删除博文重新构建部署后，网页上仍然可以看到删除的博文，可以执行一遍 hexo clean 再重新构建部署后看看。

定制博客

很多定制内容，可以看主题原作者 blinkfox 的说明文档。深度定制博客，可以仔细阅读 Hexo的官方文档。
标题、副标题、 logo 等信息,可以在 myblog 目录下的 _config.yml 中修改。主页上其他信息，很多可以在 myblog\themes\hexo-theme-matery_config.yml 中修改。
留言板，国内可用的免登录的评论系统，valine，看上去挺不错的，可以尝试以下。
新建菜单，如果我要创建一个放松的菜单，在放松下面添加音乐、电影、书籍、游戏4个子菜单，那么先在主题配置文件 _config.yml 的 menu 下面添加菜单项，如下。
```
menu:
  首页:
	url: /
	icon: fas fa-home
  放松:
	url: /relax
	icon: fas fa-mug-hot
	children:
	  - name: 音乐
		url: /music
		icon: fas fa-music
	  - name: 电影
		url: /movies
		icon: fas fa-film
	  - name: 书籍
		url: /books
		icon: fas fa-book
	  - name: 游戏
		url: /games
		icon: fas fa-gamepad
```
在 themes\hexo-theme-matery\layout 文件夹下添加 relax 文件夹，在 relax 中添加 index.md 文件，文件内容修改为
```
---
title: relax
date: 2022-11-22 14:39:14
type: "relax"
layout: "relax"
---
```
在 themes\hexo-theme-matery\layout 文件夹中添加 relax.ejs 文件，在 relax.ejs 文件中写入当前菜单页的信息
子菜单为同样的方法创建文件
写博文，可以在 Git Bash 中用 hexo new [layout] <title> 命令来写博客，比如 hexo new post Hexo-stg （如果标题中含有空格，需要给标题加上引号，post是可以省略的）之后，我们就可以在 source_posts 下看到名为 2022-11-11-Hexo-stg.md 刚创建好的博客，打开后，就可以在里面尽情的书写了。在 _config.yml 文件中 post_asset_folder 值改为 true ，那么在控制台创建博客时，会同时在 _post 文件夹中创建一个同名的文件夹，我们可以把博客已用的资源放在这个文件夹中方便管理。也可以设置使用其他布局来写博客，如 hexo new game 旷野之息 ，当然需要先在 themes\hexo-theme-matery\layout 中做好game布局文件。
hexo new page relax 会在 source 中创建一个单纯的名为 relax 的页面，可以配合创建菜单使用