面向零基础小白的博客搭建教程

这次主要是想写篇文章介绍一下一个简单的静态博客的搭建过程， 作为运维组授课的补充资料。

嘛，毕竟上次授课的时间和电子部他们冲突了，挺多人听了一半就走了，
而且后面在讲解这部分内容的时候可能也没有具体表达清楚，所以干脆就写一个文字版的教程， 方便对照着参考搭建。（速速来交换友链 😋）

Step1

给你的博客取个名字，并且获取一个属于你自己的域名

这个地方也没有什么好说的，基本上每个人在这块都有自己的想法
不过要注意一下的是：
1）你取得名字要好记
2）域名没有被人提前注册了

什么是域名？

简而言之，域名（Domain Name）是互联网上用来识别和访问网站的一个易于记忆的地址。 这个地址可以通过 dns 服务器指向任何 ip 或者其他域名，有了域名之后，你就不需要去费劲记忆你的服务器的 ip 了。

如何白嫖/购买域名？

首先，如果你之前按照 C++ 组的教程成功申请到了 Github 学生包的话， 那就可以直接申请学生包内免费一年时间的 .live .tech 域名。

如果你比较喜欢其他的域名后缀，也可以自行去域名网站挑选购买，比较常见的域名购买网站有：

  • Namesilo 首选，价格便宜，支持支付宝付款，不需要备案，但是后台管理面板比较简陋
  • GoDaddy 全球最大的域名注册商
  • Dnspod 国内老牌厂家，功能强大，有的后缀需要备案

域名厂家可以自由选择，但基本上域名注册的价格是根据你的域名后缀来的，有的后缀，例如 .xyz .top 会比较便宜， 有的域名，比如说 .io .dev .com 则可能会比较贵，按照你个人的需求自由选择就行。

或者，你也可以使用网上的一些其他免费域名服务，比如说 eu.org 等， 但这类服务一般会有一定的使用风险，说不定哪一天就不能再使用了。各位可以自行权衡。

如何将域名解析到 Cloudflare？

Cloudflare 是世界上最大的 cdn 服务提供商，他家为用户提供了免费且功能非常强大的许多功能，强烈建议把新注册的域名解析到 cf， 再在 cf 的控制面板中更改域名的 dns 设置。

  1. 注册 Cloudflare 账号
  2. 选择添加域
  3. 输入你的域名后选择继续 -> 选择 Free 计划（对于博客来说已经 100% 够用了）
  4. 删除掉域名注册商预留的 dns 记录
  5. 在你的域名注册商处更改 nameserver

cloudflare

由于域名注册商种类繁多，我就把 Cloudflare 关于更改 nameserver 的教程贴到这里，大家可以自行参考。
Cloudflare 的教程

  1. 更改成功后，你就可以愉快的使用 cloudflare 管理你的域名啦！

Step2

选择安装一个静态网站生成器，并且生成你网站的内容。
对于一个简单的个人博客来说，往往不会带有太多的动态的，需要服务器处理的内容， 所以可以直接将你所有的页面生成成一系列静态的 html 网页部署在服务器上，这样既节省了资源，也加快了网站的访问速度。

Hugo 文档中对静态网站生成器好处的解释

安装 Hexo

现在网上有着各种各样的静态页面生成器，例如 hexo hugo jekyll vuepress 等， 你可以自由选择一种作为你的博客的生成工具 （你们前端真恐怖啊）

但是对于本篇教程，我们主要就 Hexo 为例来进行说明。

Hexo 的官方中文文档

  • 安装 nodejs（使用 nvm）
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 22

# verifies the right Node.js version is in the environment
node -v # should print `v22.11.0`

# verifies the right npm version is in the environment
npm -v # should print `10.9.0`

Hint: 安装过程中可能需要自行解决一下网络访问问题

  • 使用 npm 安装 hexo
# 全局安装 hexo
sudo npm install -g hexo-cli
  • 使用 hexo 新建一个博客
# 将 <folder> 替换为你的博客名称/文件夹名称
hexo init <folder>
cd <folder>
# 初始化项目
npm install

初始化后，您的项目文件夹将如下所示：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml 是你的博客的配置文件，你可以在这里修改你博客的相关配置。
themes 文件夹下存放了你的博客的主题文件，如果你想修改博客的主题的话，可以把主题文件放在这个文件夹下。
source 文件夹下存放了你的博客的页面文件，如果你想给你的博客添加页面/文章，就可以在这里进行修改

  • 配置你的博客

说了那么多，不如先把你的博客启动起来看看吧。
先切换到你博客的根目录，然后输入 hexo server 在你的本地启动博客。

console_output

然后按照提示打开 http://localhost:4000 查看你的博客页面。

hexo_blog

可以看出，我们的博客成功启动了 🎉🎉

选择一个主题：
可以看出，我们的博客的默认页面可能还不是非常的美观， 我们可以在主题列表选择一个合适的套用到我们的博客上。

这里以 fluid 主题为例：

首先按照教程下载 github release, 并解压至博客的 themes 文件夹，重命名成 fluid:
此时你的博客的目录结构应该大概是这样子的：

...
themes
└── fluid
    ├── _config.yml
    ├── languages
    ├── layout
    ├── LICENSE
    ├── package.json
    ├── README_en.md
    ├── README.md
    ├── scripts
    └── source

之后我们要更改博客的配置文件让 hexo 使用我们刚刚安装的主题：

# 修改 _config.yml
vim _config.yml

title: Hexo    # 这里填你的博客的标题
subtitle: ''    # 这里填副标题
description: ''   # 这里填对博客的描述
keywords:
author: John Doe     # 这里填作者的信息
language: zh-cn    # 这里填博客的语言，我这里改成了中文，如果你想用英语写博客的话可以改回 en
timezone: 'Asia/Shanghai'   # 这里填时区信息
# 省略了一些内容

url: http://example.com    # 这里改成你的域名

theme: fluid

详细的配置说明可以参考 官方文档

配置完成后，我们可以重新启动一下 hexo 来应用我们的更改。

fluid_site

  • 开始写作把
# 新建一篇文章或一个页面
hexo new post "Hello, SAST"

hexo 此时会提示我们它已经在 source/_posts/Hello-SAST.md 目录下创建了这个 markdown 文件， 我们只要在这个文件里写作即可。

基本的 markdown 语法

当我们写完之后保存， hexo server 会帮我们动态更新博客里的内容，回到刚才的页面刷新，我们就可以看到我们写的内容了。

hello-sast

Step3

部署你的博客
目前为止，我们都还是只在本地运行你的博客，
那么我们该如何把你的博客公布到互联网上，和你的朋友们分享呢？

注意⚠： 你可以任选一个这里的方法部署你的博客，但是你可能需要按照这几种不同方法的教程分别调整你的域名的解析设置。

Github Pages / Cloudflare Pages

免费而且方便的方法，但是可能访问速度会比较慢， Github Pages 似乎也不能被国内搜索引擎检索到， 不过仍然是比较推荐的部署方法之一

将博客部署在 Github Pages

PaaS

选择一个现有的 PaaS 服务部署
由于我们只是一个非常简单的静态网站，所以我们可以任意选择现有的一些 Paas 平台发布。
这些平台既有免费的，也有收费的。比如说 vercel netlify heroku 等等
（Github 学生也包含一些免费额度）

一键部署

S3 储存服务

一些云厂商也提供了将 S3 储存内的文件部署成网页的选项， 如果你正好手头有一个 S3 储存，可以尝试一下这个方案

Linode S3

VPS Server

如果你正好有一个海外的服务器（国内的服务器需要备案），你可以把博客部署在你的服务器上。
ps: 如果实在不想折腾，可以直接问学长白嫖（

上传你的博客文件

rsync, git, rclone 等工具都可以用来同步本地和服务器的文件，
为了方便起见，这里选择使用 rsync
先在 _config.yml 里填入部署配置

deploy:
  type: rsync
  host: <host>    # 服务器主机地址
  user: <user>    # 服务器用户
  root: <root>    # 博客上传至远程服务器的位置
  port: [port]    # 服务器的端口，默认为 22

登入服务器，安装 rsync

sudo apt install rsync

安装完成后，部署本地博客至服务器：

# 安装 hexo 的 rsync 插件
npm install hexo-deployer-rsync --save
# 使用 rsync 方式部署
hexo deploy

配置反代服务器

Hint: 在配置之前，你可能需要将你的域名解析到你的服务器 ip 来让 Caddy 获取一个 ssl 证书

这里以 Caddy 为例：

sudo apt install caddy   # 安装 Caddy
vim Caddyfile
caddy start    # 让 Caddy 在后台运行

Caddyfile 配置：

官方文档

example.com    # 这里填你的域名
    root * /var/www/mysite    # 这里填你博客存放的位置
    file_server

如果一切顺利的话，那么你现在就拥有了一个属于你自己的博客啦 🥳🥳


 

f3rmata

I’m just sittin’ here watching the wheels going round and round.

使用静态网站生成器来做一个简单的博客吧！

By fermata, 2024-11-17

On this page: