只需一个浏览器的blog搭建教程

Nov 19, 2023

这篇文章旨在介绍一个不在本地电脑安装任何软件、只用浏览器和 GitHub 账号就能完成的博客搭建流程，不涉及原理，都是简略步骤。用到的服务有 Hugo 、Vercel 、GitHub，但都不需要学习软件和命令。完成之后可以得到一个托管在 Vercel 的静态博客。博文为 md 文件，需了解一些 markdown 基本语法。

1 注册 GitHub 账号。

2 用 GitHub 账号登录 Vercel 。

3 在 Vercel 中新建 project，浏览所有 templates 选择 hugo starter 然后 depoly 。

4 连接该 project 至 GitHub 仓库，给仓库命名，这里就叫它 blog-demo。

完成后打开 project 的设置把 environment 值改为 HUGO_VERSION 、 0.120.3。

再编辑 domin ，这里我输入的是 blog-demo-paper ，所以完整地址就会是 https://blog-demo-paper.vercel.app/ 。

5 打开你的 GitHub 账号，进入 blog-demo 仓库，在这个页面用键盘输入 . 进入 web editor 模式。

6 打开 terminal 。

7 浏览 hugo 的 themes 列表，选定想要的主题。这里以 paper 主题为例，浏览主题安装命令。

这里我们用 git submodule 方式安装，在 terminal 里输入 git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper，回车。

8 删除原主题文件夹 themes/ananke。

打开 themes/paper/exampleSite 找到 config. toml 文件，复制文件内容到根目录下的 config.toml 文件。另外把 themes/paper 文件夹里的 layouts、static、assets 这三个文件夹复制到根目录（详细用途后面说）。

9 把 baseurl 和 theme 改成自己的 vercel project domin 和对应主题名称。

完成修改之后在 terminal 内输入 git add .，回车。

10 commit and push。

现在就可以访问了！点击右边的 demo 站试试吧！ https://blog-demo-paper.vercel.app/ 。

11 接下来请仔细阅读选定主题的 readme 文档对 config.toml 进行修改和对博客主题进一步自定义，把 blog 调教到自己想要的样子。从这一步开始我们可以直接在 GitHub 仓库里编辑文件，可以不用 web editor 了。

而进行精细调整主要就是靠步骤 8 复制的这三个文件夹里的内容。

assets：网站 css
layouts ： HTML 模板
static ：静态文件

对于 Hugo blog 的具体结构描述我随便搜了两个讲得比较详细的文章（教程1 ，教程2），理解网站是怎样构成的才好后续修改，这部分属于进阶内容，请自行考虑是否需要学习。

12 发新博文
不想学诸如 git 命令和在本地调试网站的，可以写好 md 文档上传文件到 content/posts 文件夹。更偷懒的方式是直接在网页上选择 Add file – Create new file，路径选择 content/posts 。

另外需要注意的是，所有新的博文都需要有一个 metadata 在文档顶部用来标记一些基本信息，比如标题、日期、tag 等等。Hugo 支持的属性很多，可以在官方文档和主题文档获得更多信息。以我这篇为例，有以下这些：

---
title: 只需一个浏览器的blog搭建教程
date: 2023-11-19T20:58:20-04:00
draft: false
tags:
  - Hugo
  - Github
  - Blog
  - Vercel
categories:
  - Toolbox
comments: true
---

到此你就拥有一个完全在线上操作的 blog 了！

下面是可以忽略的个人闲聊时间。

好几年前我用 hugo 搭过一个生活 blog ，提前看了非常多教程，在本地安装时还是会碰到一些让人头晕的错误。最近想再搭一个 blog 存放学习笔记，却发现在本地电脑上同时处理多个 GitHub 账号没有我想象的那么容易。也发现即使有这么多搭建博客的介绍，却没有一个是可以不依赖本地电脑的（也可能是我关键词搜索的不对？总之所有建站流程开头都说，要安装 hugo 要安装 git 要注意电脑配置环境等等等等），因此自行摸索之后诞生了写这个教程的想法。

后续博客的精装修网络上有很多资料，用“hugo建站教程”+ 你想要的功能关键字搜索有大把结果，我就不再班门弄斧赘述了。