307 lines
18 KiB
Markdown
307 lines
18 KiB
Markdown
|
---
|
|||
|
|
title: Obsidian+Hugo建站教程：2-博客系统，域名，托管服务，DNS解析
|
|||
|
|
date: 2024-02-18T15:30:14
|
|||
|
|
categories: ["百草园"]
|
|||
|
|
tags:
|
|||
|
|
- 博客
|
|||
|
|
- 教程
|
|||
|
|
- Obsidian
|
|||
|
|
feature: https://img.viento.cc/cover/how-to-build-a-blog-2-cover.webp
|
|||
|
|
slug: how-to-build-a-blog-2
|
|||
|
|
summary: Obsidian + Hugo 建站教程第二期
|
|||
|
|
series: Obsidian+Hugo建站教程（已鸽）
|
|||
|
|
description: Obsidian + Hugo 建站教程——各种静态及动态博客系统简介，域名简介以及建议，Vercel 和 Netlify 等托管服务简介，DNS 解析介绍。
|
|||
|
|
---
|
|||
|
|
各位老友们好，我是 Chlorine。本期继续我们的数字博物馆搭建之旅。
|
|||
|
|
|
|||
|
|
> 本期的内容技术性比较强，大家可以不必完全理解，会用即可。我本身对这些概念也不算熟悉。
|
|||
|
|
|
|||
|
|
## 博客系统
|
|||
|
|
|
|||
|
|
随着我们的展品准备完成，我们需要博物馆的 staff 了——有人向来宾们讲解展品的意义，有人负责装潢收拾博物馆的外观和卫生，有人负责与博物馆场地进行对接，等等。
|
|||
|
|
|
|||
|
|
而在我们的独立博客中，负责这些活计的就是独立博客系统。
|
|||
|
|
|
|||
|
|
独立博客系统是一种项目框架，它可以将我们的博客文章转化为可以在浏览器上展示的 HTML 网页，同时将网站渲染为我们想要的效果。
|
|||
|
|
|
|||
|
|
### 静态博客和动态博客
|
|||
|
|
|
|||
|
|
独立博客框架主要可以分为两种：静态博客和动态博客。简单来说，静态博客会在服务器端根据我们当前的内容生成相应的 HTML 文件，用户需要访问时直接将现成的 HTML 发送到用户端；而动态博客通常基于数据库和服务器端脚本处理用户请求，然后在服务器动态生成网页内容。
|
|||
|
|
|
|||
|
|
这么说比较绕，我用我做过的一个上机报告举个例子吧。
|
|||
|
|
|
|||
|
|
我们做过一个上机作业，大致内容是写一个 C++ 程序，根据用户输入的年份（在一定范围内）生成一份日历并输出。
|
|||
|
|
|
|||
|
|
当时我就想到了两种方案：
|
|||
|
|
|
|||
|
|
1. 先写一个生成程序，把这个范围内的所有日历都生成好并储存，等用户输入时直接把对应的日历输出。
|
|||
|
|
2. 直接接受用户输入，根据输入的参数现场生成日历并输出。
|
|||
|
|
|
|||
|
|
不十分严谨地说，第一种方案类似于静态博客，第二种类似于动态博客。
|
|||
|
|
|
|||
|
|
静态博客和动态博客各有优缺点，我们简单列一下吧。
|
|||
|
|
|
|||
|
|
静态博客的优点：
|
|||
|
|
|
|||
|
|
- 文章均以 Markdown 文件存储，对于习惯 Markdown 的博主来说迁移成本几乎为 0。
|
|||
|
|
- 可以免费托管在静态网站托管服务上，节省了服务器成本。
|
|||
|
|
- 文章不多的时候性能较好。
|
|||
|
|
|
|||
|
|
静态博客的缺点：
|
|||
|
|
|
|||
|
|
- 交互性比较差，评论等功能配置起来麻烦。
|
|||
|
|
- 需要学习一些 Git 等命令，每次更新内容都需要重新生成静态文件并部署到服务器。
|
|||
|
|
|
|||
|
|
动态博客的优点：
|
|||
|
|
|
|||
|
|
- 一般具有极其丰富的插件和主题，可定制性一般较强。
|
|||
|
|
- 一般有后端（管理面板），操作方便。
|
|||
|
|
- 交互性好，评论、登录等配置起来难度较低。
|
|||
|
|
|
|||
|
|
动态博客的缺点：
|
|||
|
|
|
|||
|
|
- 文章存储在数据库中，迁移不方便。
|
|||
|
|
- 需要服务器，成本较高，且服务器可能成为制约性能的瓶颈（一般不至于）。
|
|||
|
|
|
|||
|
|
### 框架推荐——静态博客
|
|||
|
|
|
|||
|
|
#### Hexo
|
|||
|
|
|
|||
|
|
官方网站： https://hexo.io/
|
|||
|
|
|
|||
|
|
GitHub 仓库地址： https://github.com/hexojs/hexo/
|
|||
|
|
|
|||
|
|
一个基于 Node. js 的快速、简洁且高效的静态博客框架，在静态博客爱好者中很受欢迎。不过我个人对其了解不多，不敢多言。
|
|||
|
|
|
|||
|
|
#### Hugo
|
|||
|
|
|
|||
|
|
官方网站： https://gohugo.io/
|
|||
|
|
|
|||
|
|
GitHub 仓库地址： https://github.com/gohugoio/hugo/
|
|||
|
|
|
|||
|
|
一个基于 Go 语言的静态博客框架，以速度快著称。主题很多，同时支持使用 shortcode（简码）进行高度个人化的定制。也是我们下面系列的主角。
|
|||
|
|
|
|||
|
|
#### NotionNext
|
|||
|
|
|
|||
|
|
官方网站： https://tangly1024.com
|
|||
|
|
|
|||
|
|
GitHub 仓库地址： https://github.com/tangly1024/notionnext/
|
|||
|
|
|
|||
|
|
一个基于 Notion 的建站服务，来自大佬 [tangly](https://blog.tangly1024.com)，也是我之前使用的系统。
|
|||
|
|
|
|||
|
|
拥有极为美观的界面、多种主题和丰富的插件，同时由于 Notion 的强大，可定制性也比较高，而且[说明文档](https://docs.tangly1024.com/)详细到令人落泪，极度 beginner-friendly。
|
|||
|
|
|
|||
|
|
对于喜欢用 Notion 的老友们，这绝对是个福音。
|
|||
|
|
|
|||
|
|
#### Gridea
|
|||
|
|
|
|||
|
|
官方网站： https://open.gridea.dev/
|
|||
|
|
|
|||
|
|
GitHub 仓库地址： https://github.com/getgridea/gridea/
|
|||
|
|
|
|||
|
|
这是我最初使用的框架。一个小而美的静态博客系统，有一个 user- friendly 的客户端。不过很久不更新了。
|
|||
|
|
|
|||
|
|
#### Valaxy
|
|||
|
|
|
|||
|
|
官方网站： https://valaxy.site/
|
|||
|
|
|
|||
|
|
GitHub 仓库地址： https://github.com/YunYouJun/valaxy
|
|||
|
|
|
|||
|
|
大神[云游君](https://yunyoujun.cn)的作品，基于 Vite 和 Vue 构建，看着颜值相当高，Markdown 支持也很完善。同时支持热重载，本地开发的时候很美好。
|
|||
|
|
|
|||
|
|
这是我很感兴趣的框架之一，将来可能搞个镜像站。
|
|||
|
|
|
|||
|
|
#### Vanblog
|
|||
|
|
|
|||
|
|
官方网站： https://vanblog.mereith.com/
|
|||
|
|
|
|||
|
|
GitHub 仓库地址： https://github.com/Mereithhh/vanblog
|
|||
|
|
|
|||
|
|
大神 Mereith 的作品，响应速度快，功能极其完善，甚至连图床和站点统计都给你准备好了。
|
|||
|
|
|
|||
|
|
说实话，我感觉 Vanblog 更像是一个动态博客：它有后端，有账号系统，部署也必须要服务器。
|
|||
|
|
|
|||
|
|
#### 其他
|
|||
|
|
|
|||
|
|
下面的框架也都有不小的名声，但是我没有详细了解过。
|
|||
|
|
|
|||
|
|
- [Jekyll](https://www.jekyll.com.cn/)
|
|||
|
|
- [VuePress](https://vuepress.vuejs.org/)
|
|||
|
|
- [Pelican](https://getpelican.com/)
|
|||
|
|
- [VitePress](https://vitepress.dev/)
|
|||
|
|
- [Docsify](https://docsify.js.org/)
|
|||
|
|
- ……
|
|||
|
|
|
|||
|
|
### 框架推荐——动态博客
|
|||
|
|
|
|||
|
|
动态博客我了解的属实不多，因此只介绍两个有名的吧。
|
|||
|
|
|
|||
|
|
#### Wordpress
|
|||
|
|
|
|||
|
|
中文名“文派”，官方网站： https://wordpress.com （商业）， https://wordpress.org （自托管）
|
|||
|
|
|
|||
|
|
WP 在动态博客界德隆望尊，被誉为“宇宙第一独立博客系统”，拥有极为完善的社区生态、丰富的插件和主题。
|
|||
|
|
|
|||
|
|
#### Ghost
|
|||
|
|
|
|||
|
|
官方网站： https://ghost.org/
|
|||
|
|
|
|||
|
|
一款基于 Node. js 和 MySql 数据库的个人博客系统，非常简洁好看。
|
|||
|
|
|
|||
|
|
在下面的教程中，我会使用 Hugo 作为示例。至于为什么是 Hugo？嗯，这个以后再说。
|
|||
|
|
|
|||
|
|
## 网页托管服务
|
|||
|
|
|
|||
|
|
好的，展品有了，staff 齐了，那是不是应该有个场地了？
|
|||
|
|
|
|||
|
|
对于动态博客，我们需要使用服务器（server）。服务器是一个很复杂的东西，你可以理解为：**服务器就是一台能接受外来访问的机器**。从这个角度来看，任何电子产品（有形的或者无形的）都可以作为服务器。
|
|||
|
|
|
|||
|
|
那就有朋友要问了：那我直接拿自己的电脑/手机/……当服务器不就行了？为什么还要专门去买服务器？
|
|||
|
|
|
|||
|
|
仔细想一想，服务器要有哪些必备的素质？
|
|||
|
|
|
|||
|
|
- 7\*24 运行的能力：毕竟你这博物馆是要全天候开放的。
|
|||
|
|
- 处理大量访问请求的能力。
|
|||
|
|
- 独立的公网 IP: 这点比较复杂，一会再讲。
|
|||
|
|
|
|||
|
|
而我们自己的设备大部分没有这样的能力，就算有也需要非常复杂的折腾，其机会成本极高。考虑到本文的受众，这种方法显然是不合适的。所以如果需要，还是推荐买个服务器，特别是云服务器。和实体服务器相比，云服务器优点还是蛮多的：
|
|||
|
|
|
|||
|
|
- 成本相对较低：现在云服务器的价格已经很喜人了，腾讯云的学生机一年也就 100 多（由此引申出了我计量货币的一种方式，1 年服务器 = 112r）。By contrast，孙哥自己搭的实体服务器，在发挥图吧的各种省钱小妙招之后依然花费上千，更别提各种折腾。所以还是那句话：如果只是想建站，自己搭实在不值。
|
|||
|
|
- 有独立的公网 IP：这一点留到后面 IP 的部分讲。你只需要知道，我们自己的局域网 （内网）的设备在外网访问是很费劲的。
|
|||
|
|
- 稳定可靠：这点听上去有点离奇，不过仔细想想：目前的大厂，像国外的 Microsoft Azure，Amazon，国内的套路云、凉心云、华为云之类的，提供的云计算服务的稳定性其实比大部分个人搭建的服务器更高。
|
|||
|
|
|
|||
|
|
有点跑题了，毕竟我们讲的是静态博客。静态博客当然可以部署在服务器上，但是属实是鸭子睁眼——duck 不必（闭）（通辽歇后语 1/1）。因为我们早就有更方便而且免费的服务了，那就是静态网页托管。
|
|||
|
|
|
|||
|
|
下面列出了一些常见的静态网页托管服务：
|
|||
|
|
|
|||
|
|
| 名称 | pros | cons |
|
|||
|
|
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
|
|||
|
|
| Vercel（原名 ZEIT） | - 最广为使用、最受好评的静态网页托管平台（小样本统计）`<br>`- 服务功能齐全，内置网页模板、自动更新部署、自定义域名、SSL 证书等一样不少 | - 全英文界面，有一定阅读门槛 `<br>`- 在国内访问有时候会被墙，需要绑定自定义域名加快速度 |
|
|||
|
|
| Netlify | - 和 Vercel 功能相似，具有较为充足的免费额度 `<br>`- 在国内速度比 Vercel 稳定 | 似乎会抽风，当然可能是当初我没用对（见[记Netlify DNS抽风的处理](/netlify-not-working)） |
|
|||
|
|
| GitHub Pages | - 和 GitHub 高度集成 `<br>`- 自带一个 `<你的用户名>.github.io` 域名 | - 只能部署一个项目 `<br>`- 国内访问慢 |
|
|||
|
|
| Gitee Pages | - 和 GitHub Page 很相似 `<br>`- 国内平台，中文友好，国内速度快 | - 仓库容量限制较紧 `<br>`- 国际化上可能有一点困难（我猜的） |
|
|||
|
|
|
|||
|
|
此外还有 Zeabur，腾讯 Coding Pages，CloudFlare Pages 等，不做介绍了。
|
|||
|
|
|
|||
|
|
我们下面会以 Vercel 为例进行讲解。
|
|||
|
|
|
|||
|
|
> 如果你想使用 GitHub pages 或者 Gitee pages 来省一个域名的话，那么后续的 Twikoo 评论等推荐使用 Netlify 进行部署。
|
|||
|
|
|
|||
|
|
### Vercel 部署项目流程
|
|||
|
|
|
|||
|
|
我们先来简单科普一下，怎么在 Vercel 上部署项目。
|
|||
|
|
|
|||
|
|
#### 注册账号
|
|||
|
|
|
|||
|
|
[这里](https://www.vercel.com)是 Vercel 的官网，我们先注册一个账号，选择用 GitHub 登录，计划选择免费计划（hobby）即可。后面可能会将 Vercel 的 application 整合到你的 GitHub 里面。访问权限推荐使用限制访问需要部署的仓库。后续需要访问其他仓库的时候，只需要在部署选择仓库时，随便打几个字母进行搜索，然后点击详情页的配置 GitHub 即可。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 部署新的项目
|
|||
|
|
|
|||
|
|
注册完成以后，我们会进入你的项目列表，点击右上角的 add new，下拉菜单选择 project。
|
|||
|
|
|
|||
|
|
进入后，选择需要导入的 GitHub 库，如果没有其他部署要求，直接点击 deploy 即可。
|
|||
|
|
|
|||
|
|
然后耐心等待，出现 Congratulations 页面就算成功了。
|
|||
|
|
|
|||
|
|
#### 环境变量
|
|||
|
|
|
|||
|
|
环境变量这个事说起来很复杂，就理解为给项目提供的配置信息就可以了。环境变量的添加在 Environment Variables 下拉栏中，直接填进需要的名称和值就好。
|
|||
|
|
|
|||
|
|
对于已经部署的项目，可以在 Settings-Environment Variables 中添加新的环境变量，然后在 Deployments 中选择最新一次部署右侧的三个点，进行 redeploy（重部署）即可生效。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## IP 地址，域名和 DNS 解析
|
|||
|
|
|
|||
|
|
### IP 地址
|
|||
|
|
|
|||
|
|
OK，场地有了，大家上哪里去找你呢？
|
|||
|
|
|
|||
|
|
在现实世界中，每一个地方都有地址；在网络世界中，地方被服务器、设备等代替，而与之相关的概念就是 IP 地址。
|
|||
|
|
|
|||
|
|
关于 IP 地址大家不需要了解很多，只科普一个问题：公网 IP 和内网 IP。公网 IP 指的是可以在网络任何位置访问的 IP，是公开的；而内网 IP 只能在内网 （比如局域网）中访问。举个栗子：如果我的网站的 IP 在我家的局域网里，如果我在外面想访问这个 IP，那可就难喽，还得搞内网穿透云云。这就好比你的房子外面有一圈围墙，别人进不了。这墙不是你建造的，是地产开发商 （网络服务商，比如联通和移动）建造的。当然，你可以去找服务商，让他们帮你开个门 （给你分配一个公网 IP）, 这个我没试过，不过据说也挺麻烦。这也是上面我建议，买服务器最好还是用大厂的云服务器。
|
|||
|
|
|
|||
|
|
此外还有一个概念叫“端口”，代表服务器、设备分发信息的出口，可以理解为一个街区的不同建筑或者一座楼的不同层这种具体地址。
|
|||
|
|
|
|||
|
|
### 域名
|
|||
|
|
|
|||
|
|
其实有了 IP 之后，理论上我们就可以通过 IP + 端口，在导航（浏览器的地址栏）中直接输入这串地址进行访问了。
|
|||
|
|
|
|||
|
|
那域名又是什么鬼？为什么我们平时很少直接输入 IP + 端口访问网站？
|
|||
|
|
|
|||
|
|
好，想象你想去一个地方，你接收到的地址是：39.987036276383016, 116.30598118567697。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
但假设你接到的是：
|
|||
|
|
|
|||
|
|
中国北京市海淀区颐和园路 5 号 北京大学
|
|||
|
|
|
|||
|
|
这是不是就好多了 ~~(虽然给了这个往往还是找不到)~~？而且也更便于记忆。
|
|||
|
|
|
|||
|
|
IP 和域名的关系就类似于这样. IP 一般都是: `xxx.xx.xxx.xx` 这一串数字，而域名一般是一串自然语言的字符，比如 <https://www.google.com> 。这样不仅易于记忆，而且更有标识性。
|
|||
|
|
|
|||
|
|
域名是有层级的，顶级域名（TLD）是指具有“网站名称+顶级域名”后缀形式的域名，而二级域名 (SLD)就是具有 "网站名称+顶级域名+顶级域名后缀"形式的域名，比如 `xxx.github.io`，再比如复旦大学的官方网站 <https://www.fudan.edu.cn/> 。[^1]
|
|||
|
|
|
|||
|
|
#### 域名后缀推荐
|
|||
|
|
|
|||
|
|
综合来看，我还是推荐 `.com` 域名，其次是 `.org` 和 `.me`。
|
|||
|
|
|
|||
|
|
购买域名可以在国内的域名注册商处购买，例如阿里云、腾讯云、华为云等；也可以在国外的 Dynadot、Namesilo、GoDaddy 购买。如果你有能支付 USD 的账户，可以用[哪煮米](https://nazhumi.com/)等比价网站找一个最合算的网站。
|
|||
|
|
|
|||
|
|
我个人用的是 Dynadot，支持中文和支付宝，价格还算比较合理，WHOIS protection（防止他人查到你购买时的隐私信息）等服务也都有。
|
|||
|
|
|
|||
|
|
[这里](https://www.dynadot.com/zh)是 Dynadot 的中文官网，买域名的过程我就不赘述了。
|
|||
|
|
|
|||
|
|
此外
|
|||
|
|
|
|||
|
|
顺便放一个查域名时的逆天彩蛋：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 备案
|
|||
|
|
|
|||
|
|
我们常常听到备案这个词。备案是个很广泛的概念，主要包括网站备案，域名备案，ICP 备案等。我们通常说的都是 ICP 备案。
|
|||
|
|
|
|||
|
|
ICP 备案是个很复杂的问题，但是如果使用我推荐的配置，那我们就可以省去备案的麻烦了，因为 Vercel，Netlify，CloudFlare 这些都是国外的企业。
|
|||
|
|
|
|||
|
|
## DNS 解析服务
|
|||
|
|
|
|||
|
|
在现实生活中，经纬度和自然语言地址的绑定依赖于约定俗成的规则，而在互联网中则依赖于一种特殊的互联网服务——DNS（Domain Name System，域名系统）解析服务。
|
|||
|
|
|
|||
|
|
关于 DNS 的具体知识我们不多介绍，大家知道这玩意必须得有就完事了。
|
|||
|
|
|
|||
|
|
大部分域名注册商都会提供免费的 DNS 解析服务，但是我更推荐大家使用一个第三方服务—— [CloudFlare](https://www.cloudflare.com)。
|
|||
|
|
|
|||
|
|
Cloudflare 是一家提供全球性网络安全和性能优化服务的科技公司，在互联网服务等领域处于世界领先地位。CloudFlare 提供的 DNS 解析服务非常优秀，更可贵的是这项服务有免费计划，对个人博客来说足足够用。此外，CloudFlare 还为站长和开发者们提供了大量的免费服务，堪称互联网超级大善人。
|
|||
|
|
|
|||
|
|
注册账号之后，进入 CloudFlare 的仪表板（dashboard）界面，在左侧选择网站，点击右侧的添加站点，输入你的域名。
|
|||
|
|
|
|||
|
|
然后会出现一个“更改名称服务器”的提示，把那两串字符复制下来，回到你的域名注册商（我还是以 Dynadot 为例），在账户界面点击我的域名-管理域名，在需要更改的域名那一栏中点击 DNS 设置。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
然后在“服务器”下拉选项中，去掉 Dynadot 默认的域名解析服务器（我记得是有的），选择输入新的名称服务器，将你复制的那两个地址填进去，保存。
|
|||
|
|
|
|||
|
|
然后等一段时间，当 CloudFlare 的仪表板中显示“有效”的时候，就说明域名已经成功被托管到 cf 上了。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
> 一定一定要把所有 CloudFlare DNS 的那个 CDN（橙色云朵）关掉！
|
|||
|
|
|
|||
|
|
### A 记录和 CNAME 记录
|
|||
|
|
|
|||
|
|
这是两种 DNS 记录。简单来说 A 记录就是把域名指向 IP 地址，而 CNAME 记录主要是把一个域名指向另一个域名。
|
|||
|
|
|
|||
|
|
在我们的建站过程中 A 记录一般只需要添加一个（指向 Vercel），CNAME 则一般是用于分发二级域名的。
|
|||
|
|
|
|||
|
|
关于这两种记录的设置可以参考 [Vercel绑定自定义域名 | NotionNext文档 (tangly1024.com)](https://docs.tangly1024.com/article/vercel-domain)。尽管说和我们的项目不同，但是方法基本一样（打字真的太累了 QAQ）。
|
|||
|
|
|
|||
|
|
终于写完了，手都要敲麻了 QAQ。
|
|||
|
|
|
|||
|
|
下一期（主体步骤）可能要鸽不短的时间了，因为我想给大家做个开箱即用的库，可能得等到新电脑到了才方便点。
|
|||
|
|
|
|||
|
|
[^1]: www 是一个特殊的二级域名 ，代表万维网（world wide web）标准网页。由于互联网发展史上的一些习惯，`www.example.com` 和 `example.com` 通常被视为紧密关联的一对域名。例如，`google.com` 会自动跳转到 `www.google.com`，而 `www.github.com` 被设置为跳转到 `github.com`。因此，这里给出的域名严格来说是一个**三级域名**。此外，开头的 `https://` 并不是域名的一部分，它代表网站使用了 SSL/TLS 加密协议，which we will discuss later。
|