发布于 ，更新于 

hexo+stellr+云服务器安装部署踩坑记录

1. 资源准备

1
2
3
4
5
6
7
云服务器: Centos7.9
PC: MacOS

Hexo: 5.4.0 ~ 6.3.0
hexo-cli: 4.3.0 ~ latest
node.js: 14.17.3 ～ 18.12.0 # 建议选择 LTS 版本，过高的版本 hexo 还没有进行兼容。
npm: 6.14.13 ~ 8.19.2

2. 安装步骤

2.1 云服务器 相关安装

1
2
3
ngnix: 1.22.1
git: 1.8.3.1
node: 16.15.1

2.1.1 git 安装

安装: root用户下执行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 安装Git
yum install git
# 配置Git用户
adduser git
# 修改用户权限命令
chmod 740 /etc/sudoers

vi /etc/sudoers
# 找到root ALL=(ALL) ALL，在此行下面添加：
git ALL=(ALL) ALL

# 保存退出，还原用户权限（这里不一定是400）
chmod 400 /etc/sudoers
# 设置 Git 用户的密码：
sudo passwd git

服务器ssh密钥设置: git用户下执行：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 切换到 git 用户，然后在~目录下创建.ssh文件夹
su git
cd ~
mkdir .ssh
cd .ssh

# 生成公钥密钥文件
ssh-keygen
# 复制一份
cp id_rsa.pub authorized_keys
# 修改权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

将本地电脑的id_rsa.pub文件的内容拷贝到云服务器的authorized_keys文件的末尾

在本地验证连接云服务器 ssh -v git@云服务器的公网IP

创建git仓库：git用户下执行：

1
2
3
4
5
6
7
cd ~
git init --bare blog.git
vi ~/blog.git/hooks/post-receive
# 输入：
git --work-tree=/home/www/website --git-dir=/home/git/blog.git checkout -f
# 保存退出后，添加执行权限
chmod +x ~/blog.git/hooks/post-receive
--work-tree=/home/www/website

此目录需要在git用户下可以访问到

2.1.2 ngnix 安装

https://juejin.cn/post/6844904134345228301https://juejin.cn/post/6844904134345228301

所有操作使用root用户

yum安装失败后，改用编译安装成功

修改配置：

1
2
3
4
5
6
7
8
9
10
11
cd /usr/local/ngnix/conf
vim ngnix.conf
# 再如下位置修改：
server {
        listen       80;
        server_name  xxx.xx.xx.xxx,localhost; #添加云服务的公网ip或者域名
        location / {
            root   /home/www/website; # 修改root地址为项目地址
            index  index.html index.htm;
       }

/home/www/website;

此目录需要在root用户下可以访问到，否则会403

2.1.3 安装node

我是使用的云服务器的宝塔界面安装的，手动安装方式自行查找

2.2 本地电脑部署

2.2.1 安装node

已有，自行查找

2.2.2 安装Hexo

https://hexo.io/zh-cn/docs/https://hexo.io/zh-cn/docs/
1
2
3
4
5
6
7
8
9
npm install hexo-cli -g
# 验证
hexo -v
# 在指定文件夹中新建项目文件
hexo init <folder>
cd <folder>
npm install
# 启本地服务器，浏览器中打开http://localhost:4000，即可看到初始的博客页面
hexo s

2.2.3 设置Hexo部署云服务器

1
npm install hexo-deployer-git --save

执行过程报错：npm ERR! Cannot read properties of null (reading 'matches')

解决方案：This error shows up when you run npm install in a directory where you previously ran pnpm install. The solution is to remove your node_modules directory and run npm install again.

https://stackoverflow.com/questions/74650198/npm-err-cannot-read-properties-of-null-reading-matcheshttps://stackoverflow.com/questions/74650198/npm-err-cannot-read-properties-of-null-reading-matches

打开_config.yml文件，修改deploy项目如下

1
2
3
4
deploy:
  type: git
  repo: git@云服务器公网IP:/home/git/blog.git
  branch: master

生成站点文件并推送至远程库:

1
hexo clean && hexo deploy

2.3 Stellar主题设置

https://xaoxuu.com/wiki/stellar/#starthttps://xaoxuu.com/wiki/stellar/#start

2.3.1 字体设置

我选用lxgw-wenkai字体

在_config.yml 中写入

1
2
3
4
inject:
  head:
    - <link href="https://cdnjs.cloudflare.com/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css" rel="stylesheet">
  script:

并在 _config.stellar.yml 中填写你引入的字体名称

1
2
3
style:
  font-family:
    body: '"LXGW WenKai Screen",system-ui,"Microsoft Yahei","Segoe UI",-apple-system,Roboto,Ubuntu,"Helvetica Neue",Arial,"WenQuanYi Micro Hei",sans-serif'

2.3.2 评论插件设置

我采用giscus

https://xaoxuu.com/wiki/stellar/comments/https://xaoxuu.com/wiki/stellar/comments/

在_config.stellar.yml中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
comments:
  service: giscus
  # giscus
  # https://giscus.app/zh-CN
  giscus:
    data-repo: xxx/xxx # [在此输入仓库]
    data-repo-id: # [在此输入仓库 ID]
    data-category: # [在此输入分类名]
    data-category-id:
    data-mapping: pathname
    data-strict: 0
    data-reactions-enabled: 1
    data-emit-metadata: 0
    data-input-position: top # top, bottom
    data-theme: preferred_color_scheme
    data-lang: zh-CN
    data-loading: lazy
    crossorigin: anonymous

其中只需要获取 data-repo data-repo-id data-category data-category-id

在giscus页面，按照此页面流程配置后会生成上面需要的信息

  1. 创建一个公开的github仓库，并在设置中将discussion启用
  2. giscus app 安装，否则访客将无法评论和回应。安装时选择刚刚创建的仓库
  3. 在giscus页面填写仓库
  4. 选择页面与嵌入的 discussion 之间的映射关系，默认**pathname**即可
  5. 选择新 discussions 所在的分类，选择推荐announcements即可

现在在giscus页面下方生成需要的信息了，将其填入_config.stellar.yml

填入时注意是yaml格式，不要简单的粘贴复制

3. 写作

3.1 文章

1
2
3
4
5
6
7
8
9
cd /Users/zhaoyuzhe/VScodeProjects/hexo_yuzhe

# 新建文章
hexo new post "springboot+serurity+oauth2实战"
# 本地启动
hexo s

# 提交远程服务器
 hexo deploy -g

3.2 项目

参考资料
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章
快来参与讨论吧