公众号 hexo个人博客搭建(一)

前言

Tech智汇君最近在搭建一个自己的hexo静态博客，由于几年前搭建的博客本地资源丢失，导致现在不得不重新再部署一次。上一次搭建没有经验，选一个不好看的主题，所以正好趁这次机会换了一个自己满意的。

hexo博客经历这几年的发展有了很多好看的主题可供选择，而且主题都内置了许多功能，只需要参考说明文档修改配置文件就行了。这次我用了anzhiyu主题，效果如下图：

我的博客~

如果你想拥有一个这样的或者类似的静态博客，而你没有任何经验，请关注我。

我会将这次搭建部署的过程记录下来，由于搭建后还需根据自己的喜好修改配置、备份博客本地资源、网站加速访问、以及后续学习知识后的添枝加叶等许多内容，所以我会将这次博客搭建作为一个系列来发布。

hexo是基于nodejs的静态博客框架，它简洁、高效、快速、所需的依赖少，安装简单，生成的网页可以托管到Github Pages或者Coding等上。而且hexo的创建者是台湾人，所以有专门的中文文档可供参考。

如下图这是我第一次搭建的博客，现在看起来是真的丑，而且许多功能都是参考网上教程修改代码添加的，搞到最后自己都忘了改了哪些地方。

基础工作

hexo官网

安装Node.js

首先你需要为电脑安装上Node.js，官网说最好安装12.0及以上的版本。

安装好后，可以用下面的命令查看node和npm的版本：

1
2

node -v
npm -v

这是官网给的nodejs版本和hexo版本关系表：

安装Git

因为后面需要将生成的静态网页托管到Github上，所以要安装版本控制系统Git

安装好后，鼠标在桌面或者文件夹空白处点击右键会有git bash here选项，后续的所有命令都在git bash here里面执行，输入下面的命令可以查看git版本：

1

git --version

安装Hexo

输入下面的命令安装hexo，默认安装的是最新：

1
2
3

npm install -g hexo-cli

hexo -v

在你存资料磁盘的根目录创建一个目录，如HexoBlog

进入目录后，右键进入git bash here，输入下面命令：

1
2

hexo init myblog
npm install

执行npm相关命令时，可能会遇到各种错误，唯一的方法就只能问搜索引擎，后面有我当时遇到的各种错误以及我怎么解决的

命令执行成功后，你的目录下应该有下面的文件和文件夹

1
2
3
4
5
6
7

node_modules: 依赖包
public：存放生成的页面
scaffolds：用于生成文章的一些模板文件
source：用来存放你的文章
themes：主题文件夹
package.json：存放已安装插件的信息
_config.yml: 博客的配置文件

此时，先后依次输入下面的命令：

hexo g：生成静态页面

hexo server：打开本地服务，主要用来调试博客

1
2

hexo g
hexo server

在浏览器输入：localhost:4000，就可以访问博客了，这里是使用的默认主题

使用npm执行命令可能会遇到一些报错，我当时在这里困了好久，每个人可能遇到的错误不一样，下面是我执行npm命令时遇到的错误：

npm http fetch GET https://registry.npmjs.org/xxxxx attempt 1 failed with ECONNREFUSED

1
2
3
4
5
6
7

先查看有没有代理
npm config get https-proxy


清空代理
npm config delete https-proxy
npm config delete proxy

1
2
3
4

npm config get proxy
npm config get https-proxy

结果都返回null，说明清空了

npm http fetch GET https://registry.npmjs.org/picocolors attempt 1 failed with ETIMEDOUT

连接超时，解决方案切换镜像源，网上很多人说的淘宝镜像源是一个过时链接，这里使用腾讯镜像源：

1

npm config set registry https://mirrors.cloud.tencent.com/npm/

参考链接1

Error: EPERM: operation not permitted, mkdir‘xxxxxxxxxxxxxxxx‘

权限问题，开始菜单找到nodejs，然后进入通过原文件位置进入到nodejs安装目录，找到nodejs文件夹，右键属性->安全->允许users完全控制~

npm xxxx cache miss cache hit

大概是清除缓存

1
2
3

npm cache clean -f

npm list -g --depth 0

npm verbose stack Error: Unsupported URL Type “link:”: link:./scripts/eslint-plugin

1
2

npm install -g yarn
yarn add mitt

参考链接2

切换主题

这里我选择的安知鱼主题，还是在博客目录下右键git bash here，下载主题：

1

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

修改博客根目录下的_config.yml文件，滑动到最后将主题配置成anzhiyu，注意前面有一个空格：

如果用记事本编辑的，一定要另存为，编码选 utf-8

这里建议使用NotePad++修改配置文件

安装渲染插件：

1

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

此时执行命令：

hexo clean：清理生成的文件

hexo generate

hexo s

1
2
3
4
5

hexo clean

hexo generate

hexo s

此时你就实现这个主题的博客效果：

将Hexo部署到Github

到现在，你只能在本地开启服务后，在当前电脑上访问博客，接下来我们将博客网站托管到Github上，这样你可以使用github提供的域名访问你的线上网站

注册Github账号

首先你得有一个github账号

网站

创建仓库

登录账号后创创建一个仓库

仓库的名字是：你的账户名.github.io

生成SSH Key

进入bash here，输入命令：

git config –global user.name “你的github账户名”

git config –global user.email “你注册github的邮箱”

1
2

git config --global user.name "yourname"
git config --global user.email "youremail"

通过下面的命令查看是否配置正确：

1
2

git config user.name
git config user.email

接下来生成密钥，输入命令后一直按回车键就可以：

1

ssh-keygen -t rsa -C "你的邮箱"

进入C:\Users\Administrator\.ssh，可以看到生成的私钥id_rsa和公钥id_rsa.pub:

Github保存SSH公钥

需要把公钥的内容复制保存到github

点击github账号头像->setting->ssh and gpg keys->new ssh key:

查看是否配置成功：

1

ssh -T git@github.com

部署

根目录下的_config.yml，将repo设置为：

1
2
3
4

deploy:
  type: 'git'
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: main

安装部署插件：

1

npm install hexo-deployer-git --save

1
2
3

hexo clean 清除之前生成的东西 简写hexo cl
hexo generate 生成静态文章 简写hexo g
hexo deploy 部署 hexo d

注意deploy时可能要你输入username和password。

部署完成就可以通过你的账户名.github.io访问博客网站了

重要

如果你还没关注我，而你又对效率工具、AI、精品网站等内容感兴趣，你可以给我一个小小的关注，我会持续发布相关内容。🤞

为了能第一时间收到Tech智汇君发布的内容，您可以把【Tech智汇站】设置为星标✨

如果这篇文章对你有帮助请：点点赞、点分享、点在看、点收藏 谢谢啦~💕

锦瑟无端五十弦，一弦一柱思华年。