使用Halo搭建个人博客网站

使用Halo搭建个人博客网站

一、准备工作

Halo是一个简单易用的开源建站工具,部署后可以通过主题插件,快速构建一个你想要搭建的网站类型。本次将使用腾讯云服务器+1Panel面板快速构建我自己的个人网站。

相关资料:

腾讯云服务器购买

部署1Panel面板

二、使用1Panel面板部署Halo

1 安装Mysql

image-20241123153847389-1732357319136-4-1732357559750-46-1732357813145-85

2 安装Halo

image-20241123154727973-1732357319137-5-1732357559750-47-1732357813145-86

3 初始化Halo并选择相应的主题

3.1 服务器安全组开放端口

初始化Halo需要通过外部端口访问,因此我们需要去服务器安全组开放对应的端口访问权限,以腾讯云为例:

image-20241123155753863-1732357319137-6-1732357559750-48-1732357813145-87

3.2 初始化Halo

浏览器访问安装Halo时的外部访问地址http://123.123.123.8090,初始化Halo。

image-20241123160252621-1732357319137-7-1732357559750-49-1732357813145-89

3.3 安装合适的主题

Halo后台->主题->主题管理 安装主题并启用。我这里搭建的是个人博客网站,所以选择的是Joe 3.0,这里可以根据自己的个人需要选择。后续的主题配置这里就不叙述了,因为每个主题的配置选项都不一样。

image-20241123161019353-1732357319137-8-1732357559750-50-1732357813145-88

3.4 安装文章导入导出插件

image-20241123173925925-1732357319137-9-1732357559750-51-1732357813145-90

3.5 导入文章

image-20241123174206048-1732357319137-10-1732357559751-52-1732357813146-91

个人网站展示

首页

image-20241123161436883-1732357319137-11-1732357559751-53-1732357813146-92

image-20241123161526572-1732357319137-12-1732357559751-55-1732357813146-93

分类页

image-20241123161550256-1732357319137-13-1732357559751-54-1732357813146-94

自定义页

image-20241123161835944-1732357319137-14-1732357559751-56-1732357813146-97

文章详情

image-20241123162023492-1732357319137-15-1732357559751-57-1732357813146-95

三、Typora图片问题处理

由于我是使用Markdown编写的博客,图片都在本地存储。自己本地查看当然没问题,但是分享给别人的时候直接发md文件过去就会没有图片,这时候就需要导出为PDF图片才能够正常显示。同样的,在网站上显示的md文件,由于Markdown中引用的图片是存储在本地电脑的,同样无法正常显示。这时候就需要Markdown引用的图片指向互联网上的服务器来处理这个问题。

我采用的解决方式是在服务器上搭建一个自己的图床,然后在Typora中,将Markdown所引用的图片上传至图床并引用

注:我是用的Markdown软件是Typora,使用其他网站的朋友可以搜索下其他软件怎么设置,但是都需要将md文件中的图片地址改为网络地址,才能在网上正常查看。

1 服务器安装EasyImages2.0图床

EasyImages2.0是一个使用php开发的开源图床软件,简单易用,适用于单一场景和个人使用,不适合多用户复杂场景。

image-20241123170838099-1732357319137-16-1732357559751-58-1732357813146-96

2 Windows本地安装PicGo

PicGo官网

【Picgo指南】图床神器之Picgo工具的安装与快速上手详细教程

2.1 安装easyimage 1.0.0简单图床插件

image-20241123171637736-1732357319137-17-1732357559751-59-1732357813146-98

2.2 访问EasyImage图床,获取API调用地址和Token

image-20241123172046847-1732357319137-18-1732357559751-60-1732357813146-99

2.3 配置EasyImage图床

image-20241123171833277-1732357319137-19-1732357559751-61-1732357813146-100

配置完成后,在上传区上传一张图片,然后去EasyImage验证图片是否上传成功即可。

2.4 Typora配置图片上传

image-20241123172416786

点击验证图片上传选项,出现如下结果即为成功。

image-20241123172702673

2.5 Markdown文件上传前处理

上传md文件到博客网站上之前,我们需要先将md文件中的图片指向图床中的图片地址,因此需要上传图片到图床,并修改图片地址。

  1. 上传图片:该操作会将当前md文件中的图片上传到图床,并修改图片引用地址为图床地址
  2. 复制/移动图片到…:该操作会将md文件中的图片保存到本地,并修改图片引用地址为本地地址

image-20241123173041723-1732357319137-20-1732357559751-62-1732357813146-103

四、绑定域名

完成上面的操作之后,我们已经可以正常访问我们的博客网站了。但是IP地址和端口实在是难记,所以我们需要购买一个域名,将其和网站进行绑定。

1 购买域名

国内支持域名注册的云服务商有很多,下面列举了本人使用过的三个域名注册服务商。

腾讯云域名注册

阿里云域名注册

华为云域名注册

2 ICP备案

因为法律规定,托管于中国内地服务器的网站需要进行ICP备案,所以注册域名之后,我们还需要进行ICP备案才能够使用DNS服务器进行DNS解析,这时候通过域名访问网站才能够正常显示。如果直接进行DNS解析,通过域名访问到的将是DNS服务器提示域名备案的页面。

域名备案流程

image-20241123180405059-1732357319137-21-1732357559751-63-1732357813146-104

3 配置DNS解析

域名完成ICP备案之后,可以进行DNS解析了,DNS解析的目的是将我们的域名和我们的网站IP地址和端口绑定到一起,实现访问域名的时候,DNS服务器上能够通过域名获取对应的IP和端口,这样浏览器就可以通过域名访问到我们的网站了。

image-20241123180532307

五、总结

完成上面五步,我们就完成了网站搭建、博客文章上传、Markdown图片问题处理、域名绑定这几个建站的整体流程了,网站也可以正常访问了。

下面总结一下这个过程中本人遇到的一些问题。

Gitee防盗链

一开始没打算搭建个人图床的,百度之后选择的是Gitee仓库作为图床,搭配PicGo完成Markdown图片问题的处理的,但是后来发现Gitee设置了防盗链,图片没法正常引用

而本人又没有把Halo源代码下载下来自定义修改,无法解决防盗链的问题,所以才不得不自己搭建图床。

使用Gitee作为图床的话,需要考虑防盗链的问题,如果是自己源代码部署,可以解决防盗链的问题的话可以使用,不然不建议。

图床产品也可以使用腾讯云COS、阿里云OSS、七牛云、GitHub等等,只要是PicGo原生支持的或者有对应插件的都可以使用。

Typora图片过大上传失败

EasyImage上面可以配置单文件最大上传大小,默认好像是3MB,如果图片过大就会上传失败,可以根据自己的需要,设置合适的大小。

image-20241123183834253

等等,只要是PicGo原生支持的或者有对应插件的都可以使用。`

Typora图片过大上传失败

EasyImage上面可以配置单文件最大上传大小,默认好像是3MB,如果图片过大就会上传失败,可以根据自己的需要,设置合适的大小。

[外链图片转存中…(img-wFQ7CFkL-1733018410485)]

### 如何使用Halo框架构建个人博客 为了帮助理解如何利用Halo框架创建个人博客,以下是详细的说明以及代码示例: #### Halo简介 Halo 是一款基于 Java Spring Boot 的开源博客系统。它提供了丰富的功能模块,支持自定义主题、插件扩展等功能[^3]。 #### 安装与配置环境 在开始之前,请确保已安装以下依赖项: - JDK 8 或更高版本 - Maven 构建工具 - MySQL 数据库 可以通过运行以下命令克隆项目并初始化数据库: ```bash git clone https://github.com/halo-dev/halo.git cd halo mvn clean install -DskipTests ``` 完成上述操作后,在 `application.yml` 文件中设置数据库连接参数: ```yaml spring: datasource: url: jdbc:mysql://localhost:3306/halo?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC username: root password: your_password_here ``` #### 创建第一个页面模板 假设我们希望实现一个简单的首页布局,可以按照如下方式编写 HTML 和 Thymeleaf 模板文件: ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>我的个人博客</title> <!-- 引入样式 --> <link rel="stylesheet" th:href="@{/css/style.css}"/> </head> <body> <header> <h1><a href="/" th:text="${blogTitle}">默认标题</a></h1> </header> <section class="posts"> <div th:each="post : ${posts}"> <article> <h2 th:text="${post.title}"></h2> <p th:text="${post.content}"></p> </article> </div> </section> <footer> © 2023 我的个人博客 </footer> </body> </html> ``` 此模板展示了基本的文章列表结构,并通过 Thymeleaf 动态渲染数据[^4]。 #### 启动应用 执行以下命令启动服务端程序: ```bash java -jar target/halo.jar ``` 访问地址通常为 http://localhost:8090/ ,登录后台管理界面即可发布文章等内容[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值