如何搭建免费的个人博客

date
Aug 7, 2022
slug
two-ways-to-build-a-personal-blog
status
Published
tags
Tips
summary
搭建个人博客的两种方式
type
Post
Created Time
Oct 28, 2023 01:45 PM
Updated Time
Oct 28, 2023 01:45 PM
AI summary
Status
学习的过程就是一个输入到输出的过程，一开始，我只是漫无目的的走在沙滩上，偶尔拾起一块美丽的贝壳，把它塞进自己的口袋里，一个陌生人满脸笑意的向我走来，询问“你在干什么？”，我说“我在拾贝壳”，他欢欣鼓舞地说“我也是”，我们向彼此展示了自己的收获，我开始发现，分享的过程和收集一样快乐。
我曾经尝试过两种搭建个人博客的方式，分别是
  1. 用 Hugo 构建 GitHub Pages；
  1. 使用 Nobelium + Vercel 把 Notion 变为博客；
目前我最喜欢是第二种。

用 Hugo 构建 GitHub Pages

用 Hugo 构建 Github Pages 的过程分为三步，分别为：
  1. 安装依赖；
  1. 创建 Github Pages；
  1. 用 Hugo “重构” 你的 Github Pages；

安装依赖

推荐使用 brew 进行安装
当然，官网也有其他安装方式。

创建 GitHub Pages

首先，你需要一个 GihHub 账号，这没什么好说的，接着，按照以下步骤，创建你的 GitHub Pages：
  1. 新建仓库：仓库名格式须符合正则表达式 /**.github.io/，切记勾选 Add a README file。
  1. 设置主题：点击 Settings 进入设置页面，点击 Pages，进入 GitHub Pages，选择 master 分支，点击按钮 Change theme，选择一个临时主题（这很重要），如果你有自己的域名，也可以在自定义域名处填写自己的域名，点击Save。
看到 Your site is published at https://*** 了吗？稍等片刻后，你可以就可以看到自己的 GitHub Pages 了。

用 Hugo "重构"你的 GitHub Pages

作为一个有追求的人，官方简单的主题显然不能满足我们的需求，作为一个不重复造轮子的懒人（智者），推荐使用 Hugo，遵循以下步骤：
  1. 使用下面的命令新建一个 Hugo 网站；
    1. 进入目录，创建 theme目录。
      1. 进入 themes 目录，克隆 Hugo Themes。
        1. 编辑配置文件 config.yml ，具体参考主题页面上的说明。
        1. 本地预览，实时编辑。
          1. 打包。
            1. 将 public 目录下的内容拷贝到你的 *.github.io 仓库下，git push 提交观赏效果。
            1. 最后，新增一篇文章的常用命令一般是 hugo new posts/<filename>.md ，但是不同主题会有不同，比如，我使用的这个主题就是使用 hugo new posts/<filename>.md 命令。

            使用 Nobelium + Vercel 把 Notion 变为博客

            构建的过程也分为三步，分别为：
            1. 拥有你自己的 Nobelium；
            1. 复制 NOBELIUM Template 至你的 notion 账户；
            1. 使用 Vercel 部署你的服务；

            拥有你自己的 Nobelium

            Nobelium 是一个使用 NextJS + Notion API 实现的，部署在 Vercel 上的静态博客系统。为 Notion 和所有创作者设计。
            简单来说，这个过程就是“拿来主义”。进入 Nobelium 项目的仓库，点击右上角的 Fork 按钮。短暂的等待后，你就能在自己的 Repositories 里面看到一个 forked from 原仓库的新仓库，接下来，修改仓库中其中的一些内容。
            • 修改 /blog.config.js 文件：
              • title：博客名称
              • author：作者名称
              • email：需要首先 Gravtar 里设置头像，之后才能通过 email 地址获取到设置的头像。
              • link：博客链接，你的 notion 的域名
              • description：博客描述
              • lang：可切换博客的语言（en-US 为英语，zh-CN 为中文）
              • postsPerPage：每页展示的博客数量
            • 修改 /lib/lang.js
              • NAV：导航栏中展示的内容
            • 修改 /components/Header.js
              • <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg> 标签下的内容，就是首页左上角的图标，你可以替换为自己的 svg，这里推荐使用 Figma 进行制作。

            复制 NOBELIUM Template 至你的 notion 账户；

            首先去 Notion 的官网创建一个自己的账户，之后打开这个项目的 Notion 模板 按下右上角的 Duplicate 按钮复制整个模板到自己的账户下。最后你就能在左侧的导航栏里面看到自己账户下已经有一个模板了。
            接着你需要做的是把这个页面分享出去，只有这样，后面我们部署的 Nobelium 项目才能拉取到其中的内容。

            使用 Vercel 部署你的服务；

            在 Vercel 的官网注册一个账户，你可以直接使用 Github 账户登录，只需要授权给 Vercel 即可。
            接着，将你刚刚修改过的 Nobelium 仓库 Import 至 Vercel，填写 Environment Variables，其中 NAME 为 NOTION_PAGE_ID ，VALUE 为下面的红色内容 notion web link 中主域之后， /v=? 之前的内容。类似于 04b4f39135f844ae927dc8baf98a9ece。
            最后，点击部署，等待部署完成。

            自定义域名

            如果你自己的域名，可以在 Vercel Project 的 Settings > Domains 中添加域名。

            最后

            使用 Notion 做为博客的最大好处是不用重复部署，即一次部署，终身使用，你所要做的，就是专注于自己的创作，而 notion，会帮助你保存你拾起的所有“贝壳”，对于我这样使用 notion 作为自己主力笔记软件的人来说，可以说是非常方便了。
             
             
             

            © 孙东辉 2022 - 2024