导读|很多开发者搭建自己的博客,会选择现有的博客系统方案,比如:Wordpress、Hexo和Halo等。其中Hexo博客作为全静态博客,没有数据库、对服务器资源消耗也极低,而且可定制化程度极高。本文将带领各位开发者基于Lighthouse轻量服务器快速搭建Hexo博客。

Hexo博客是一个基于Nodejs开发的一套博客系统。借助Hexo,开发者可以把自己的Hexo配置和Markdown文章,编译为HTML、JavaScript、CSS的存静态资源。exo对每片文章都有生成.html文件和真实DOM元素,而不是Vue在非预渲染和非SSR模式下的Hash或History路由模式。

举个例子,这是Hexo的配置文件:

.
├── _config.fluid.yml       # 主题配置文件
├── _config.yml             # Hexo配置文件
├── node_modules
├── package-lock.jso
├── package.json
├── scaffolds
├── source                   # 用户核心文件
└── themes                   # 主题文件

开发者使用Hexo命令,可以生成public文件夹。内部就是可以发布的静态文件了:

.
├── _config.fluid.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public                   # 我们Hexo构建的静态
├── scaffolds
├── source
└── themes

public内:

准备工具

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

本地:一台安装了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

CDN内容分发节点是可选配置,使用腾讯云CDN节点,可以轻易缓存Hexo和图床资源,加速用户上网体验,并且减缓Lighthouse带宽压力。值得注意的是,使用腾讯云CDN需要备案域名。

Lighthouse部分,各位开发者请自行前往官网购置。

服务器,均指任意一台Lighthouse服务器,配置水平也没有指定要求。服务器系统建议选择Linux服务器,我选择的是Debian10。

服务器初始化

首先,各位开发者要进行服务器的初始化(点击文末阅读原文,查看教程)。我们在本地SSH连接了服务器:

环境准备

之后,我们给服务器安装依赖和应用:

1)宝塔环境

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

之后,记得去服务器后台放行8888端口:

2)Git:用于本地Hexo和图床推送

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

# Debian
apt install git -y
# CentOS
yum install git -y

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

3)Nginx:用于Web服务器,即发布Hexo打包的静态博客和作为图床。

Nginx可以说是一个优秀的高并发服务器。因为使用宝塔面板,所以在安装好宝塔面板后,进入宝塔面板选择安装Nginx即可:

创建网站

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

blog:用于存放Hexo打包的public文件(后续有由本地git push)

imageHost:用于存放图片(也就是我们的图床文件夹,后续也由本地push)比如:

使用宝塔的可视化Nginx,创建Nginx配置文件。设置文件夹权限:

创建Git

我们本地Hexo打包为public静态资源,需要使用git的git push推送到服务器,由服务器的Nginx进行网站展示。图床同理。我们需要在服务器上配置Git,包括:创建Git用户、创建Git仓库、修改Git工作空间。

1)创建Git用户

专门创建git用户,用于使用Git:
# 当前是root用户,创建git用户
useradd git
# 给创建的git用户设置密码
passwd git

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

# 用root用户给git用户建个家
mkdir /home/git
# 交房给git
chown git:git /home/git -R

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

2)创建Git仓库

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

mkdir -p ~/mySource/myBlog
cd ~/mySource/myBlog
git init --bare

用同样的方法,创建imageHost的文件夹:

mkdir -p ~/mySource/myImageHost
cd ~/mySource/myImageHost
git init --bare

3)创建Git仓库

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

# 当前是git用户,创建receive钩子
vim ~/mySource/myBlog/hooks/post-receive

追加内容如下,注意替换--work-tree和--git-dir地址为你的地址:

git --work-tree=/www/wwwroot/myHexo/blog --git-dir=/home/git/mySource/myBlog checkout -f

最后,添加执行权限:

chmod +x ~/mySource/myImageHost/hooks/post-receive

同理,imageHost图床文件夹也一样:

vim ~/mySource/myImageHost/hooks/post-receive

追加内容:

git --work-tree=/www/wwwroot/myHexo/imageHost --git-dir=/home/git/mySource/myImageHost checkout -f

添加执行权限:

chmod +x ~/mySource/myImageHost/hooks/post-receive

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

部署Hexo

部署Hexo很简单,总的有三步:初始化Hexo、运行Hexo、打包推送到服务器。

1)初始化Hexo

首先,确保本地已经安装Node.js:

之后全局安装Hexo:

npm install -g hexo

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

2)运行Hexo

运行Hexo很简单,只需要:

hexo s

你可能会收到Node.js的版本问题警告,不过影响不大。如果提示hexo s找不到,可以使用npm install hexo-server --save进行安装,再运行hexo s即可。

之后,我们使用浏览器即可访问我们的hexo:

具体的Hexo博客如何书写,这里不过多说。接下来,我们看看如何部署。

3)打包推送到服务器

我们把Hexo打包并部署到服务器。首先在hexo blog目录内安装推送插件:

npm install hexo-deployer-git --save

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

之后,进行public文件夹生成和推送:

hexo g -d

查看文件夹:

浏览器访问看看:

部署图床

部署图床也很简单,总的有三步:创建本地图床仓库、添加图片、推送到服务器。

1)创建本地图床仓库

创建的方法很简单,用过Git的用户应该都比较熟悉。如果你没用过,看了下面的内容也可以轻易理解。

# 创建一个空文件夹mkdir imageHost# 进入文件夹cd imageHost# git初始化git init# 设置远程仓库地址(记得将12*.***.*16替换为你的服务器)git remote add origin git@12*.***.*16:/home/git/mySource/myImageHost

2)添加图片

打开文件夹,之后往里面丢图片即可:

3)推送到服务器

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

# 添加本地所有文件
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即可:

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

Nginx反代

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

但是如果你只有一个域名,可以使用Nginx反向代理图床文件夹为博客文件夹的子文件夹。举个例子,我们博客根目录下的/imagehost文件夹,我想专门用于代理图床文件夹,只需要打开Nginx的设置,设置反向代理即可:

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

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

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

最终效果:加上一点点的美化和一点点的文章输出,并且部署到Lighthouse就是我的博客:

Q&A

1)如何备份网站

备份Hexo博客很简单,在Hexo文件夹内:

.
├── _config.fluid.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── scaffolds
├── source
└── themes

排除node_modules、public文件夹打包压缩即可。在新的电脑上,解压并hexo g -d即可重新打包并部署到服务器。备份图床就更简单了。实际上你只需要下载服务器上的图床文件夹即可。或者说打包本地的图床文件夹。因为这两个相当于是个同步盘。

2)Lighthouse跑的动Hexo么

完全可以,Lighthouse就算使用最低配置的版本,也可以跑Hexo。但是,如果你想拿Lighthouse搭建Wordpress,建议使用2C 4G配置以上的版本;否则建议数据库另外搭建。

希望本文对你有帮助~

腾讯工程师技术干货直达:

1、如何不改一行代码,让Hippy启动速度提升50%?

2、内存泄露?腾讯工程师2个压箱底的方法和工具

3、一文读懂Go函数调用

4、万字避坑指南!C++的缺陷与思考(下)

点个 在看展示你的技术态度

手把手教你搭建Hexo博客相关推荐

  1. 手把手教您安装WordPress博客系统初装篇

    WordPress安装初衷: 今天受朋友所托付,负责帮忙搞一个周易八字预测网,域名是(www.zy8z.com) 域名注册好一段时间了,也备案通过了,就差程序了,跟朋友小聊天一会儿,感觉也就是弄一个简 ...

  2. 史上最详细“截图”搭建Hexo博客——For Windows

    http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...

  3. 手把手带你搭建个人博客系统(一)

    ⭐️前言⭐️ 该web开发系统涉及到的知识: Java基础 MySQL数据库 JDBC技术 前端三件套(HTML+CSS+JavaScript) Servlet 使用到的开发工具: idea vsco ...

  4. python公众号留言功能_搭建hexo博客给公众号制作留言功能

    大家都知道,18年3月份后注册的公众号都不给留言功能了,作为主要以技术文章为主的公众号,没有留言功能真是不方便.周末这两天我就一直在折腾这个留言功能,借助博客的留言功能,放在阅读原文里.昨天晚上终于折 ...

  5. 搭建hexo博客历程二- Gitee版 (主要 解决404和样式丢失)

    前期的GitHub版搭建hexo博客 前期的node .hexo等等都已经配置完成,只需要在Gitee上建库,以及修改一些配置.继续依葫芦画瓢,在Gitee上画出来.例如 https://gitee. ...

  6. 阿里云Serverless 极速搭建Hexo博客

    阿里云Serverless 极速搭建Hexo博客 阿里云Serverless 极速搭建Hexo博客 地址 开通函数计算服务 安装Serverless Devs命令行工具 安装Node.js环境. 解压 ...

  7. 搭建hexo博客给公众号制作留言功能

    此文首发于公众号 「Python知识圈」,欢迎直接去公众号观看. 阅读文本大概需要 5 分钟. 大家都知道,今年注册的公号都不给留言功能了,作为主要以技术文章为主的公众号,没有留言功能真是不方便.上周 ...

  8. 腾讯云搭建hexo博客

    title: 腾讯云搭建hexo博客 tags: hexo,腾讯云 文章目录 title: 腾讯云搭建hexo博客 tags: hexo,腾讯云 @[toc] 1. 腾讯云 学生认证购买 重置密码和网 ...

  9. hexo+git+github+域名搭建个人博客提示404_不用花一分线,松哥手把手教你上线个人博客...

    有不少小伙伴私信松哥,打听松哥的博客是怎么做的,其实这个我之前和大家聊过,今天就再来说一说. 我记得是 2015 年 4 月 15 在CSDN上发表了我的第一篇博客,是一个学习笔记,从那之后开启了我博 ...

  10. 使用 Debian 从 0 开始搭建 hexo 博客

    Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. Hexo 产生的静态文件只要放到任何支持 html ...

最新文章

  1. linux释放内存命令
  2. KickStart 无人值守安装系统
  3. 春节添彩 福州花卉市场现“买花潮”
  4. nordic 协议栈区别
  5. 10、游标(Cursor)的定义及使用
  6. 算法题目——多米诺骨牌问题(POJ-2663)
  7. 郑大计算机组成与维护在线测试,郑大远程教育《计算机组成原理》第08章在线测试...
  8. 项目安装使用uuid_在uniapp中使用fingerprint2实现游客设备标识
  9. Delphi 2009 之 TStringBuilder 类[1]: Create
  10. JVM垃圾回收算法标记清除和复制算法
  11. Lua中local变量和非local变量的区别
  12. 如何使用python将二维数组去重呢?
  13. IIS6.0PUT漏洞复现
  14. linux 查看大文件,Linux上查找最大文件的 3 种方法
  15. ad模数转换采集电压程序c语言,单片机怎么通过AD转换得到电压值
  16. pla3d打印材料密度_3D打印材料:透明PLA材料
  17. CAD交互绘制虚线(网页版)
  18. 慕测安居客功能测试答案
  19. 我的世界服务器皮肤显示mod,【回归了】McMySkin Mod - Minecraft单机联机皮肤显示Mod...
  20. 通过css设置canvas背景图片

热门文章

  1. ElasticSearch常用搜索关键字整理
  2. Inception模块 GooLeNet网络
  3. 自建nod32更新服务器,ESET NOD32 官方升级服务器地址
  4. 《python初级爬虫》(一)
  5. 页面视觉稳定性之优化CLS
  6. 张家界自助游(攻略)介绍!
  7. UNIX 环境高级编程读书笔记(1)
  8. 启发式搜索算法 - 以A*为中心来说明启发式算法本质是要找有效的heuristic需要满足的性质
  9. 小牛叔讲Python第1章: 编程界的瑞士军刀Python
  10. 为什么要ROS2而不是对ROS1修修补补?