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

原文首发：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;
    }
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Diskgenius系统迁移之后无法使用USB启动

Diskgenius系统迁移之后无法使用USB启动

前言 本文用于记录系统迁移中遇到的问题及解决方法，如有不对请指出，谢谢！ 现象 使用DiskGenius进行系统迁移后，使用USB启动失败，反复在品牌logo和黑屏之间切换，期间还会在左上角显示”reset system“报错…
阅读更多...
数据库系统概论的第六版与第五版的区别，附pdf

数据库系统概论的第六版与第五版的区别，附pdf

我用夸克网盘分享了「数据库系统概论第五六版资源」，点击链接即可保存。 链接：https://pan.quark.cn/s/21a278378dee 第6版教材修订的主要内容 为了保持科学性、先进性和实用性，在第5版教材基础上对全书内容进行了修改、更新和充实。 在科…
阅读更多...
简单说一下CAP理论和Base理论

简单说一下CAP理论和Base理论

CAP理论 什么是CAP 一致性 可用性 分区容错性：系统如果不能再时限内达成数据一致性，就说明发生了分区的情况 然后当前操作在C和A之间做出选择 例如我的网络出现问题了，但是我们的系统不能因为网络问题就直接崩溃 只要我们的分布式系统没…
阅读更多...
网络工程师 （22）网络协议

网络工程师 （22）网络协议

前言 网络协议是计算机网络中进行数据交换而建立的规则、标准或约定的集合，它规定了通信时信息必须采用的格式和这些格式的意义。 一、基本要素 语法：规定信息格式，包括数据及控制信息的格式、编码及信号电平等。这是协议的基础，确…
阅读更多...
Linux网络 | 理解NATPT， 数据链路层Done

Linux网络 | 理解NATPT， 数据链路层Done

前言：本节内容结束数据链路层， 本节的重要内容有两个：一个是见一个综合性面试题，另一个就是NAT技术NATPT。 那么废话不多说， 开始我们的学习吧！！！ ps：最好先看一下上一篇…
阅读更多...
Linux/C高级（精讲）----shell结构语句、shell数组

Linux/C高级（精讲）----shell结构语句、shell数组

shell脚本 功能性语句 test 可测试对象三种：字符串 整数 文件属性 每种测试对象都有若干测试操作符 1）字符串的测试： s1 s2 测试两个字符串的内容是否完全一样 s1 ! s2 测试两个字符串的内容是否有差异 -z s1 测试s1 字符串的长度是…
阅读更多...
DeepSeek本地部署并提供远程连接(小白教程)

DeepSeek本地部署并提供远程连接(小白教程)

文章目录 一、DeepSeek介绍二、为什么要本地部署三、本地部署教程1.安装Ollama2.下载部署DeepSeek模型3.安装Chatbox可视化工具4.非局域网远程连接 四、DeepSeek官方开放平台API对接 参考资料：DeepSeek本地搭建部署详细图文教程 - 搬主题 一、DeepSeek介绍 DeepSeek…
阅读更多...
足球俱乐部管理系统的设计与实现

足球俱乐部管理系统的设计与实现

🍅点赞收藏关注 → 添加文档最下方联系方式咨询本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目希望你能有所收获，少走一些弯路。🍅关注我不迷路🍅 项目视频 足…
阅读更多...
Star300+ 开源项目Developer-RoadMap 计算机各领域学习路线图集大成者

Star300+ 开源项目Developer-RoadMap 计算机各领域学习路线图集大成者

一、开发者的“成长宝典”来了 你是否在编程的海洋中迷茫，不知该驶向何方？你是否渴望一份清晰的指南，引领你在开发者的道路上稳步前行？今天，就为大家带来一份堪称“成长宝典”的开源项目: https://github.com/kamran…
阅读更多...
链表和 list

链表和 list

一、单链表的模拟实现 1.实现方式 链表的实现方式分为动态实现和静态实现两种。 动态实现是通过 new 申请结点，然后通过 delete 释放结点的形式构造链表。这种实现方式最能体 现链表的特性； 静态实现是利用两个数组配合来模拟链表。一个表示数据域&am…
阅读更多...
C语言switch case语句详解（非常详细）

C语言switch case语句详解（非常详细）

在C语言中，switch case 语句是一种多分支选择结构，用于根据变量的值执行不同的代码块。 相比于if else语句，switch case在处理多个固定值的条件判断时更加简洁和高效。本文将详细讲解switch case语句的用法、语法格式、实例代码、注意事项&a…
阅读更多...
DeepSeek本地部署

DeepSeek本地部署

前言 蛇年过年前，国产大模型 DeepSeek以更高的效率、更低的计算成本火爆国内外，成为现象级AI，但由于访问人数过多经常频繁出现反应迟缓甚至是宕机的情况。 但万幸的是，DeepSeek 是一个开源模型，我们可以通过本地部署…
阅读更多...
springboot简单应用

springboot简单应用

快速开发Springboot项目实现简单的增删改查，前期需要准备：idea与postman安装 Maven，MySQL（8），JDK(21) 目录 前言 springboot 使用3.0版本，JDK使用21,MySQL使用8版本 开发环境IDEA使用2024版本 …
阅读更多...
tomcat核心组件及原理概述

tomcat核心组件及原理概述

目录 1. tomcat概述 1.1 概念 1.2 官网地址 2. 基本使用 2.1下载 3. 整体架构 3.1 核心组件 3.2 从web.xml配置和模块对应角度 3.3 如何处理请求 4. 配置JVM参数 5. 附录 1. tomcat概述 1.1 概念 什么是tomcat Tomcat是一个开源、免费、轻量级的Web服务器。 Tomca…
阅读更多...
【Linux】24.进程间通信（3）

【Linux】24.进程间通信（3）

文章目录 3.6 systemv共享内存3.6.1 共享内存函数3.6.3 一个简单的共享内存代码实现3.6.4 一个复杂的共享内存代码实现3.6.4 key和shmid的主要区别: 3.7 systemv消息队列（了解）3.8 systemv信号量（了解）进程互斥四个问题理解信号量…
阅读更多...
115，【7】 攻防世界 web fileinclude

115，【7】 攻防世界 web fileinclude

进入靶场 试着访问了几个文件&#xff0c;都没得到信息&#xff0c;f12看看源码 还真有 <?php // 检查是否开启了错误显示功能 // ini_get 函数用于获取 PHP 配置选项的值&#xff0c;这里检查 display_errors 选项是否开启 if( !ini_get(display_errors) ) {// 如果错误…
阅读更多...
深入理解Java引用传递

深入理解Java引用传递

先看一段代码&#xff1a; public static void add(String a) {a "new";System.out.println("add: " a); // 输出内容&#xff1a;add: new}public static void main(String[] args) {String a null;add(a);System.out.println("main: " a);…
阅读更多...
langchain教程-7.Embedding/文本向量化

langchain教程-7.Embedding/文本向量化

前言 该系列教程的代码: https://github.com/shar-pen/Langchain-MiniTutorial 我主要参考 langchain 官方教程, 有选择性的记录了一下学习内容 这是教程清单 1.初试langchain2.prompt3.OutputParser/输出解析4.model/vllm模型部署和langchain调用5.DocumentLoader/多种文档…
阅读更多...
Mac下使用brew安装go 以及遇到的问题

Mac下使用brew安装go 以及遇到的问题

首先按照网上找到的命令进行安装 brew install go 打开终端输入go version&#xff0c;查看安装的go版本 go version 配置环境变量 查看go的环境变量配置&#xff1a; go env 事实上安装好后的go已经可以使用了。 在home/go下新建src/hello目录&#xff0c;在该目录中新建…
阅读更多...
Ubuntu部署Deepseek-R1模型（8b）

Ubuntu部署Deepseek-R1模型（8b）

安装ubuntu系统 本机电脑系统ubuntu-20.04 #升级软件 sudo apt-get update#安装curl sudo apt-get install curl通过以上两条指令&#xff0c;完成了curl命令的安装。 安装ollama 打开Ollama官网 选择Linux&#xff0c; 给出如上图方框所示的一条指令 curl -fsSL https:…
阅读更多...
最新文章

Copyright @ 2022~2023