0.0. 从零开始搭建博客

博客概念起源于1998年,原名Weblog由“web”与“log”组合而成,2000年进入中国,在当下对于很多人来说是一个俗套又落后的一个东西。但是随着年龄的增长,逐渐发现受当下社会快节奏、碎片化信息的短视频影响,自己的注意力无法集中,大脑思考能力下降,每日心浮气躁,且语言表达走向匮乏。于是乎想要找一个地方重新找回那个上知天文、下知地理的自己,遂决定搭建一个属于自己的博客,记录生活/学习/理财/感悟。

文科专业毕业,通过自学勉强能写,确实不甚精通编程语言,参考了很多大佬的文章,可谓是一波三折。有道是前行不忘来时路,不负今朝景,在这里小小的记录一下🙂。

本文非纯原创,大量内容编纂、摘抄、整理于 晓林的博客 以及百科和其他各大网站,以及相关文档知识

0.1. 你要有的基础知识储备

在搭建博客之前,你需要具备以下基础知识,文章里并不会花大量篇幅去无限展开此类内容:

1. 命令行基础只是:例如打开、编辑、路径、输入等常用基础命令;

2. Linux的基础使用:基本的Linux命令输入,能简单看懂脚本日志;

3. 基础的计算机网络概念:域名、HTTPS、IP、证书等等;

4. 不要灰心,只要愿意动一动脑子钻研,全都不是事儿。

0.2. 一些常见的博客框架

1. VuePress:Vue 驱动的静态网站生成器;

2. Halo:强大易用的开源建站工具;

3. Solo:Java 博客系统,Java 开源博客系统;

4. Docsify:一个神奇的文档网站生成器;

5. Hexo:快速、简洁且高效的博客框架;

6. VanBlog:一款简洁实用优雅的高性能个人博客系统;

7. WordPress:构建站点、创建博客以及更多精彩功能;

8. 蘑菇博客:一个基于微服务架构的前后端分离博客系统;

9. OneBlog:一个简洁美观、功能强大并且自适应的 Java 博客;

10. V 部落:Vue + SpringBoot 实现的多用户博客管理平台,GitHub 上有 7k star;

11. GitHub / Gitee Pages:由 Git 项目托管平台提供的静态站点托管服务,它直接从 Git 项目获取 HTML、CSS 和 JavaScript 文件,通过构建过程运行文件,然后发布网站。 ‍ 更多的博客框架,可以在 GiteeGitHub 上面搜索。

本博客使用 Halo 进行搭建,整体教程围绕Halo进行讲解,但后期涉及域名、图床、CDN、搜索引擎和网络安全等内容,可以按需阅读。

0.3. 其他博客教程分享

-- -- -- --

1.0. 使用Halo进行博客搭建

Halo 强大易用的开源建站工具,轻松搭建博客网站,配合上丰富的模板与插件,帮助你构建你心中的理想站点。

最快捷便利的方式当然是使用正经八百的官方文档啦,附官方文档地址:Halo 文档,我使用 1Panel 运维面板进行的部署。

1.1. 环境准备

我们搭建博客需要一台云主机(本地 or 云),云主机就不过多介绍了,不论是哪个供应商都可以,我常用的基本是 阿里云腾讯云

确保您有一台运行Linux系统的服务器,支持CentOS、Ubuntu、Debian等主流发行版,及麒麟、统信等国产操作系统。支持各种服务器架构:x86_64、aarch64、armv7l、ppc64le、s390x。

需要主义的是,安装的每个应用,要安全组中把用到的端口进行开放,否则会无法访问,这个在后文中就不会反复提到了。

以root用户身份运行一键安装脚本,自动完成1Panel的下载和安装,附官方文档地址:1Panel 文档

$ bash -c "$(curl -sSL https://resource.fit2cloud.com/1panel/package/v2/quick_start.sh)"

当安装完成后,请记住你的内外网IP访问地址,以及登录账号和密码,并在云主机上开放对应的端口。

[1Panel Log]: 请使用您的浏览器访问面板:        
[1Panel Log]: 外部地址:  http://XXX.XXX.X.X:XXXXX/XXXXXXXXXX
[1Panel Log]: 内部地址:  http://XXX.XXX.X.X:XXXXX/XXXXXXXXXX
[1Panel Log]: 面板用户:  XXXXXXXXXX                         
[1Panel Log]: 面板密码:  XXXXXXXXXX

1.2. 安装基础软件

在安装 Halo 之前,我们需要先在 1Panel 上安装好所需的软件,包括 OpenResty 和数据库(MySQL、PostgreSQL、MariaDB 都可以)。在接下来的文档中,我们会默认你已经安装好了这两个软件,并不再赘述。

openresty-mysql-56dfce15a5de885bca88391d36789080.png

1.3. 安装 Halo 应用

进入应用商店应用列表,选择其中的 Halo 应用进行安装。

在应用详情页选择最新的 Halo 版本进行安装。

install-halo-6ede4c3cb9e35901443411387b3b84ae.png

参数说明:

名称:要创建的 Halo 应用的名称。

版本:选择最新的版本即可。

数据库服务:Halo 应用使用的数据库应用,支持下拉选择已安装的数据库应用,1Panel 会自动配置 Halo 使用该数据库。

数据库名:Halo 应用使用的数据库名称,1Panel 会在选中的数据库中自动创建这个数据库。

数据库用户:Halo 应用使用的数据库用户名,1Panel 会在选中的数据库中自动创建这个用户,并添加对应的数据库授权。

数据库用户密码:Halo 应用使用的数据库用户密码,1Panel 会在选中的数据库中自动为上一步创建的用户配置该密码。

外部访问地址:Halo 应用的最终访问地址,如果有为 Halo 规划域名,需要配置为域名格式,例如 http://halo.example.com。否则配置为 http://服务器IP:PORT,例如 http://192.168.1.1:8090

端口:Halo 应用的服务端口。

开始安装后页面自动跳转到已安装应用列表,等待刚刚安装的 Halo 应用变为已启动状态。

halo-status-508f621ea03c74f52806c1ee5aded93f.png

1.4. 创建网站

完成 Halo 应用的安装后,此时并不会自动创建一个网站,我们需要手动创建一个网站,然后将 Halo 应用绑定到这个网站上才能使用域名访问。

点击 1Panel 菜单的 网站,进入网站列表页,点击 创建网站 按钮。

在已装应用中选择我们刚刚新建的 Halo 应用。正确填写主域名,需要注意的是需要提前解析好域名到服务器 IP。

最后,点击确认按钮,等待网站创建完成即可访问网站进行 初始化

site-5005ab086c0fb2b1d83319f951e05a5b.png

2.0. 域名、备案和HTTPS

网站域名是网站在互联网上的唯一身份标识,一个独特、易记且与品牌相关的域名有助于增强用户对我们的认知和记忆。

2.1. 域名供应商

域名需要去一些域名注册商那里购买,基本各大云服务器厂商都有域名购买的我服务。如 阿里云腾讯云百度智能云华为云 等等。

2.2. 配置DNS

有了域名后,下一步就是配置 DNS 了,这样别人就可以通过域名来访问你的服务器了。以阿里云为例,简单说明下怎么配置:云解析 DNS ‍ 在要配置 DNS 的地方,点击解析设置,然后添加记录。

2.3. 网站备案

在国内,网站需要备案后才可以使用。如果你设置了 DNS 但是没备案,一般会被域名注册商马上停止解析,备案通过后才给你解析。备案简单来说就是让国家审核下你的网站,然后才可以使用域名,这是国家规定:

以下内容来自:网站备案_ICP 备案_备案迁移_备案-阿里云

是否一定要备案?

ICP 备案主要看您的网站等互联网信息服务解析到的服务器是否在中国内地(大陆),如果服务器在中国内地(大陆),必须完成 ICP 备案才可对外提供服务。如果服务器在中国香港、中国澳门、中国台湾及其他国家和地区,则不需要进行工信部 ICP 备案,仅需要完成公安联网备案。查看备案的必要性

不进行 ICP 备案的影响

根据上述政策规定,解析至中国内地服务器的网站等服务,必须完成 ICP 备案才可对外提供服务。* 如果您未在阿里云提交过 ICP 备案,直接将域名解析至阿里云中国内地服务器上,将被阿里云监测系统识别并阻断网站的访问服务,提示您需先完成备案操作。

如果您已经在其他接入商处申请过 ICP 备案,现在希望将域名解析至阿里云中国内地服务器上,根据政策要求,您需要将 ICP 备案信息接入阿里云。如果您没有将 ICP 备案信息接入阿里云,将被阿里云监测系统识别并阻断网站的访问服务,提示您需要将 ICP 备案信息接入阿里云。具体操作请参见接入备案流程

2.3.1 备案之前要做的事情

首先自己的网站得有内容,如果你网站啥内容都没有,审核是不会通过的,因为没有内容可以审核。

2.3.2 工信局备案

备案的过程大同小异,具体怎么备案,得看域名注册商的指引,例如阿里云的备案相关的文档就很齐全:备案在备案的时候请仔细阅读下文档,备案也不难,就填几个表单就可以了,工信局备案大概一周左右,通过或退回都有短信通知。

网站的名字也是需要注意的,不能起一些敏感的名字等,参考:填写网站信息(备案单个网站)

2.3.3 公安局备案

‍ 以下内容来自:ICP 备案后所需的后续流程介绍_备案-阿里云帮助中心

依据 计算机信息网络国际联网安全保护管理办法 相关规定,各网站在工信部进行 ICP 备案成功后,需在网站开通之日起 30 日内提交公安联网备案申请,详情请参见公安联网备案及注销

各地区用户申请公安联网备案请登录全国互联网安全管理服务平台提交公安联网备案申请。

公安联网备案审核通过后,您需在 30 日内登录全国互联网安全管理服务平台,在您的已备案网站详情中,复制网站公安机关备案号备案编号 HTML 代码,下载备案编号图标,并编辑您的网页源代码将公安联网备案信息放置在网页底部。

具体怎么备案,可以参考:公安联网备案信息填写指南

公安备案也参考域名注册商提供的服务即可,比如阿里云的文档中每个表单每个字段怎么填都有说明,也是填几个表单就能完成备案。不过需要注意的是,公安局备案退回或通过是没有短信通知的,而且被退回需要在一段时间内重新提交,所以需要定期自行去公安局备案网站上查看结果。

2.3.4 备案之后

备案通过后,就需要将备案信息放到网页底部。

2.4. HTTPS

开启 HTTPS 有很多好处,比如可以实现数据加密传输等,提高网站安全性,提供搜索引擎权重,使其更容易被搜索到等等。 ‍

2.4.1 购买证书

不同域名注册商,购买的流程也不同,具体怎么购买以官网教程为准:购买 SSL 证书指南,实在不行问客服。

2.4.2 证书上传至服务器

证书状态变为 「已签发」后,我们就需要下载证书并上传到服务器上了。我使用的是 1Panel 直接手动上传即可。

上传后在网站部署的页面,启用HTTPS,并选择上传上来的证书,即可使用HTTPS来请求访问我们的网站。

访问自己的网站,如果网页地址栏出现小锁标志,表示证书已经安装成功:

3.0. 主题的安装加载和配置

Halo 社区目前还是比较活跃的,有大量作者搭建了优质的主题和插件供新手小白使用。我使用的主题是 Halo-Theme-Hao ,一款适用于 Halo2.x 的博客主题,移植自 Hexo 社区 张洪 Heo ,是对 Hexo-Theme-Butterfly 主题的魔改版本。我也在使用中也对该主题中的一些地方做了些许魔改。这里是原主题作者写的使用文档:halo-theme-hao ,可以根据文档一步一步进行配置。

插件依赖:

所有插件均为可选,不安装则不会出现对应功能。部分插件可能已经预设在 Halo 内。部分插件主题尚未适配。

评论功能 plugin-comment-widget

搜索功能 plugin-search-widget

友链页面 plugin-links

瞬间页面 plugin-moments

追番插件 plugin-bilibili-bangumi

图库插件 plugin-photos

katex插件 plugin-katex

我的装备 plugin-equipment

Markdown / HTML 内容块插件 plugin-hybrid-edit-block

爱发电 plugin-afdian

3.1. 下载安装

在 GitHub 直接下载安装,如果大家的网络不太好,可以参考下面的方式,从 Halo 应用市场下载Releases · liuzhihang/halo-theme-hao Release 页面下载主题后,在 Halo Console 后台上传并启用即可。

在应用市场下载安装 应用市场

在线安装,在 GitHub 在线安装Release 页面右键复制链接 主题.zip,在 Halo Console 后台选择远程下载并启用即可。

在应用市场在线安装,在安装时填写自己的博客地址

应用市场插件安,应用市场插件安装后续可以直接在后台进行更新,推荐此种方式。首先需要下载应用 市场插件,在自己的博客后台搜索 Hao,此种方便后续更新。

从商城安装的前提是需要安装商城插件 应用市场插件

3.2. 主题

下面着重讲一些在配置时,可能会存在疑问的设置。

3.2.1. 自定义导航栏图标

管理图标样式

打开 阿里巴巴矢量图标库,登录成功后打开【我的项目】,新建空白项目,在搜索框中搜索自己想要的图标类型并选择图标添加入库,完成全部图标添加后点击右上角购物车选择加入项目,在“我的项目”中选择刚才添加图标的项目,使用symbol查看在线链接并更新地址。

复制生成的地址,打开halo博客后台管理面板,在【系统】-【设置】-【代码注入】中填写引用样式(注意修改代码块中引用地址为上一步中获取的实际项目地址)

打开halo系统后台管理面板,在“菜单”中编辑你想要设置图标的菜单项,在编辑页面中的图标输入框填写代码,要注意前面需要加【#】号。

3.2.2. 评论系统

我使用的是Twikoo评论系统,使用标准 Twikoo 评论系统需要进行 云函数部署前端部署 两个过程,在主题中已经集成了 Twikoo 的前端部分,所以,只需要完成前者即可。

因为我博客对的整体部署都是在1Panel上面完成的,所以下面也是以1Panel为模板进行讲解。首先在应用商店下载安装最新版本的Twikoo,安全组对40063端口进行放行。

访问服务器地址:http://服务端IP:40063 (实际部署成功后,用反代地址访问反馈的结果也是类似对的),给 Twikoo 反代一个域名,这里要使用的是你自己实际的域名。

给 Twikoo 增加个域名,增加 ssl 证书

最后禁用 ip+端口 访问,变为只用域名访问。完成部署后:当打开配置中指定的域名(或IP地址)后,看到下面这样的画面,表示 Twikoo 正常工作:

在评论系统下拉栏中选择 Twikoo,找到 Twikoo评论配置 (文档:https://twikoo.js.org/) 配置块

Twikoo评论 - 环境id/后端URL * 中输入 部署 一节中指定的域名(或IP地址)

Twikoo评论 - 管理员令牌 * 中输入一些占位值

Twikoo评论 - js 可以不做修改

! 注意 :此时配置没有完成,还需要在配置完 博主邮箱配置后才能获取令牌数据

获取 Twikoo评论 - 管理员令牌 (浏览器 F12 )

目前想到就这么多,之后再随时补充吧。