hexo本地博客+云服务器个人博客搭建

最新推荐文章于 2024-08-01 11:34:33 发布

szfmsmdx

最新推荐文章于 2024-08-01 11:34:33 发布

阅读量1.4k

点赞数 15

分类专栏： hexo 文章标签： linux

本文链接：https://blog.csdn.net/m0_56112405/article/details/138262057

版权

hexo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

title: hexo本地博客+云服务器个人博客搭建
date : 2024-04-06 12:00:03
categories : hexo
tags:

hexo
git
nodejs
nginx

记录一下本地搭建 hexo 个人博客并部署到云服务器的过程。。。
本地环境是 win11 ，云服务器是 Ubuntu 22.04LTS

大概的流程是本地写笔记，推送到云服务器然后部署，展示给大家
所以当然也可以用 GitHub.io 去进行部署，这是取决于各位的。。。

Node.js && git

Node.js 和 git 是 hexo 安装前的必备插件，所以要提前安装一下这两个，基本上，进官网直接下载一直 next 安装即可。。。

git

git下载地址
可以通过 cmd 命令 git -v 查看 git 版本判断是否成功安装
按需下载即可

Node.js

Nodejs下载地址
同样按需下载，没有特殊要求无脑继续就可以了。。
可以在 cmd 窗口中通过 node -v 和 npm -v 命令查看版本（查看是否成功安装了 node）
注意 node 自带 npm ,但是版本和下载路径可能不满足大家的需求

npm更换淘宝镜像源

#最新地址 淘宝 NPM 镜像站喊你切换新域名啦!
npm config set registry https://registry.npmmirror.com

# 查看当前源
npm config get registry 

# 恢复官方源
npm config set registry https://registry.npmjs.org

npm更新

搜索词条的第一个
这里通过 n 包对 Nodejs 进行管理

# 安装
npm install -g n

# 查看版本
n lts # 长期支持版本
n latest # 最新版本

其他命令就不展示了，善用搜索引擎 hh

配置 hexo

在命令行中输入

npm install -g hexo-cli

找到你要写博客的父目录，比如你想将文件夹放在桌面就取到桌面的路径下

hexo init <folder> // folder为你的博客目录名字
cd <folder> // 进入该目录
npm install // 安装依赖

到此，本地博客就已经搭建完成了

将本地博客部署到云服务器中

既然是部署到云服务器，当然需要 ssh 连接，我用的 cmd 下的ssh连接
貌似 win 下已经自带了 openssh 吧，我不太清楚hh，还请有心人自行检索搜索引擎 ^ ^

git 安装

这里我用的阿里云的服务器，他们给的镜像里已经装有了 git 所以就没有安装了。。
既然需要同步，那么自然不能每次都要登录 git ，所以要配置一下免密登录

1. 创建用户并设置密码

下面的 username 设置为你喜欢的用户名，并设置一个属于这个账户的密码

adduser [username]
passwd [username]

可能不是这个顺序，但是注意看命令行给的提示，看心情补充额外信息吧，只要有用户名密码即可 hh

2. 分配用户权限

如果没有 wheel 组就先建立 wheel 组（没有的话直接添加会报错的）

# 建立 wheel 组
addgroup wheel

# 添加刚刚建立的用户到用户组
usermod [username] -G wheel

3. 本地创建密钥

！！！注意是在本地 win11 创建密钥，相当于身份证了，就可以实现免密登录了
在本机终端中输入

ssh-keygen -t rsa

然后无脑回车，得到一个新的密钥
一般来说在你创建的时候命令行会提示你密钥文件的路径，windows电脑一般是C:\Users\Administrator.ssh（不确定可以百度一下 hh）

复制id_rsa.pub文件中的内容备用。

4. 配置公钥

回到服务器端，用 su 命令切到你创建的那个用户中

su - [username]

创建 .ssh 文件夹

cd ~
mkdir .ssh

利用 vi 或 vim 新建 authorized_keys 文件

vim .ssh/authorized_keys

# 或者
vi .ssh/authorized_keys

将刚刚 id_rsa.pub 公钥中的内容，复制粘贴到文件里，保存退出。

git 仓库配置

退出用户登录

su root

# 按照提示输入你的密码...

这时应该可以看到是 root 用户，创建 git 目录，并修改目录的所有权和用户权限

mkdir /home/git/
chown -R [username]:[username] /home/git/   # 是你刚刚创建的用户名
chmod -R 755 /home/git/

进入目录，建立git仓库，修改权限

cd /home/git/
git init --bare blog.git
chown [username]:[username] -R blog.git

新建钩子文件，但是要看你具体的 git 版本
我的是 post-update.xxx（文件类型忘了，配置时忘了记录）
需要进入修改添加两行内容

vim /home/git/blog.git/hooks/post (然后这里直接按 tab 补全补出来)

进入文件后添加

#!/bin/bash
git --work-tree=/home/blog --git-dir=/home/git/blog.git checkout -f

不着急退出，看一下上面的注释，我的文件里写着要修改文件名为 post-update 才能生效，具体问题具体分析吧，用 rm 命令重命名好了，然后wq保存退出

rm ./post- (tab 补全)  ./post-update

然后修改文件权限

chmod +x /home/git/blog.git/hooks/post-update

配置 nginx

安装 nginx

apt-install nginx 
# 同样可以查看版本判断是否安装成功
nginx -v

# 设置开机启动
systemctl enable nginx.service

# 查看 nginx 状态
systemctl status nginx.service

修改nginx的默认配置，其中cd后边就是刚刚查到的安装位置，每个人可能都不一样 /usr/local/nginx/conf/nginx.conf
我的安装位置是/etc/nginx/nginx.conf
在网上我看到两种说法，一种修改 default一种修改 conf，但我个人觉得还是修改conf吧。。。
配置 conf 文件
 配置 default 文件

配置完重启下 nginx

service nginx restart

更改本地 hexo 配置文件

打开你本地的hexo博客所在文件里面的配置文件_config.yml
应该在最后的位置

deploy:
  type: git
  repository: [username]@[公网ip]:[/home/git/blog.git]   #用户名@服务器Ip:git仓库位置
  branch: master

在本地hexo博客根目录下，打开终端，部署

hexo clean
hexo g
hexo d

然后访问服务器的 IP 地址应该就可以看到 hexo 已经部署完成了。。。
后续就是善用搜索引擎的过程了。。。

域名配置

但是目前访问博客的时候有个问题，就是网址栏一直有个不安全，这是由于通过http访问
我们需要将其改为 https 访问(https = http + ssl)
所以首先要申请 ssl 证书，然后再去nginx里配置一下

去服务商拿ssl免费证书
我是阿里的服务器，地址在这里
选择免费证书，然后一路系统配置申领就好了
申领结束点击下载 nginx 版本
将证书传到服务器的指定位置(!需要记住)
我放在了 /etc/nginx/conf.d文件夹下

修改 nginx.conf 配置文件内容
注意如果在 conf 文件下修改，要在 http 的域内修改，所以要排查一下"{}"是否闭合，防止漏了hh
添加或者修改server域
这是https的433端口配置

server {
  #HTTPS的默认访问端口443。
  #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
  listen 443 ssl;
  #填写证书绑定的域名
  server_name domain_name;
  #填写证书文件名称
  ssl_certificate cert/domain_name.pem;
  #填写证书私钥文件名称
  ssl_certificate_key cert/domain_name.key;
  ssl_session_cache shared:SSL:1m;
  ssl_session_timeout 5m;
  #自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
  #TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
  #表示优先使用服务端加密套件。默认开启
  ssl_prefer_server_ciphers on;
  location / {
        #配置域名最终向后端发送请求的url地址
        proxy_pass http://127.0.0.1:8008;
  }
}

这是http的80端口配置

server {
      # 配置阿里云域名和监听的80端口
      listen       80;
      server_name  domain_name;
      #charset koi8-r;
      #access_log  logs/host.access.log  main;

      #将所有HTTP请求通过rewrite指令重定向到HTTPS。
      rewrite ^(.*)$ https://$host$1;
      location / {
          #配置域名最终向后端发送请求的url地址
          proxy_pass http://127.0.0.1:8008;
      }
      #error_page  404              /404.html;
      # redirect server error pages to the static page /50x.html
      #
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }

配置完依次执行命令 service nginx restart 命令和 nginx -t(或systemctl status nginx.service)命令，查看nginx的运行状态，如果是successful，那么就可以访问一下你的域名，网址栏的不安全字段是否消失并变为小锁了，如果是说明配置完成

一次🤡的Error记录。。。

但是很抱歉，笔者按照上述流程没有配置成功，在配置转发端口的时候，访问遇到了502 error。。。
然后取消转发配置，能发现ssl证书成功配置
接下来排查一下为啥转发失败了 ^ ^

先看一下 proxy_pass 设置，遇到两个问题

设置为 127.0.0.1 报502错误
设置为 公网IP 报 504 错误

理一下，首先，ssl证书配置成功，说明 443 端口是可以正常访问的
我们的配置思路是，如果通过 http 的 80 端口访问，那么强制改写为 443 走 https 端口访问，然后443端口转发到4000的hexo博客端口

好，那么先排查 80 端口是否能正常访问

要先安装 telnet
在控制面板-程序-程序和功能-（侧边的）启动或关闭Windows功能-telnet勾选
等他安装完即可

在shell中 telnet ip port 如果出现空白页面即可

靠，注意是空格不是冒号！！！

ok，80端口能ping通（试了下 443 端口同样能ping通，但是4000端口ping不通
好，那么问题就在4000端口了

查看 4000 端口的进程
netstat -nplt
发现根本就没有4000端口？！
看到这里突然恍然大悟了，这下🤡了呀
原来咱们部署的原理是，在本地deploy的时候，通过git hook将文件自动push到服务器的仓库中
然后访问80端口，配置nginx将root修改到博客的静态资源处实现访问。。。
我给搞忘了，一直在本地 hexo s开4000端口看渲染效果，忘了服务器端是拿的静态资源。。。
我也将这次🤡记录在博客上，供大家参考

接下来修改 nginx 的配置文件就很清晰了。。。
因为我的博客地址是 /home/blog/
直接去conf文件下，首先修改 root 字段的地址
然后 index 字段看一眼没问题，ok 重启，登网站，完美。。。

现在的逻辑是：通过域名访问 80 端口->转发到 433，433去 root 下面搜 index 给出的文件名

终于解决了hhhh

图床搭建

写博客自然不能少了图片，但是放在 hexo 的文件下，每次推送打包的过程实在是受不了，所以还是选择将图片放在服务器上，搭一个图床好了。。。
参考这篇文章

主要的原理是利用 PicGo推送到阿里云的服务器，然后 typora 修改图片索引为 url 地址，这样加载的时候就可以直接在服务器的存储地址上进行搜索，不会占用本地资源了。。。

OSS存储

本文用的是阿里云的OSS存储作为图片的放置，要花点小钱 T.T买个资源包
首先在阿里云的控制台搜索oss，进入oss控制台，然后点击左侧概览下面的Bucket列表创建一个bucket

名称自定
地域选择离自己近的就好
注意读写权限要是公共读！不然博客无法去读取图片资源

创建完成后，点击下面的资源包搞一个便宜点的资源包（有券的话应该免费 ^ ^）
资源购买完成后开始创建类似于私钥的东西
在一开始给出的控制台中，鼠标移动到右上角的头像下，有个 AccessKey管理，点击进入有弹窗提示，这里选择稍微安全点的子用户（因为拿到你的AccessKey可以控制阿里云账户），然后创建用户