【玩转Lighthouse】搭建Hexo博客并将Lighthouse作为网站发布平台和图床

2022-04-13 11:01:40 浏览数 (1)
那个叫啥来着的？头图不能少那个叫啥来着的？头图不能少

前言

相信很多人选择搭建自己的博客，会选择现有的博客系统方案，比如：Wordpress、Hexo和Halo等。

我个人是推荐Hexo的，相比Wordpress和Halo，Hexo是全静态博客，没有数据库、对服务器资源消耗也极低，而且可定制化也极高。

只是…… 正因为是全静态的，需要插入图片的直链作为文章内图片引用，所以涉及到一个图床概念。好在，上述需求，一台轻量应用服务器即可。

Hexo博客

借此机会，我们先介绍一下什么是Hexo博客。

Hexo博客其实是一个基于Nodejs开发的一套博客系统，借助Hexo，可以把自己的Hexo配置和Markdown文章，编译为HTML JavaScript CSS的存静态资源。

类似于Vue的build操作，但是Hexo对每片文章都有生成.html文件和真实DOM元素，而不是Vue在非预渲染和非SSR模式下的Hash或History路由模式。

举个例子，这是Hexo的配置文件：

代码语言：shell复制
.
├── _config.fluid.yml       # 主题配置文件
├── _config.yml             # Hexo配置文件    
├── node_modules            
├── package-lock.jso 
├── package.json
├── scaffolds
├── source                   # 用户核心文件
└── themes                   # 主题文件

之后使用Hexo命令，可以生成public文件夹，内部就是可以发布的静态文件了：

代码语言：shell复制
.
├── _config.fluid.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public                   # 我们Hexo构建的静态
├── scaffolds
├── source
└── themes

public内：

Hexo内Hexo内

准备工具

现在教程正式开始，首先看看我们需要准备什么？

  • 本地：一台安装了Node.js和Git的电脑，操作系统随意（Windows、macOS和Linux均可）。
  • 服务器：一台Lighthouse（建议使用Linux系统，e.g. Debian、CentOS）
  • 可选：CDN内容分发节点、一个域名

其中：

  • 如果你本地并没有安装Git，Windows用户参考：https://git-scm.com/download/win；macOS和Linux可以直接使用软件包管理器安装。
  • 如果你本地并没有Node.js，那么我个人推荐安装NVM（多版本Node.js管理器），参考教程：https://cloud.tencent.com/developer/article/1812323
git和nodejsgit和nodejs
  • CDN内容分发节点是可选配置，使用腾讯云CDN节点，可以轻易缓存Hexo和图床资源，加速用户上网体验，并且减缓Lighthouse带宽压力。但是，使用腾讯云的CDN需要有个备案域名哦。

Lighthouse，我们准备一台最低配置就可以，小伙伴们可以趁优惠试试：

  • https://curl.mintimate.cn/1jccDM8rK1S
最近优惠最近优惠

注意⚠️：

  • 以下服务器，均指任意一台Lighthouse服务器，配置没有指定，均可按最低配置计算。
  • 服务器系统建议选择Linux服务器，我选择的是Debian10。
不推荐Windows Server不推荐Windows Server

服务器初始化

首先，当然是服务器的初始化，根据上次的文章和视频介绍：

  • （文章）Linux服务器入门：如何远程登录自己的腾讯云服务器？
  • （视频）10分钟手把手教你通过SSH，使用密钥/账号远程登录Linux服务器（Windows/macOS）

我们在本地SSH连接了服务器：

连接服务器连接服务器

环境准备

之后，我们给服务器安装依赖和应用：

  • 宝塔环境：本来是不想用宝塔来演示，但是发现不用宝塔，按我的介绍风格，文章会很长(･_･;
  • Git：用于本地Hexo和图床推送。
  • Nginx：用于Web服务器，即：发布Hexo打包的静态博客和作为图床

宝塔环境

刚刚我们已经成功SSH登录服务器，之后就是安装宝塔镜像：

安装宝塔镜像安装宝塔镜像
安装宝塔成功安装宝塔成功

之后，记得去服务器后台放行8888端口：

放行宝塔端口放行宝塔端口
进入面板进入面板

Git

服务器上直接使用软件包管理其安装：

代码语言：txt复制
# Debian
apt install git -y
# CentOS
yum install git -y

其实，刚刚用宝塔安装脚本安装过程中，会自动在服务器上安装Git环境。

安装Git成功安装Git成功

Nginx

Nginx可以说是一个优秀的高并发服务器。安装方法很多，参考我上篇文章：

  • 一篇文章、三种方法在Debian上轻松安装Nginx

因为使用宝塔面板，所以在安装好宝塔面板后，进入宝塔面板选择安装Nginx即可：

安装Nginx安装Nginx

创建网站

我们使用宝塔创建两个网站文件夹：

  • blog：用于存放Hexo打包的public文件（后续有由本地git push）
  • imageHost：用于存放图片（也就是我们的图床文件夹，后续也由本地push）

比如：

创建的文件夹（注意我的路径）创建的文件夹（注意我的路径）

使用宝塔的可视化Nginx，创建Nginx配置文件：

文件：，

设置文件夹权限：

文件夹权限文件夹权限

创建Git

我们本地Hexo打包为public静态资源，需要使用git的git push推送到服务器，由服务器的Nginx进行网站展示；图床也是一样的；所以，我们需要在服务器上配置Git，包括：

  • 创建Git用户
  • 创建Git仓库
  • 修改Git工作空间

创建Git用户

专门创建git用户，用于使用Git：

代码语言：txt复制
# 当前是root用户，创建git用户
useradd git
# 给创建的git用户设置密码
passwd git
创建git用户创建git用户

之后创建git用户的“家”：

代码语言：txt复制
# 用root用户给git用户建个家
mkdir /home/git
# 交房给git
chown git:git /home/git -R
git用户有家了git用户有家了

使用su - git切换到git用户，准备后续操作。

创建Git仓库

之后，我们切换到了git用户，创建blog的文件夹：

代码语言：txt复制
mkdir -p ~/mySource/myBlog
cd ~/mySource/myBlog
git init --bare
创建myBlog裸仓库创建myBlog裸仓库

用同样的方法，创建imageHost的文件夹：

代码语言：txt复制
mkdir -p ~/mySource/myImageHost
cd ~/mySource/myImageHost
git init --bare

如果小伙伴想知道什么事Git裸仓库，可以参考文章：Git init和Git init --bare的区别，以及Git init --bare如何创建工作空间

创建Git仓库

最后，以为创建的是裸仓库，没有工作空间。所以我们需要指向工作空间到上文创建的网站文件夹：

代码语言：txt复制
# 当前是git用户，创建receive钩子
vim ~/mySource/myBlog/hooks/post-receive

追加内容：

代码语言：txt复制
git --work-tree=/www/wwwroot/myHexo/blog --git-dir=/home/git/mySource/myBlog checkout -f

注意替换--work-tree和--git-dir地址为你的地址哦。

最后，添加执行权限：

代码语言：txt复制
chmod  x ~/mySource/myImageHost/hooks/post-receive
操作成功操作成功

同理，imageHost图床文件夹也一样：

代码语言：txt复制
vim ~/mySource/myImageHost/hooks/post-receive

追加内容：

代码语言：txt复制
git --work-tree=/www/wwwroot/myHexo/imageHost --git-dir=/home/git/mySource/myImageHost checkout -f

添加执行权限：

代码语言：txt复制
chmod  x ~/mySource/myImageHost/hooks/post-receive

到此，服务器上的操作，基本完成。接下来是本地操作。

部署Hexo

部署Hexo很简单，总的有三步：

  • 初始化Hexo
  • 运行Hexo
  • 打包推送到服务器

初始化Hexo

首先，确保本地已经安装Node.js：

安装了Nodejs安装了Nodejs

之后全局安装Hexo：

代码语言：txt复制
npm install -g hexo
macOS上操作macOS上操作
Windows上操作Windows上操作

之后，创建一个文件夹，并使用hexo init进行初始化：

初始化完成初始化完成

运行Hexo

运行Hexo很简单，只需要：

代码语言：txt复制
hexo s
启动成功启动成功

一些警告，主要是Node.js的版本问题，不过不影响啦。如果提示hexo s找不到，可以使用npm install hexo-server --save进行安装，再运行hexo s即可。

之后，我们使用浏览器即可访问我们的hexo：

hexohexo

具体的Hexo博客如何书写，这里不过多说（文章已经太长了:-)）

接下来，我们看看如何部署。

打包推送到服务器

最后，我们把Hexo打包并部署到服务器。

首先在hexo blog目录内安装推送插件：

代码语言：txt复制
npm install hexo-deployer-git --save
安装安装

打开hexo blog目录下的_config.yml文件，编辑（可以用记事本、Xcode、HBuilderX），deploy后，类型填git，然后补上其他内容：

补全内容补全内容

之后，进行public文件夹生成和推送：

代码语言：txt复制
hexo g -d
推送成功推送成功

查看文件夹：

推送成功推送成功

浏览器访问看看：

访问成功访问成功

部署图床

部署图床也很简单，总的有三步：

  • 创建本地图床仓库
  • 添加图片
  • 推送到服务器

创建本地图床仓库

创建的方法很简单，用过Git的用户应该都知道，就算没用过，看了下面的内容应该也懂。

代码语言：txt复制
# 创建一个空文件夹
mkdir imageHost
# 进入文件夹
cd imageHost
# git初始化
git init
# 设置远程仓库地址（记得将12*.***.*16替换为你的服务器）
git remote add origin git@12*.***.*16:/home/git/mySource/myImageHost
创建本地图床仓库成功创建本地图床仓库成功

添加图片

添加图片太简单了，打开文件夹，之后往里面丢图片即可：

添加的图片添加的图片

推送到服务器

最后，推送到服务器，也是基本的git操作：

代码语言：txt复制
# 添加本地所有文件
git add .
# 打一个commit
git commit -a -m "update"
# 提交到远程地址
git push --set-upstream origin main

当然，也就第一次需要git push --set-upstream origin main指定，后续直接git push就可以了：

推送成功推送成功

如果出现推送错误，出现remote: fatal: You are on a branch yet to be born问题，一般是远程仓库（服务器上的裸仓库）上的仓库不一样，解释起来挺麻烦，有机会单独出文章说，先说个最简单的方法，修改服务器上裸仓库的post-receive，添加：

添加分支添加分支

之后重新本地git pull即可：

本地pull成功本地pull成功

到宝塔看看服务器上的图片：

图片图片

Nginx反代

刚刚我们其实只创建了一个文件夹，但是创建了两个仓库。怎么融合在一起呢？方法很多，你可以用域名去解析两个网站文件夹。

但是如果你只有一个域名，可以使用Nginx反向代理图床文件夹为博客文件夹的子文件夹。

举个例子，我们博客根目录下的/imagehost文件夹，我想专门用于代理图床文件夹，只需要打开Nginx的设置，设置反向代理即可：

反向代理反向代理

之后，任何/imagehost开头的文件，就会被Nginx代理到/www/wwwroot/myHexo/imageHost文件夹下去查找。举个例子，比如我们想拿到0.jpg这张图片：

这图片这图片

只需要在博客域名下，加上/imagehost前缀即可访问：

访问成功访问成功

这样，在写博客的时候，就方便了。

最终效果

加上一点点的美化和一点点的文章输出，并且部署到Lighthouse就是我的博客啦：

最终效果最终效果

Q&A

这里对一些疑问进行解答。

如何备份网站

备份Hexo博客很简单，在Hexo文件夹内：

代码语言：shell复制
.
├── _config.fluid.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── scaffolds
├── source
└── themes

排除node_modules、public文件夹打包压缩即可。

在新的电脑上，解压并hexo g -d即可重新打包并部署到服务器。

备份图床就更简单了。实际上你只需要下载服务器上的图床文件夹即可。或者说打包本地的图床文件夹。因为这两个相当于是个同步盘。

后续会出对应视频

这个，暂时没有考虑出对于视频。主要是，我们主要出入门的视频，这些操作门槛有点高，因为就算搭建了hexo，后续的自定义优化，也需要一定的Web基础和Linux。准备先把基础资料出完。

还有就是，出视频太耗费精力……

为什么不部署在GitHub Page

都什么年代了？还部署在GitHub Page？

首先，国内体验很差，百度等平台不提供索引，如果是部署一个开发文档，那么还算可以；部署一个博客系统，用GitHub Page体验太差，还动不动域名DNS污染。

当下腾讯云轻量应用服务器价格便宜，推荐用Lighthouse搭建。但是目前有涨价趋势，建议尽早上车。

Lighthouse跑的动Hexo么

完全可以，Lighthouse就算使用最低配置的版本，也可以跑Hexo；毕竟只是静态的网站。

但是，我这里提醒一下：如果你想拿Lighthouse搭建Wordpress，建议使用2C 4G配置以上的版本；否则，建议数据库另外搭建。

END

到此，搭建流程就结束啦。如果有问题，欢迎评论区理性留言。

轻量应用服务器 linux nginx git hexo玩转Lighthouse Hexo搭建 图床方案 小白上云

0 人点赞