手把手教你搭建Hexo博客

news2024/12/24 3:15:18

d47f1f1c504b4ebf7ecb0ce323f50c1b.gif

导读|很多开发者搭建自己的博客,会选择现有的博客系统方案,比如: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内:

ca261bf3443a512f36e1ad5f8912b47d.png

148fdf4ea38e847c6c228982b84e58f0.jpeg

准备工具

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

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

8b288c515c3ea46205c221f3bf024834.png

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

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

9ea69b895969dc238a33e1eb658000b5.png

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

b7a68aa8708373cab31ed75e4373b770.png

12887b5109fc3ed04fa4eab717b48140.jpeg

服务器初始化

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

d13bc2497947c23886883692dec7ce08.png


5c95bf04c7d5200ba794c4141b2ed254.jpeg环境准备

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

1)宝塔环境

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

332f9ade2d30d2ac3c9d0615a09512c6.png

434ae7a66c4293937886ab8125ea41e0.png

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

19d0087f44b5abee2a497a8cf32f6d78.png

4251fafaa422ea3c4fb95d30bb1e55ff.png

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

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


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

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

d7682c037d044f886b5160a940cdd563.png

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

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

544ae3dda90242a5452fc9c42eae652d.png

61dbdb3c5b6d59a4d2e9f1d61fb94ed5.jpeg

创建网站

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

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

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

6d3de9336d59c5e614098814a2d6f0db.png

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

96a03b5cebe3a8c3c9fcea9b8834152b.png

473c2518dd28bcd5ebdce36813a41a53.jpeg

创建Git

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

1)创建Git用户

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

2e02dfb3d18ad77138219feabcd7b4bf.png

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


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

a942320684cd38c5106104039070b35f.png

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

2)创建Git仓库

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


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

019c84937921bde295e57db6bb8997db.png

用同样的方法,创建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

5662747dfbbbc199d40582a841e9ed99.png

同理,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

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

8cc9ed7a8bcf6fa30fcab94777f65300.jpeg

部署Hexo

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

1)初始化Hexo

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

a44bbe733786bff59616d1fe0b60067d.png

之后全局安装Hexo:


 
npm install -g hexo

670f5c82efd9f349e3cbfc4ef886ea14.png

0b0e4b0c38013a89b008c446131b2338.png

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

386b74f04a0fee38e5f08c8fea1474ca.png

2)运行Hexo

运行Hexo很简单,只需要:


 
hexo s

198d9ae07d56bc8ff4518190becaf3fb.png

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

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

164c0a7098502247d6fef399b2cbfa6a.png

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

3)打包推送到服务器

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


 
npm install hexo-deployer-git --save

ee0883d5d2b282d57d305bb7e5fe4415.png

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

cc16d73d15a68bf8a9905276dd6a2a78.png

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


 
hexo g -d

142e8a6bd3bceb65e172b4e10667db38.png

查看文件夹:

f9375a106c3402554eca06e8bb94cae3.png

浏览器访问看看:

b638895efeb008eb0e6d8ce16ba593c3.png

a8feb4d19ac04ab19a93695da7c01cdb.jpeg

部署图床

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

1)创建本地图床仓库

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


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

10698ea9a942f2f0bcd7b5c2144428c2.png

2)添加图片

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

c69cd2d6517924ce5101e15529b5c979.png

3)推送到服务器

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


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

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

dcf4e13db8ece30811ebb054a2f08a6e.png

如果出现推送错误,出现remote: fatal: You are on a branch yet to be born问题,一般是远程仓库(服务器上的裸仓库)上的仓库不一样。有个个最简单的方法,修改服务器上裸仓库的post-receive,添加:

ffc1378e13dd56be77b23dca1707e9d5.png

之后重新本地git pull即可:

9395b6f7a39c617fe462cfab080fdf5b.png

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

0b77eb8ebc83d1d8a220168f7b4178ba.png


a7ea301afab50ec2b98262bc44e36857.jpegNginx反代

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

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

c54684c9e1521892e8ad73ca93f51c54.png

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

8ad5013ea08d171b610fd0f1c1b9e844.png

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

439eb1dc570fa8bb40b389eba144150a.png

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

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

a73c69ee3c28cdcabf26c95c191ffc0e.png

59513ceeac29f26446cd04fbcd7763c1.png

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++的缺陷与思考(下)

cee78b43b508b618a1b879262e62abeb.png

41a6329cfa4ca2c6dd95ea6c35ae342b.png

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/113752.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】编译的四个步骤

目录 平常的使用: 安装软件 编写:vi/vim vscode 编译 执行 路径/文件名 计算机五大部件 编译四步 1.预编译(处理#) 2.编译(查错,代码到汇编) 3.汇编(汇编到二进制指令) 4.链接 平常的…

157. 答读者疑问:为什么我的 manifest.json 文件无法正确被加载?

有教程的读者向我提问:已经完成了下列两个步骤的学习: SAP UI5 应用开发教程之十 - 什么是 SAP UI5 应用的描述符 DescriptorSAP UI5 应用开发教程之一百三十三 - SAP UI5 应用元数据文件 manifest.json 的加载和解析原理讲解自己本地 Visual Studio Code 开发了一个 SAP UI5…

SpringBoot+Mybatis-Plus+Thymeleaf+Bootstrap分页查询(前后端完整版开源学习)图书管理系统

目录分页主要逻辑,在3.7和3.81.准备工作1.1 参考博客1.2 项目结构2. 数据库3. 详细代码部分3.1 pom依赖3.2 application.yml3.3 BookMapper.xml3.4 BookMapper3.5 BookService 和 BookServiceImpl3.6 实体类entity book3.7控制层 BookController3.8 前端页面bookLis…

猿如意使用测评

本篇博客会记录使用猿如意这款产品的整体使用感受和相关建议,可以作为新人上手这款产品的参考 1. 猿如意的官方介绍 首先是官方对这款产品的介绍 猿如意是一款面向开发者的辅助开发工具箱,包含了效率工具、开发工具下载,教程文档&#xff0…

4.7 深入理解Spring

4.7.1 Spring 4.7.1.1 Spring模块 Spring 由七大模块组成,分别是 数据模块(Data Access / Integration)Web模块切面模块(Aop,Aspects)工具模块(Instrumentation)消息模块核心模块测试模块Spring模块4.7.…

08-09-Zookeeper客户端使用与经典应用场景

Zookeeper 集群模式: Zookeeper 集群模式一共有三种类型的角色 Leader: 处理所有的事务请求(写请求),可以处理读请求,集群中只能有一个Leader Follower:只能处理读请求,同时作为 Leader的候选节…

实现 effect reactive 依赖收集 触发依赖

03_01_实现 effect & reactive & 依赖收集 & 触发依赖 一、reactivity happy path 首先我们知道reactivity的happy path(核心逻辑)就是: 通过reactive定义响应式变量,然后通过effect去收集响应式变量的依赖,然后实现…

20221225英语学习

今日新词 giant adj.巨大的;超群的 appreciate v.欣赏,赏识;感激;理解,意识到;增值 invasive adj.侵入的,侵略的;开刀的 dispel vt.驱散,驱逐;消除 equa…

【2008NOIP普及组】T4. 立体图 试题解析

【2008NOIP普及组】T4. 立体图 试题解析 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 778 通过数: 542 【题目描述】 小渊是个聪明的孩子,他经常会给周围的小朋友讲些自己认为有趣的内容。最近,他准备给小朋友讲解立体图,请你帮他画出立体图。 小渊有一块面…

Windows下安装RabbitMQ

目录 安装Erlang环境 下载地址:https://erlang.org/download/ 下载后直接双击.exe安装即可。 安装完成后,创建环境变量。 安装完成后创建一个名叫ERLANG_HOME的环境变量,其指向erlang的安装目录; 将%ERLANG_HOME%\bin加入到Pa…

node.js+uni计算机毕设项目基于微信小程序订餐系统(程序+小程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置: Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分离等…

2022 IoTDB Summit:Dr.Feinauer《Apache IoTDB 在德国汽车生产线多级数据同步中的应用实践》...

12 月 3 日、4日,2022 Apache IoTDB 物联网生态大会在线上圆满落幕。大会上发布 Apache IoTDB 的分布式 1.0 版本,并分享 Apache IoTDB 实现的数据管理技术与物联网场景实践案例,深入探讨了 Apache IoTDB 与物联网企业如何共建活跃生态&#…

【金猿人物展】树根互联COO黄路川:从“灯塔工厂”到“数字领航”,工业互联网操作系统助推新型工业化...

‍黄路川本文由树根互联联合创始人、COO黄路川撰写并投递参与“数据猿年度金猿策划活动——2022大数据产业趋势人物榜单及奖项”评选。‍数据智能产业创新服务媒体——聚焦数智 改变商业大数据时代,数字资产已经成为工业企业最核心的资产,成为企业数字化…

并发知识体系大全:贡献一波我平时学习/总结笔记/思维脑图+线程

这个世界都是并发的,编程里更是这样,俗话说:并发知识大,一口吃不下。想成为一名优秀的 Java 开发,学好并发,绝对是你走入高薪行列的必备能力之一。 并发涉及的知识点,其实十分琐碎。学完记不住…

2022圣诞代码(圣诞树+圣诞老人)

文章目录前言使用方法圣诞树圣诞老人前言 圣诞节里的喜悦,飘扬万里;圣诞树上的星星,璀璨耀眼;圣诞星空绽放的烟花,迎来吉祥;圣诞钟声奏响的旋律,传递欢乐;圣诞老人送给你的礼物&…

数据结构---位图算法

位图算法将数据存储到位图中查询数据是否在位图中JAVA代码问题扩展这里所说的位图并不是像素图片的位图&#xff0c;而是内存中连续的二进制位&#xff08;bit&#xff09;所组成的数据结构&#xff0c; 该算法主要用于对大量整数做去重和查询操作。System.out.println(1L <…

地质灾害安全监测预警解决方案

一、方案背景 我国地质和地理环境复杂&#xff0c;气候条件时空差异大&#xff0c;地质灾害种类多、分布广、危害大&#xff0c;是世界上地质灾害最严重的国家之一。地质灾害来源于自然和人为作用下对地质环境的灾难性后果&#xff0c;主要包括崩塌、滑坡、泥石流、地面塌陷和…

RV1126笔记十六:吸烟行为检测及部署<三>

若该文为原创文章,转载请注明原文出处。 训练并测试(windows) 一、yolov5安装 1、下载rk优化后的yolov5 git clone https://github.com/airockchip/yolov5.git 下载后,我是放到E:\miniconda3\envs目录下,miniconda3是安装miniconda的目录。可以放到其他地方,后续操作需要…

语音处理的算法和方法研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Python pandas库|任凭弱水三千,我只取一瓢饮(7)

上一篇链接&#xff1a; Python pandas库&#xff5c;任凭弱水三千&#xff0c;我只取一瓢饮&#xff08;6&#xff09;_Hann Yang的博客-CSDN博客 to_系列函数&#xff1a;22个 &#xff08;12~22&#xff09; Function12 to_numpy(self, dtype: NpDtype | None None, co…