前言 个人博客的搭建具有许多的方案可以选择，本文介绍如何快速部署一个博客，并将其发布到公网。

前情回顾

在互联网冲浪的过程中，我们常常看到许多独立站点，他们往往是个人博客，有各种各样的主题样式；这些站点见证了互联网的发展历史。从最初的手工编写HTML页面，到后来的内容管理系统（CMS）如WordPress的兴起，再到如今流行的静态网站生成器（SSG），如Hugo，Hexo，Zola等等。

个人博客的定义是什么？私以为是域名+站点+原创内容三要素组成。当然，最重要的原创内容往往被忽视...

  • 域名可以在Dynadot等平台购买，也可以申请如eu.org或us.kg等免费域名，目的是为了好记；
  • 站点可以在自己的服务器上使用动态的WordPress或者Halo来一键创建，也可以使用静态框架部署在PAAS平台上；

因此，整体成本应该是非常低的。

使用Halo快速搭建博客

  • 首先你需要有一台自己的云服务器，建议在1核1G以上配置，并安装Debian系统；
  • 随后我们安装1panel，执行以下命令一键安装：
curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sudo bash quick_start.sh

1panel依赖于docker，如果实现没有安装docker，脚本会帮你安装。

  • 安装过程中选择好端口，随后即可使用http:<ip>:<port>:<安全入口>进入登录界面，并使用默认随机生成的密码进入面板。

  • 进入之后我们可以看到里面有应用商店，在其中安装OpenResty与Halo与mysql，安装完毕后打开外部访问地址http://ip:8090，即可进入halo的后台，在其中写入文章并发布。

但我们不能使用不安全的HTTP以及IP来访问博客；因此，我们需要一个域名指向我们的博客，例如本文的blog.dich.bid;可以在在Dynadot等平台购买域名，并托管到Cloudflare。

  • 随后可以在1panel的网站中创建一个反向代理，代理地址即为http://ip:8090，主域名为刚刚注册的域名前加blog或其他，如blog.xxx.com

  • 创建完成后我们还需要配置TLS证书，在网站-HTTPS中添加证书，可以选择自签名证书正式或者通过Acme申请免费的Let's Encrypt证书。

  • 配置完成后在Cloudflare的DNS解析界面创建一个A记录，将你的blog.xxx.com解析到你的服务器的IP；

  • 大功告成！现在你应该可以通过HTTPS域名访问自己的博客！

使用Hugo框架构建博客

首先明确你需要的架构，一般有两种选择：

  • 使用现有的架构,包括Hugo,Hexo，Zola,Astro等等；
  • 或者从头写一个框架，需要HTML/CSS/JS等知识；

可以在这个网站上面查看常见的框架与主题的显示效果

  1. 安装Hugo:选择好你的框架与主题后（这里以hugo为例子），随后安装hugo以及对应的依赖：
  • Windows
# 打开以管理员模式运行的PowerShell,输入命令安装 Hugo Extended：
winget install Hugo.Hugo.Extended
  • Arch linux
paru -S hugo
  • 检查版本
hugo version
  1. 创建新的 Hugo 站点：选择一个文件夹打开命令行，执行：
hugo new site myblog

该命令会在myblog文件夹下生成hugo的基础目录。

  1. 安装主题，这里以hugo-blog-awesome主题为例：
cd myblog
git clone https://github.com/hugo-sid/hugo-blog-awesome.git themes/hugo-blog-awesome

并在hugo.toml顶层添加：

theme = "hugo-blog-awesome"

这样 Hugo 在构建时会从 themes/ 目录加载主题文件。后续可使用git pull获取主题更新。

你也可以直接用theme中的文件夹替换掉项目根目录下的同名文件夹，并再次修改。

  1. 写入文章：使用 Hugo 提供的命令创建新文章：
hugo new posts/hello-world.md

该命令会在content/posts/下生成 Markdown 文件，打开后修改title、date、tags等前缀然后撰写 Markdown 正文, Markdown 编辑器参考前文。

注意md文章头部和正文之间得使用<!-- more -->隔断

  1. 本地测试：在项目根目录运行：
hugo server -D

然后在浏览器访问http://localhost:1313即可实时预览并查看更新效果。

  1. 上传到GitHub：新建一个Github仓库，用Git连接并将Hugo项目的文件夹push上去；

  2. 使用PAAS平台部署：随后使用Vercel/Netlify等平台读取GitHub仓库并部署Hugo博客项目，并设置指向自己的域名，即设置一条CNAME记录。部署的时候可以让平台command运行部署也可以本地build之后直接上传public文件夹并在平台中指定。

当然，也可以使用GitHub Pages部署，详见官方文档

可选定制项

你想要的显示效果?

  • 风格，包括命令行风格，极简风格，MD3风格等等;
  • 布局，是响应式还是传统布局？

你需要那些功能?

  • 黑暗/白天模式切换;
  • 高斯模糊？动态取色？
  • PPT般的动效？
  • 访问人数和运行天数统计？
  • Tag分类和时间排序？
  • 搜索功能和RSS？

需要处理哪些外部依赖?

  • 域名和paas平台？
  • 图床还是直接嵌入图片？
  • 是否需要自动编译？
  • 是否需要多平台发布？
  • 是否需要加密特定文章？

以上的功能和需求是否对SEO和界面相应时间造成影响？

Done.