博客搭建

本文最后更新于 2025年3月5日凌晨

搭建个人博客mac版

大纲

搭建博客主要分为三个部分，执行可以无先后之分。

分别是：

1，环境配置Hexo

2，部署到github上

3，绑定域名

个人建议先绑定域名，因为实名认证以及域名解析认证需要花费3-5天时间。

三者的关系是，域名作为入口，hexo创建门面，github储存内容。因此，他们需要相互连接才能建成最后的博客，hexo首先创建博客，然后推送到github上进行存储，github连接域名，使得访问者可以看到你的博客。

Hexo

简洁高效的博客框架，可自己下载主题

官网：https://hexo.io/zh-cn/

安装Hexo前需要安装Git

# 检查git是否安装
git --version
# 没安装就安装 
brew install git

在mac上我们通过brew来安装：

brew install node
# 安装过程中可能出现bug,显示不能安装node的依赖libuv，那么就手动安装 brew install libuv
# 查看版本号
node -v
# 查看npm版本号 没有就安装
npm -v
# 安装 hexo
npm install -g hexo-cli

创建文件夹：

# 首先cd 到你想要保存的路径当中
#查看当前路径
pwd
#查看当前文件夹下的文件
ls
#创建文件夹
mkdir blog
cd blog
# 初始化
hexo init
# 启动 s:start
hexo s
浏览器输入：http://localhost:4000，可查看到默认生成了一篇博文
新建一篇博文
hexo n "hellow"
# 清理
hexo clean
#生成
hexo g
hexo s

Github 部署

git新建一个仓库，具体新建步骤建议参考网上教程

1 2	`# 安装git部署插件 npm install hexo-deployer-git --save`

修改_config.yml的配置

deploy:
  type: git
  repo: https://github.com/你的git名字.github.io.git
  branch: master

1 2	`回到命令行部署到远端 hexo d`

域名申请

首先需要在阿里云申请域名 https://www.aliyun.com/ss/?k=%E5%9F%9F%E5%90%8D

注册阿里云，

解析域名

打开阿里云首页控制台->域名->域名列表->解析

此处可能没有记录类型，默认的记录类型为A，因此记录值需要填写ip地址。可以在terminal中 ping 你的github名称.github.io，就能得到ip地址，生成解析文件后再进行修改即可。

设置主机记录@，记录类型为CNAME，记录值是”你的github名称.github.io“。设置主机记录www，记录类型为CNAME，记录值是”你的github名称.github.io“

部署到GitHub上

在blog/source中添加文件CNAME

并写入你的域名如: asdf.com

接着回到blog/publish的终端：

1
2
3

hexo clean
hexo g
hexo d

可能遇到的错误： “The authenticity of host ‘github.com’ can’t be established”：这表明你正在连接 GitHub 的服务器时，系统无法确认其身份 “Permission denied (publickey)”：这个错误表明 Git 无法通过 SSH 密钥进行身份验证。解决方案：添加SSH密钥

启动 SSH 代理：
1
eval "$(ssh-agent -s)"
添加 SSH 密钥到代理：使用下面的命令添加密钥（如果你使用的是默认的密钥文件 ~/.ssh/id_rsa）：

1	`ssh-add ~/.ssh/id_rsa`

3.  验证 SSH 密钥是否添加成功：

运行以下命令，确认密钥是否已正确添加到代理中：

1	`ssh-add -l`

如果看到类似 2048 SHA256:xxxxxx 的输出，表示密钥已成功加载。

检查 GitHub 是否添加了 SSH 公钥

如果你还没有将 SSH 公钥添加到 GitHub，可以按照以下步骤进行添加： 1. 查看本地公钥：打开终端，运行以下命令查看 SSH 公钥：

1	`cat ~/.ssh/id_rsa.pub`

复制输出的内容。

2.  将公钥添加到 GitHub：
1.  登录到你的 GitHub 账户。
2.  进入 Settings → SSH and GPG keys → New SSH key。
3.  粘贴公钥内容并保存。

测试 SSH 连接

可以通过以下命令测试 SSH 是否能够正确连接到 GitHub：

1	`ssh -T git@github.com`

如果连接成功，你应该会看到如下消息：

Hi ! You've successfully authenticated, but GitHub does not provide shell access.

如果你看到类似的消息，就说明 SSH 配置已经正确。

确保 Git 远程 URL 正确

请确保远程仓库的 URL 是通过 SSH 配置的，而不是 HTTPS。你可以使用以下命令查看当前的远程 URL 配置：

1	`git remote -v`

如果看到的 URL 是类似 https://github.com/yourname/yourname.github.io.git，请按照以下命令将其更改为 SSH URL：

1	`git remote set-url origin git@github.com:yourname/yourname.github.io.git`

5. 重新尝试推送代码

如果上述步骤都已经完成，可以尝试重新执行 git push：

hexo d

域名备案

到阿里云主页，最上一栏的右边有ICP备案，根据教程走即可。

Hexo扩展设置

首先，梳理一下关系：page生成页面，config文件设置页面，source存储文件内容。page生成的页面需要使用config来设置属性，而config中的资源调配需要符合source中存储的文件名称。

_config.yml文件用于设置博客的内容类型，比如颜色高度，名称等等，以及使用的图像链接来源。

总文件夹下和每个themes文件夹下都有相应的_config.yml。

source中存储文章内容以及所需图像。

博客中的每个链接都是一个page，比如”关于我“的页面等等，可以通过hexo new page "page 名称"来生成，生成完之后会在source中出现一个文件夹，里面有index.md的文件，编辑这个文件就是编辑该页面的内容。该page的设置在你的themes的_config.yml进行设置。

至于config文件到底怎么设置，可以去hexo上下载喜欢的主题，解压到themes当中。

接着在blog路径下的config文件中将theme一栏改为需要使用的theme文件夹名称，一般theme中的config文件都有注释，应该看看就明白了。

hexo 问题：

1，如何在自己的页面中添加图像并让其显示显示折叠

1	`hexo new page yourpage`

解决方法：通过markdown语法进行添加

打开source 中yourpage目录中的index.md添加示例：

<details>
  <summary>2025 年 3 月</summary>

  <ul>
    <li><a href="/2025/03/04/2025-3/paper1/">paper1</a></li>
    <li><a href="/2025/03/04/2025-3/paper2/">paper2</a></li>
  </ul>

</details>

/2025/03/04/2025-3/paper1/ 必须跟post文件的生成链接相同，可以通过hexo s命令后生成的网页找到该文件的链接：http://localhost:4000/2025/03/04/2025-3/paper1/ 提取http://localhost:4000 后的链接即为我们需要的href，paper1这个名字可以自己随便改

2，如何正确显示图像

显示图像现在用的插件是hexo-asset-img

安装：

1	`npm install hexo-asset-img --save`

配置：打开source下面的_config.yml文件

post_asset_folder 设置为 true

添加：

asset_image:
  enable: true  # 启用图片处理插件
  folder: source/images  # 确保图片存放路径正确
  url: /images  # 图片 URL 配置

hexo-asset-img注意点1：

原理：hexo-asset-img的作用其实是在publish里面生成正确的html文件，即将正确的图像路径插入到html文件中，同时把图像copy到publish文件夹当中。

因此，你生成的时候最好使用hexo new post yourpostname这个命令，因为它会在_post文件夹下生成一个文件，yourpostname.md, 以及一个文件夹 yourpostname 用来存放图像，这种格式是必须的，如果你自己在_post下新建文件，则必须新建一个跟其同名的文件夹，不然hexo-asset-img这个插件找不到你的image，就无法在publish里面生成正确的html文件，也不会把图像copy过去，图像就无法显示。

在hexo-asset-img没报错的情况下，如何判断你的publish里面有没有正确生成图像和链接：

去publish文件里面，一般文件都会在在年月日文件夹下面,如2025/03/04/，看看里面有没有图像，或者找到该文件夹之后，执行：

1	`ls -R public/2025/03/04/`

看看里面有没有图片，没有很可能就是你的文件存放格式错了，而不是hexo-asset-img的问题

还可以再去public/2025/03/04/下面的yourpostname/index.html文件中找

1	`<img src=`

看看后面的图像名称路径对不对，正常来说应该只有一个imgae_name.png，而没有相对路径和绝对路径

hexo-asset-img注意点1：当前vscode中的markdown已经不需要插件就支持直接粘贴图像，为了配合hexo-asset-img，我们需要设置它的参数

找到vscode左下角的设置图标，或者快捷键

1 2	`Windows/Linux：Ctrl + , Mac：Cmd + ,`

搜索：

markdown.copyFiles.destination

添加项

1 2	`项：*/ 值：${documentBaseName}/`

项代表你要粘贴的文件格式，**/* 代表匹配所有文件，通常为图片

值代码你想要粘贴到哪个路径下，在这里设置为md文件的同名文件夹下

想要生成子文件夹下的post

1	`hexo new post -p folder_name/yourpostname`

技术

#hellow world

博客搭建

http://example.com/2021/12/21/博客搭建/

作者

Artimis

发布于

2021年12月21日

许可协议

pytorch+mujoco 上一篇

Hello World 下一篇