博客搭建

这里我使用hexo搭建的个人博客

准备

下载[nodejs](Node.js — 随处运行 JavaScript (nodejs.org))

我是一路next

image-20240502162734610

下载[git](Git - Downloads (git-scm.com))

一样next

image-20240502163015637

node -v

npm -v

git -v

下载hexo

用管理员身份打开cmd

npm install hexo-cli -g

image-20240502163428108

搭建仓库

成功下载好工具之后，我们开始搭建GitHub存储静态页面的仓库

登录github

新建一个仓库

image-20240502163854157

名字必须是账户名.github.io

要public

勾选 Add a README file

image-20240502170815788

image-20240502170927546

生成SSH key

git执行

ssh-keygen -t rsa -C "邮件地址"

image-20240502171118745

image-20240502171219549

一直回车(4次)

image-20240502171259459

找到生成的文件

C:\Users\admin\.ssh

image-20240502171410100

用任意文件编辑器打开id_rsa.pub

全选复制

在github的setting中打开ssh

新建一个ssh key

把刚刚复制的粘贴进去

image-20240502171802709

创建

验证：
打开git

输入ssh -T git@github.com

我这里报错：
image-20240502172545147

解决：

错误提示的是连接**github.com**的22端口被拒绝了。可以简单理解为此门不通，既然这个端口号走不通，那换一个端口号试试看

直接在该文件夹下新建config.txt文件，将下面的命令直接粘贴进去,保存退出后，把此文件的.txt后缀删除（重命名）

Host github.com
  Hostname ssh.github.com
  Port 443

再试 后跟yes

image-20240502173004790

成功

本地生成博客内容

再任意位置新建文件夹

打开 git

输入

hexo init

初始化

image-20240502173529224

报错 前面加了npx也一样

解决：
错误： git SSL certificate problem: unable to get local issuer certificate

这个问题是由于没有配置信任的服务器HTTPS验证。默认，cURL被设为不信任任何CAs，就是说，它不信任任何服务器验证

执行：

git config --global http.sslVerify false

再初始化 即可

image-20240502174237835

成功

然后安装

hexo install

image-20240502174432493

接下来依次输入

hexo g     生成
hexo s     本地部署

image-20240502174535921

image-20240502174621298

给的这个URL就是在本地部署的博客

给的这个localhost:4000 端口被占用了 请求被拒绝

改一下端口

hexo s -p 5000

image-20240502175245789

image-20240502175220172

成功

上线博客

进入之前的Blog文件夹，用打开_config.yml

划到最后

image-20240502175505659

将最后的tpye:”改为：

type: git
repository: 
branch: main

image-20240502175611545

注意首行缩进

回到github

把仓库的连接复制过来

粘贴到repository后面

image-20240502175921333

在博客文件夹中打开git

执行

hexo g 生成

hexo d 上传

image-20240502180349908

这里我也是报错了

解决

要在站点目录下执行以上安装hexo-deployer-git插件的命令，所谓站点目录就是执行hexo init的目录

执行：

npm install hexo-deployer-git --save

image-20240502180656958

再执行hexo d

image-20240502180732852

image-20240502180825885

成功

访问vvkladg0r.github.io

image-20240502180922779

成功

Vercel部署

Github提供的网址在国内的访问速度较慢，所以推荐在搭建完后用Vercel部署，再通过Vercel绑定到自己的域名上，这样会速度会很快。

因为Vercel给我们分配的域名在国内是无法访问的，所以我们需要把在Vercel部署的绑定到自己的域名上，这样就可以访问了。

这里大家可以选择购买域名

用 github连接Vercel账号

点击右上角的Add New Project创建新的项目，之后导入选项那里选择Continue with Github，这时候应该能看到你Github账号的仓库，选择你刚刚部署成功的存储静态博客的仓库<username>.github.io右边的Import选项，表示你要导入该仓库。

起一个只能有小写字母、数字或者或者连字符的项目名称，然后其他默认，点击Deploy，等待一分钟即可部署成功

image-20240505153802912

部署成功

然后点Continue to Dashboard

image-20240505154312979

成功

是我们现在还不能访问他给出的域，因为GFW把Vercel屏蔽了

绑定自定义域名：

点控制器里的Domains

查看当前的域，我们可以看到仅有Vercel给你预分配的一个域名，此时我们输入我们要用的域名，添加后他会提示你添加一条DNS解析记录。

image-20240505154919950

接下来在域名解析记录里面添加记录，其中记录类型对应Type，主机记录对应Name，记录值对应Value，其他的设置默认即可。

image-20240505161023476

我这里是腾讯云：

image-20240505161336615

image-20240505161357741

成功

image-20240505161435423

可以用自定义域名访问了

当你有了新的域名之后，需要将[BlogRoot]\_config.yml文件中的url配置项改为自己的新域名，这样博客的文章链接才会正确生成。

image-20240505194744268

主题安装

这里我选择的是安知鱼主题

安知鱼主题一款基于Butterfly主题修改的主题

这里还有很多hexo主题

我们根据它的官方文档安装

下载主题：

git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

在Blagfile文件中用vscode打开

image-20240506140626319

在vscode中打开终端 执行命令

image-20240506141151070

theme文件夹下出现了安知鱼的相关文件

这是主题的源码 以后更新的时候会覆盖所以源码 不是很方便

覆盖配置可以使主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置。

所以执行：

cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

将主题的配置文件移出来

但是这是在linux/mac下才能执行的命令

而我们window需要：

复制/themes/anzhiyu/_config.yml此文件到 hexo 根目录，并重命名为_config.anzhiyu.yml

image-20240506142216602

修改hexo主题配置

将_config.yml文件中的theme属性修改为anzhiyu

image-20240506142308758

安装 pug 和 stylus 渲染插件:

npm install hexo-renderer-pug hexo-renderer-stylus --save

报错了：

image-20240506143045345

解决：

根据他的提示先更新一下版本呢：

npm install -g npm@10.7.0

image-20240506143215947

行

再跑一下刚刚的命令呢

image-20240506143438304

好像没有问题了

本地启用一下hexo看看呢

hexo cl
hexo g
hexo s

image-20240506143728560

网页无变化 说明没安起

换一条命令呢：

npm install hexo-renderer-pug hexo-renderer-stylus --save --registry=http://registry.npmmirror.com

也有回显

image-20240506144534900

再部署看看

image-20240506144650106

这次好像可以了

image-20240506144735874

image-20240506144754684

应该没问题了

访问一下看看呢

image-20240506144857627

行 本地访问没有问题

image-20240506144941111

自定义域名访问没变

解决：

可能是更新花了一点时间

现在访问就是没问题的

image-20240506150442185

网站配置

一般都在_config.yml中修改

image-20240506151958836

主题的相关配置的话在_config.anzhiyu.yml里面 大家就自行修改吧

安知鱼官方配置文档

上传文章

我们在Blog文件夹中打开git bash,输入下方代码就可以生成新的文章md文件

hexo new 文章标题

image-20240512234724501

文章是.md格式，在我们的Blog文件夹中的source/_posts中

image-20240512234851152

然后我们用Typora软件打开该.md文件就可以开始写文章了

Front-matter

Front-matter 是 markdown 文件最上方以---分隔的区域，用于指定个别档案的变数。

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置

如果标注可选的参数，可根据自己需要添加，不用全部都写

Page Front-matter：

MARKDOWN

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标籤、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块(默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
kates 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

Post Front-matter：

MARKDOWN

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---
写法 解释
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标籤
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
cover 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments 【可选】显示文章评论模块(默认 true)
toc 【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number 【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple 【可选】显示 toc 简洁模式
copyright 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author 【可选】文章版权模块的文章作者
copyright_author_href 【可选】文章版权模块的文章作者链接
copyright_url 【可选】文章版权模块的文章连结链接
copyright_info 【可选】文章版权模块的版权声明文字
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside 【可选】显示侧边栏 (默认 true)

写好以后，我们还是一样打开git bash生成、上传

hexo g
hexo d

问题解决

在网站配置这里遇到了相当多的问题 有些问题很快解决了 有些就真的花了很多时间

访问/about路由 回显配置的md文档

这是这个博客搭建遇到的最大的问题

我按照anzhiyu官网文档搭建关于页面

搭好了访问发现不能访问yaml的前端页面 只能访问它的配置页面

这个问题我卡了两三天

这个问题出现的原因主要是配置文档存在隐藏字符 因为这个文档不是直接生成的 我是从别的博客上复制了一部分下来 所以有隐藏字符

这里最好是直接生成 或者手打 复制的话要检查有没有隐藏字符

hexo d时遇到的问题

主要就是这个

FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Error: Spawn failed
    at ChildProcess.<anonymous> (D:\BlogFile\node_modules\hexo-deployer-git\node_modules\hexo-util\lib\spawn.js:51:21)
    at ChildProcess.emit (node:events:518:28)
    at cp.emit (D:\BlogFile\node_modules\cross-spawn\lib\enoent.js:34:29)
    at ChildProcess._handle.onexit (node:internal/child_process:294:12)

对应这个报错 目前我还没有非常完美的解决方法

遇到过几次了 用的是不同的解决放到 但是都不能完全解决这个问题 都是当时解决了 后面配置的时候又出现了

法1：

不管他 他过一会就会自己好 但是这个过一会没有非常精确的数据、

法2：

执行

hexo cl

这个方法有时奏效

法3：

更新npm

执行

npm update

法4：

清除npm缓存 并重构依赖

先执行 清除缓存

npm cache clean --force

再执行

npm install

法5

这是我用的最离奇的方法 可能就是法1

当时是我查看hexo的报错日志 然后就直接好了

执行

hexo deploy --debug

很好又遇到这个问题 且上面的方法都不管用了 又找了个新方法

法6：

改_config.yml文件

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:	https://github.com/YourName/YourName.github.io.git(不要使用这个)
  		git@github.com:YourName/YourName.github.io.git(用这个)
  branch: master

可以 直接治本

图床配置

之前是用的picgo+github 但是他不是很稳定 所以这次我用的是去不图床

这个比较便宜10块1G

用的时候直接上传 找URL就行

image-20240509020222854

如果是去不图床的话 在连接typora的时候不能用picgo(不支持) 要用Upgit

Upgit:

Upgit 可以快捷地将文件上传到去不图床并得到其直链。简洁跨平台不常驻内存。可作为 Typora 自定义上传器使用

将下面代码保存为 config.toml 文件，其中 TOKEN 项，需改成自己的。注意 TOKEN 前的 Bearer 不要忘记添:

default_uploader = "lskypro2"
[uploaders.lskypro2]
host = "https://7bu.top"
token = "Bearer TOKEN"

另外创建文件夹 extensions，并将下面代码保存为文件 lskypro.jsonc：

{
    "meta": {
        "id": "lskypro2",
        "name": "LskyPro2 Uploader",
        "type": "simple-http-uploader",
        "version": "2.0.0",
        "repository": ""
    },
    "http": {
        "request": {
            "url": "$(ext_config.host)/api/v1/upload",
            "method": "POST",
            "headers": {
                "Content-Type": "multipart/form-data",
                "Authorization": "$(ext_config.token)",
                "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36"
            },
            "body": {
                "file": {
                    "type": "file",
                    "value": "$(task.local_path)"
                },
                "token": {
                    "type": "string",
                    "value": "$(ext_config.token)"
                }
            }
        }
    },
    "upload": {
        "rawUrl": {
            "from": "json_response",
            "path": "data.links.url"
        }
    }
}

拿token:

image-20240511175154599

这里我只启用了上传图片

使用方法：

cmd到upgit目录下 执行：

upgit.exe FILENAME

就可以将图片上传到图床

连接Typora:

转到 Image 选自定义命令作为图像上传器，在命令文本框中输入 Upgit 程序位置，然后就可以使用了：

image-20240511182823193

image-20240511182850080