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

embedded/2025/2/10 22:19:20/

原文首发：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.ppmy.cn/embedded/161184.html

相关文章

深入浅出 DeepSeek V2 高效的MoE语言模型

深入浅出 DeepSeek V2 高效的MoE语言模型

今天，我们来聊聊 DeepSeek V2 高效的 MoE 语言模型，带大家一起深入理解这篇论文的精髓，同时，告诉大家如何将这些概念应用到实际中。 🌟 什么是 MoE？——Mixture of Experts（专家混合模型&#x…
阅读更多...
14vue3实战-----获取用户信息和用户的菜单树信息

14vue3实战-----获取用户信息和用户的菜单树信息

14vue3实战-----获取用户信息和用户的菜单树信息 1.获取用户信息1.1封装接口1.2优化 2.获取用户的菜单树信息 1.获取用户信息 1.1封装接口 后端有根据id获取用户信息的接口，前端需要把该接口封装一下: service/login/login.ts： import hyRequest from…
阅读更多...
青少年编程与数学 02-009 Django 5 Web 编程 02课题、开发环境

青少年编程与数学 02-009 Django 5 Web 编程 02课题、开发环境

青少年编程与数学 02-009 Django 5 Web 编程 02课题、开发环境 一、环境要求基本要求安装步骤其他工具开发服务器 二、使用 PyCharm安装 PyCharm创建 Django 项目安装 Django 5配置和运行项目使用 PyCharm 功能 三、使用 VSCode安装 VSCode 和 Python创建虚拟环境安装 Django创…
阅读更多...
安宝特方案 | AR眼镜：远程医疗的“时空折叠者”，如何为生命争夺每一分钟？

安宝特方案 | AR眼镜：远程医疗的“时空折叠者”，如何为生命争夺每一分钟？

行业痛点：当“千里求医”遇上“资源鸿沟” 20世纪50年代，远程会诊的诞生曾让医疗界为之一振——患者不必跨越山河，专家无需舟车劳顿，一根电话线、一张传真纸便能架起问诊的桥梁。然而，传统远程医疗的局限也日益凸显&a…
阅读更多...
Linux网络 | 网络计算器客户端实现与Json的安装以及使用

Linux网络 | 网络计算器客户端实现与Json的安装以及使用

前言：本节讲述序列化和反序列化的相关内容。 这节的内容是博主前一篇博客的续章， 里面用到了很多知识点都是前一篇文章的。 友友们如果要学习序列化反序列化， 直接看本篇文章是看不懂的， 请看前一篇文章：linux网络 | 序…
阅读更多...
C++11详解(四) -- 新的类功能和包装器

C++11详解(四) -- 新的类功能和包装器

文章目录 1.新的类功能1.1 默认的移动构造和移动赋值1.2 成员变量声明的时候给缺省值1.3 default和delete1.4 final和override 2.STL中⼀些变化3.包装器3.1function3.2例题逆波兰表达式求值（用了function）题目解析代码 3.3 bind(绑定) 1.新的类功能 1.1…
阅读更多...
（苍穹外卖）项目结构

（苍穹外卖）项目结构

苍穹外卖项目结构 后端工程基于 maven 进行项目构建，并且进行分模块开发。 1). 用 IDEA 打开初始工程，了解项目的整体结构： 对工程的每个模块作用说明： 序号名称说明1sky-take-outmaven父工程，统一管理依赖版本&…
阅读更多...
《利用原始数据进行深度神经网络闭环 用于光学驻留空间物体检测》论文精读

《利用原始数据进行深度神经网络闭环 用于光学驻留空间物体检测》论文精读

Deep Neural Network Closed-loop with Raw Data for Optical Resident Space Object Detection 摘要 光学勘测是观测驻留空间物体和空间态势感知的重要手段。随着天文技术和还原方法的应用，宽视场望远镜在发现和识别驻留空间物体方面做出了重大贡献。然而&#x…
阅读更多...
最新文章

Copyright @ 2022~2023