基于Hexo实现一个静态的博客网站

news2025/2/8 10:37:49

原文首发：https://blog.liuzijian.com/post/8iu7g5e3r6y.html

目录

    • 引言
    • 1.初始化Hexo
    • 2.整合主题Fluid
    • 3.部署评论系统Waline
    • 4.采用Nginx部署

引言

Hexo是中国台湾开发者Charlie在2012年创建的一个开源项目，旨在提供一个简单、快速且易于扩展的静态博客生成器。

Hexo的设计理念是轻量级、易用和支持插件扩展，因此它非常适合那些有技术背景的用户，尤其是喜欢使用Markdown和Git进行内容管理的开发者。Hexo使用Node.js构建，并且支持通过主题和插件来扩展功能。

1.初始化Hexo

Hexo基于Node.js，所以首先要安装Node和Npm

1.全局安装hexo

npm install hexo -g

2.生成hexo项目

安装完成后，选择一个目录，执行以下命令，生成一个hexo脚手架

hexo init myblog

然后生成脚手架结构如下

myblog/
 ├── node_modules
 ├── scaffolds
 │── scripts   
 ├── source/
 │    ├── _posts
 │    └── _drafts
 ├── themes
 ├── _config.landscape.yml
 ├── _config.yml
 └── package.json

文件目录解释

  • node_modules不解释
  • scaffolds 存放博客内容模板的地方
  • source 资源文件夹，下面用来放建站需要的各种资源，包括markdown格式的博客原稿，图片，css，js，robots.txt等等
  • source/_posts 博客的"源码"，里面放我们写作的markdown文件，会被hexo引擎按照一定规则转换成html页面
  • source/_drafts 草稿，不适合放在_posts里面打包发布的草稿就放在这里
  • themes 存放第三方主题
  • _config.yml hexo配置文件
  • _config.landscape.yml 默认主题landscape的配置文件
  • package.json不解释

提前剧透：hexo使用过程中，还会经常用到两个文件夹

  • scripts hexo自定义脚本，在构建过程中执行，用于扩展hexo的功能或实现一些特殊需求
  • public 构建生成的静态网站，可以直接使用nginx root反代访问

3.启动预览

修改_config.yml配置文件

# Site
title: '我的博客'
subtitle: '我的技术博客'
description: '分享一些实用的东西'

author: 'liuzijian'
language: zh-CN
timezone: 'Asia/Shanghai'

然后，运行package.json里面的目标npm run server

直到输出提示Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.以后，访问http://127.0.0.1:4000进行预览，浏览器出现这个界面说明启动成功

image

4.构建打包

运行npm run build后，根目录就会生成一个public文件夹，就是构建成的静态网站，上传到服务器并使用nginx代理，访问/index.html即可打开博客首页。

除了部署到自己的服务器，还可以通过Vercel，GitHub Pages等进行部署。

2.整合主题Fluid

hexo默认自带一个叫landscape的主题，根目录下的_config.landscape.yml就是它的配置文件，landscape比较简陋，也不美观，所以很多人选择美观且功能强大的第三方主题，在这里，我使用主题fluid来建站。

集成第三方主题到hexo中非常简单，只需要将主题解压放在theme文件夹，复制主题的配置文件到根目录下，然后到hexo配置文件内切换主题即可。

1.下载主题fluid

项目首页和文档地址: https://hexo.fluid-dev.com/

下载地址: https://github.com/fluid-dev/hexo-theme-fluid/releases

找到最新的1.9.8版本下载连接

https://github.com/fluid-dev/hexo-theme-fluid/archive/refs/tags/v1.9.8.zip

2.集成主题

将压缩包下载下来，解压，压缩包内文件夹名字叫hexo-theme-fluid-1.9.8，这个就是主题，不过要把解压后的hexo-theme-fluid-1.9.8文件夹重命名为fluid，紧接着要再将fluid文件夹里面的_config.yml文件复制一个副本，将副本重命名为_config.fluid.yml，再将_config.fluid.yml剪切到hexo项目根目录下和hexo脚手架自带的的_config.yml文件放在一起，接下来还要再把整个fluid文件夹拷贝到根目录下的themes文件夹内。

注意: 主题文件夹内的_config.yml一定要创建副本，而不是直接改名，副本_config.fluid.yml剪切走后，原有的_config.yml文件必须原样保留！ hexo-theme-fluid-1.9.8文件夹下的_config.yml是主题的配置，与脚手架生成在根目录的hexo配置文件_config.yml是不同的，重命名后的主题配置文件_config.fluid.yml和hexo脚手架自带的配置文件_config.yml放在一起共同作为hexo的配置文件，其他的第三方主题基本也遵循这个方式。关于配置文件的更多解释可以参考Hexo官方文档以及主题的官方文档。

myblog/
    ├── ... ...
    ├── themes
    │     └── fluid
    ├── _config.fluid.yml
    ├── _config.yml
    └── ... ...

实际上和根目录下脚手架自带的_config.landscape.yml文件是一样的道理，现在换成了别的主题，_config.landscape.yml也就没用了，可以直接删除

要想主题生效，还需要在配置文件进行指定，修改_config.yml，找到以下配置

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

修改为以下，然后保存

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid

再次启动npm run server，浏览器预览博客的效果已经变为主题的风格，即为集成主题成功

image

主题更多玩法，在主题的官网都有文档说明，主题配置文件_config.fluid.yml内也有详细注释，这里不再详细一一介绍，集成其他主题的方式方法同理。

3.部署评论系统Waline

评论系统一般由主题提供支持，支持的评论系统有许许多多，这里我使用的是Waline，并且采用Docker独立部署Waline

Waline的使用部署等可参考官网，其官网地址为: https://waline.js.org/，源码位于GitHub: https://github.com/walinejs/waline.git

1.构建镜像

先用git clone将源码下载到本地，然后进入对应目录，构建镜像。

docker build -t lizheming/waline -f packages/server/Dockerfile .

2.启动Waline服务

使用参数启动镜像，参数根据Waline指定的服务端运行参数而来，常见参数有:

  • OAUTH_URL 变量是因为oauth服务也是我自己私有部署的，如果使用waline公共的则不用这个变量
  • IPQPS IP评论频次限制
  • MYSQL_DB 数据库名，使用MySQL部署，需要提前导入数据库脚本，详情查阅waline官网文档
  • MYSQL_USER 不解释
  • MYSQL_PASSWORD 不解释
  • MYSQL_PORT 不解释
  • SERVER_URL 访问waline系统时的地址前缀，因为docker部署由nginx反代，建议设置为反代后的地址
  • COMMENT_AUDIT 评论审核，布尔值
  • SITE_NAME 邮件中展示的网站名
  • SITE_URL 邮件中展示的网站地址
  • AUTHOR_EMAIL 发送者邮件地址
  • SMTP_PASS 邮件服务密码
  • SMTP_USER 邮件用户名
  • SMTP_SERVICE 邮件提供商，具体列表可见官方文档

启动命令示例：

docker run -d \
-e OAUTH_URL=https://oauth.liuzijian.com \
-e IPQPS=10 \
-e MYSQL_DB=waline \
-e MYSQL_USER=****** \
-e MYSQL_PASSWORD=********** \
-e MYSQL_PORT=3306 \
-e SERVER_URL=https://waline.liuzijian.com \
-e COMMENT_AUDIT=true \
-e SITE_NAME="Liu Zijian's Blog"  \
-e SITE_URL=https://blog.liuzijian.com  \
-e SMTP_PASS=****************  \
-e AUTHOR_EMAIL=****@foxmail.com  \
-e SMTP_USER=******@foxmail.com  \
-e SMTP_SERVICE=QQ  \
-p 8360:8360 \
--network=host \
lizheming/waline

怎样在fluid主题上使用waline评论，主题文档有说明，不再赘述。

4.采用Nginx部署

页面和评论插件都可以通过nginx根据不同域名进行反代访问，同时https证书也是集成在nginx上的。

主要配置如下：


server {
    listen       80;
    listen       [::]:80;
    server_name  *.liuzijian.com;
    return 301 https://$host$request_uri;
}


## 静态页面
server {
    listen 443 ssl;
    server_name blog.liuzijian.com ;

    # SSL 证书路径，按照实际情况填写
    ssl_certificate /xxxxx/domain.cert;
    ssl_certificate_key /xxxxxx/domain.key;

    # 推荐的 SSL 配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        try_files $uri $uri/ $uri.html   =404;
        root /opt/blog/public;
    }

    error_page 404 /404.html;

}


## 评论插件
server {
    listen 443 ssl;
    server_name    waline.liuzijian.com;

    # SSL 证书路径，按照实际情况填写
    ssl_certificate /xxxxx/domain.cert;
    ssl_certificate_key /xxxxxx/domain.key;

    # 推荐的 SSL 配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://127.0.0.1:8360;
    }
}    

## 自动部署hook，选用
server {
    listen 443 ssl;
    server_name hook.liuzijian.com;

    # SSL 证书路径，按照实际情况填写
    ssl_certificate /xxxxx/domain.cert;
    ssl_certificate_key /xxxxxx/domain.key;

    # 推荐的 SSL 配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # 代理到其他端口
    location / {
        proxy_pass http://127.0.0.1:5000;
    }
}

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

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

相关文章

DeepSeek-R1 云环境搭建部署流程

DeepSeek-R1 云环境搭建部署流程

DeepSeek横空出世，在国际AI圈备受关注，作为个人开发者，AI的应用可以有效地提高个人开发效率。除此之外，DeepSeek的思考过程、思考能力是开放的，这对我们对结果调优有很好的帮助效果。 DeepSeek是一个基于人工智能技术…
阅读更多...
LabVIEW铅酸蓄电池测试系统

LabVIEW铅酸蓄电池测试系统

本文介绍了基于LabVIEW的通用飞机铅酸蓄电池测试系统的设计与实现。系统通过模块化设计，利用多点传感器采集与高效的数据处理技术，显著提高了蓄电池测试的准确性和效率。 ​ 项目背景 随着通用航空的快速发展，对飞机铅酸蓄电池的测试需求也…
阅读更多...
ARM嵌入式学习--第十三天（I2C）

ARM嵌入式学习--第十三天（I2C）

I2C --介绍 I2C（Inter-intergrated Circuit 集成电路）总线是Philips公司在八十年代初推出的一种串行、半双工的总线，主要用于近距离、低速的芯片之间的通信；I2C总线有俩根双向的信号线，一根数据线SDA用于收发数据&…
阅读更多...
使用PyCharm进行Django项目开发环境搭建

使用PyCharm进行Django项目开发环境搭建

如果在PyCharm中创建Django项目 1. 打开PyCharm，选择新建项目 2.左侧选择Django，并设置项目名称 3.查看项目解释器初始配置 4.新建应用程序 执行以下操作之一： 转到工具| 运行manage.py任务或按CtrlAltR 在打开的manage.pystartapp控制台…
阅读更多...
移动机器人规划控制入门与实践：基于navigation2 学习笔记（一）

移动机器人规划控制入门与实践：基于navigation2 学习笔记（一）

课程实践： （1）手写A*代码并且调试，总结优缺点 （2）基于Gazebo仿真，完成给定机器人在给定地图中的导航调试 （3）使用Groot设计自己的导航行为树 掌握一门技术 规划控制概述 常见移动机器人
阅读更多...
TCP服务器与客户端搭建

TCP服务器与客户端搭建

一、思维导图 二、给代码添加链表 【server.c】 #include <stdio.h> #include <sys/socket.h> #include <sys/types.h> #include <fcntl.h> #include <arpa/inet.h> #include <unistd.h> #include <stdlib.h> #include <string.…
阅读更多...
【大数据技术】本机DataGrip远程连接虚拟机MySQL/Hive

【大数据技术】本机DataGrip远程连接虚拟机MySQL/Hive

本机DataGrip远程连接虚拟机MySQL/Hive datagrip-2024.3.4VMware Workstation Pro 16CentOS-Stream-10-latest-x86_64-dvd1.iso写在前面 本文主要介绍如何使用本机的DataGrip连接虚拟机的MySQL数据库和Hive数据库，提高编程效率。 安装DataGrip 请按照以下步骤安装DataGrip软…
阅读更多...
【C++篇】C++11新特性总结1

【C++篇】C++11新特性总结1

目录 1&#xff0c;C11的发展历史 2&#xff0c;列表初始化 2.1C98传统的{} 2.2&#xff0c;C11中的{} 2.3&#xff0c;C11中的std::initializer_list 3&#xff0c;右值引用和移动语义 3.1&#xff0c;左值和右值 3.2&#xff0c;左值引用和右值引用 3.3&#xff0c;…
阅读更多...
redis之RDB持久化过程

redis之RDB持久化过程

redis的rdb持久化过程 流程图就想表达两点&#xff1a; 1.主进程会fork一个子进程&#xff0c;子进程共享主进程内存数据(fork其实是复制页表)&#xff0c;子进程读取数据并写到新的rdb文件&#xff0c;最后替换旧的rdb文件。 2.在持久化过程中主进程接收到用户写操作&#x…
阅读更多...
操作系统—进程与线程

操作系统—进程与线程

补充知识 PSW程序状态字寄存器PC程序计数器&#xff1a;存放下一条指令的地址IR指令寄存器&#xff1a;存放当前正在执行的指令通用寄存器&#xff1a;存放其他一些必要信息 进程 进程&#xff1a;进程是进程实体的运行过程&#xff0c;是系统进行资源分配和调度的一个独立单位…
阅读更多...
CV(11)-图像分割

CV(11)-图像分割

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 图像分割 语义分割不需要区分具体的个体&#xff0c;实例分割需要 反卷积/转置卷积&#xff1a; 它并不是正向卷积的完全逆过程。反卷积是一种特殊的正向卷积&#xff0c;先按照一定的比例通过补0 来扩大输入图像的尺寸&…
阅读更多...
【STM32系列】利用MATLAB配合ARM-DSP库设计FIR数字滤波器（保姆级教程）

【STM32系列】利用MATLAB配合ARM-DSP库设计FIR数字滤波器（保姆级教程）

ps.源码放在最后面 设计IIR数字滤波器可以看这里&#xff1a;利用MATLAB配合ARM-DSP库设计IIR数字滤波器&#xff08;保姆级教程&#xff09; 前言 本篇文章将介绍如何利用MATLAB与STM32的ARM-DSP库相结合&#xff0c;简明易懂地实现FIR低通滤波器的设计与应用。文章重点不在…
阅读更多...
STM32上部署AI的两个实用软件——Nanoedge AI Studio和STM32Cube AI

STM32上部署AI的两个实用软件——Nanoedge AI Studio和STM32Cube AI

1 引言 STM32 微控制器在嵌入式领域应用广泛&#xff0c;因为它性能不错、功耗低&#xff0c;还有丰富的外设&#xff0c;像工业控制、智能家居、物联网这些场景都能看到它的身影。与此同时&#xff0c;人工智能技术发展迅速&#xff0c;也逐渐融入各个行业。 把 AI 部署到 STM…
阅读更多...
qt+gstreamer快速创建一个流媒体播放器

qt+gstreamer快速创建一个流媒体播放器

目录 1 前言 2 playbin3 3 videooverlay 4 关键代码 5 运行示例 1 前言 最近因为工作需求&#xff0c;要实现一个桌面流媒体播放器来支持常见的流媒体协议&#xff0c;经过调研发现使用gstreamer配合一些桌面级的gui应用开发工具如qt可以进行快速实现&#xff0c;在此进…
阅读更多...
DeepSeek V2报告阅读

DeepSeek V2报告阅读

概况 MoE架构&#xff0c;236B参数&#xff0c;每个token激活参数21B&#xff0c;支持128K上下文。采用了包括多头潜在注意力&#xff08;MLA&#xff09;和DeepSeekMoE在内的创新架构。MLA通过将KV缓存显著压缩成潜在向量来保证高效的推理&#xff0c;而DeepSeekMoE通过稀疏计…
阅读更多...
零基础Vue入门6——Vue router

零基础Vue入门6——Vue router

本节重点&#xff1a; 路由定义路由跳转 前面几节学习的都是单页面的功能&#xff08;都在专栏里面https://blog.csdn.net/zhanggongzichu/category_12883540.html&#xff09;&#xff0c;涉及到项目研发都是有很多页面的&#xff0c;这里就需要用到路由&#xff08;vue route…
阅读更多...
关于JS继承的七种方式和理解

关于JS继承的七种方式和理解

1.原型链继承 function Fun1() {this.name parentthis.play [1, 2, 3] } function Fun2() {this.type child }Fun2.prototype new Fun1()let s1 new Fun2() let s2 new Fun2() s1.play.push(4) console.log(s1.play, s2.play) // [1, 2, 3, 4] [1, 2, 3, 4]可以看到两个…
阅读更多...
【Vue】在Vue3中使用Echarts的示例 两种方法

【Vue】在Vue3中使用Echarts的示例 两种方法

文章目录 方法一template渲染部分js部分方法一实现效果 方法二template部分js or ts部分方法二实现效果 贴个地址~ Apache ECharts官网地址 Apache ECharts示例地址 官网有的时候示例显示不出来&#xff0c;属于正常现象&#xff0c;多进几次就行 开始使用前&#xff0c;记得先…
阅读更多...
每日Attention学习18——Grouped Attention Gate

每日Attention学习18——Grouped Attention Gate

模块出处 [ICLR 25 Submission] [link] UltraLightUNet: Rethinking U-shaped Network with Multi-kernel Lightweight Convolutions for Medical Image Segmentation 模块名称 Grouped Attention Gate (GAG) 模块作用 轻量特征融合 模块结构 模块特点 特征融合前使用Group…
阅读更多...
124，【8】buuctf web [极客大挑战 2019] Http

124，【8】buuctf web [极客大挑战 2019] Http

进入靶场 查看源码 点击 与url有关&#xff0c;抓包 over
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023