Hexo+Github低成本高效搭建个人博客网站

低成本高效搭建个人博客网站

独具慧眼、品味高级又俊俏可爱的灵长类小伙伴们，早上好，中午好，晚上好。如果你是在梦游的时候刷到的也祝你休息好。

这篇文章基于最近一周的搭建过程，之前很少接触前后端相关知识，在基本不进行编程的情况下搭建一个具有美观前端网页，评论系统，免费服务器以及自定义域名的个人网站。简单点说，就是我们穷人自己的高性价比个人网站。

废话不多说，主要使用的工具有：

  • Hexo

  • Github Pages

  • Github Action

  • Namecheap DNS

  • Anzhiyu Theme

  • Twikoo

  • Sublime text

  • Marktext

  • Git

  • Wechat Screenshot

  • Google Search Console

先简单介绍一下用到的工具，主打一个好上手，有手就行。

1. Hexo: Hexo框架是一个基于 Node.js快速、简洁且高效的博客框架。基本就是你负责写写内容，布置布置界面，然后它帮你敲代码把这些内容变成静态的网页。

Hexo 的工作流程如下：

  1. 你在本地使用 Markdown 编写博客文章。
  2. Hexo 将 Markdown 文件和其他资源文件转换为静态网站文件。
  3. 你将生成的静态文件部署到 Web 服务器上。
  4. 访问者可以通过浏览器访问你的博客。

好比网站是你家，你负责online shopping买漆买花买家具，Hexo帮你上门刷墙种花搞安装。

2. Github: 全球最大的同性交友平台（不是），logo是一只喵星人。正经点说，GitHub 是一个基于 Git 版本控制系统的代码托管平台。它提供了在线存储库，开发者可以在此存储、管理、分享和协作开发项目。在这个项目里，可以把它简单理解成一座共享的房子，里面谁都可以住，床单被褥自己带，也可以放自己带的东西，但只能住，不能做饭也不能养宠物。

题外话：啥是静态网站，啥是动态网站呢？

拿之前的房子做比方，静态网站相当于你布置完了你家你就进屋睡觉去了，客人来了就是参观，或者写点小建议房门口的建议箱，等你啥时候睡醒了啥时候看，动态网站相当于你雇了个管家，你只需要告诉管家他都需要干什么，有人来你家参观的时候管家就根据每个人需要的东西，按你吩咐的给他们。静态网站像你买了一个西红柿，一个鸡蛋，客人来了你家只能生吃西红柿和生鸡蛋，动态网站客人吃到的就是西红柿炒鸡蛋，或者番茄梗凉拌鸡蛋壳（客人真是好牙口）。

为什么静态网站托管无法托管动态网站

静态网站托管服务（如 GitHub Pages）的设计初衷是存储和提供静态文件（HTML、CSS、JavaScript 等）。它们没有运行服务器端脚本的能力，无法处理动态内容的生成。

具体来说，当用户访问动态网站时，服务器需要：

  1. 接收请求：获取用户访问的页面地址和其他参数。
  2. 执行脚本：运行服务器端脚本，根据请求和数据生成 HTML 内容。
  3. 返回响应：将生成的 HTML 发送回用户的浏览器。

静态网站托管服务只能完成第 3 步，即返回预先存储的静态文件。它们缺乏执行服务器端脚本的环境和能力，因此无法处理动态网站的请求。

PS：说句题外话，可能也会有不搞代码的盆友有疑惑，我看好多网页里也有一堆javascript，咋就不能执行脚本呢？

静态网站中的 JavaScript

  • 主要在客户端（浏览器）运行。
  • 功能：
    • 增强用户交互：实现页面元素的动态效果，比如：
      • 下拉菜单、轮播图、动画等。
      • 表单验证、实时搜索建议等。
    • 局部更新内容：通过 AJAX 技术，在不刷新整个页面的情况下，从服务器获取数据并更新部分页面内容。
  • 但是：
    • 无法直接访问服务器端数据库或文件系统。
    • 无法执行复杂的服务器端逻辑，如用户认证、数据处理等。
    • 生成的内容本质上还是预先定义好的，只是通过 JavaScript 进行动态展示。

动态网站中的脚本

  • 在服务器端运行。
  • 功能：
    • 处理客户端请求：接收来自浏览器的请求，解析参数等。
    • 访问数据库：从数据库中读取、写入或修改数据。
    • 执行业务逻辑：根据请求和数据，执行相应的业务逻辑，如用户注册、登录、订单处理等。
    • 生成动态内容：根据业务逻辑和数据，动态生成 HTML 页面，并返回给浏览器。
  • 优势：
    • 内容个性化：根据用户身份、行为等，展示不同的内容。
    • 实时交互：实现用户与服务器的实时通信，如聊天室、在线游戏等。
    • 数据驱动：根据数据库中的数据，动态生成图表、报表等。
  • 使用的语言主要有：
    • PHP： 广泛用于 Web 开发，尤其在内容管理系统（如 WordPress）中。
    • Python： 因其简洁易读的语法和强大的库而备受欢迎，常用于 Web 框架（如 Django、Flask）。
    • Ruby： 以其优雅的语法和 Rails 框架而闻名，适用于快速开发 Web 应用。
    • Java： 企业级应用开发的主力语言，也可用于构建复杂的 Web 系统。
    • Node.js： 基于 JavaScript 的服务器端运行环境，允许使用 JavaScript 编写服务器脚本。
    • **C#**： 主要用于 .NET 框架，适用于 Windows 平台上的 Web 开发。
总结下来以下三点：

  • 执行位置：

    • 静态网站中的 JavaScript： 在用户的浏览器中执行，主要用于实现客户端交互效果（如表单验证、动画、动态更新部分内容等）。
    • 动态网站中的服务器脚本： 在服务器上执行，负责生成动态的 HTML 内容，并将其发送给浏览器。

  • 功能：

    • 静态网站中的 JavaScript： 只能操作浏览器中的数据和元素，无法直接访问数据库或执行复杂的服务器端逻辑。
    • 动态网站中的服务器脚本： 能够访问数据库、文件系统和其他服务器资源，实现用户认证、数据处理、内容个性化等功能。

  • 内容生成：

    • 静态网站： HTML 内容在用户访问前就已经生成完毕，每次访问都返回相同的内容。
    • 动态网站： HTML 内容在用户访问时动态生成，每次访问都可能返回不同的内容。

回到正题，Github里主要使用两个功能，一个叫Pages，一个叫Action。

Pages是GitHub 提供的静态网站托管服务，可以直接从 GitHub 仓库发布静态网站。一般来说发布网站需要有一个服务器（可以理解为你的电脑），但是如果用自己的电脑就需要保证每天24个小时高强度持续开机，才可以被其他人访问到。

所以一般会伴随着网站托管服务，但是绝大多数都是要收费的。有些比如Webflow之类也有免费托管的套餐，但是内容限制很严格，只能有一到两个页面。

Github的Pages相当于远程提供一台24小时开机的电脑给你，让别人可以一直访问到你的页面。而且完全免费！完全免费！完全免费！快说谢谢Github。

接下来是Actions，GitHub Actions 是 GitHub 提供的持续集成/持续交付（CI/CD）服务。它允许你自动化构建、测试和部署工作流程。

  • CI（Continuous Integration，持续集成）：频繁地将代码集成到主干，每次集成都会触发自动化的构建和测试，以便尽早发现问题。
  • CD（Continuous Delivery/Deployment，持续交付/部署）：在 CI 的基础上，将构建好的代码自动部署到生产环境或预发布环境，实现快速、可靠的交付。

现在不用着急理解它的意思，后面会看到发布一篇新文章的时候，需要自己手动进行推送，这个相当于让Actions帮你完成了这些重复性的劳动。

3. NameCheap: 人如其名，主要业务是卖Name，特点是Cheap。这里的Name值的就是网站的域名，就像谷歌的域名是google.com，百度是baidu.com，每个域名都是独一无二的，也就有了对应的域名买卖系统，后面会详细展开说。

4. Hexo Theme: Hexo最大的优势之一就是有很多可以直接拿来用并且非常精美的主题，感谢这些默默付出，为开源做贡献的帅哥美女们。这里的Anzhiyu是其中一个，其他类似的还有诸如NEXT, Butterflly等等，详情可以参考 https://hexo.io/themes/

5. Twikoo: Twikoo 是一款轻量、高效的静态网站评论系统。它采用纯静态部署，无需服务器或数据库，只需将 Twikoo 的 JavaScript 文件引入到您的网页中即可使用。Twikoo 的数据存储在评论者本地的浏览器中，通过 Vercel 的 Serverless 函数进行评论的提交和展示。其他类似的静态网站评论系统诸如Giscus（基于Github Discussion），Valine等。

6. Sublime Text和Marktext: 用来编辑Markdown文件，有很多平替，Marktext是开源的，完全免费，Sublime Text也可以算免费，除了偶尔催你交钱但不会强求。

7. Git: Github的基础，是一个版本控制系统，简单理解可以理解为一个超级强化版的ctrl+Z，可以回到之前的任何一个版本。

8. Google Search Console: 微信截图就不说了，这个GSC是用来把你做好的网站收录到Google上，让用google搜索的人可以搜到。同样还有Bing的和百度的，百度的说来话长，对这个方法搭好的个人网站不是很友好。

进入正题！

把大象放进冰箱需要几步？首先要有个冰箱，然后打开冰箱门，把大象放进去再把冰箱门关严实。这个也是一样的道理。

配置Hexo

我们先从搞冰箱开始，这里我们的冰箱就是Hexo，但是在搞HEXO之前先要做一些它的前置库，好比游戏里点技能点，一些高级的技能总有前置技能，这里我们需要的就是Node.js和Git这两个软件：

Node.js — Run JavaScript Everywhere

Git - Downloads

Git前面讲过这里就不赘述，这里提一下Node.js

首先它是一种运行环境，这个时候事多的小可爱们就要问什么是运行环境，运行环境为程序的执行提供了必要的支持，基本上是以下几点，包括：

  • 资源管理：分配内存、管理文件句柄等。
  • 执行引擎：解释或编译程序代码，使其能够在计算机上运行。
  • 标准库：提供各种常用功能的函数和模块，方便开发者使用。
  • 与操作系统的交互：提供访问文件系统、网络等系统资源的接口。

相当于你在厨房做菜，做菜的环境就是锅碗瓢盆煤气灶，锅铲炒勺油烟机。巧妇难为无米之炊，除非这个巧妇是女巫。

一句话描述Node.js的话，它是一种用于构建服务器端应用程序的 JavaScript 运行环境。

它包括以下几个核心组件：

  • V8 引擎：负责将 JavaScript 代码编译成机器码并执行。
  • libuv：提供事件循环和异步 I/O 操作，使得 Node.js 具有高性能和可扩展性。
  • 其他内置模块：提供文件操作、网络通信、加密解密等常用功能。

如果没有 Node.js 运行环境，那么：

  • 无法在服务器端运行 JavaScript 代码：只能在浏览器中执行 JavaScript，限制了 JavaScript 的应用范围。
  • 无法使用 Node.js 提供的丰富功能：无法构建高性能 Web 服务器、后端 API、实时应用程序等。
  • 无法利用 Node.js 生态系统：无法使用 npm 上的大量第三方模块，开发效率会受到影响。

libuv 是 Node.js 区别于其他运行环境的核心部件之一，它提供的事件循环和异步 I/O 操作机制正是 Node.js 高性能和可扩展性的关键所在。

异步 I/O 模型即当发起 I/O 操作时，Node.js 不会等待操作完成，而是将任务交给操作系统处理，同时继续执行其他代码。当 I/O 操作完成后，操作系统会通知 Node.js，Node.js 再通过回调函数处理结果。这种方式避免了线程阻塞，使得 Node.js 能够高效处理大量并发请求。

事件循环（Event Loop）即它不断地检查是否有待处理的事件，如果有，就从事件队列中取出事件并执行相应的回调函数。这种事件驱动的架构使得 Node.js 能够以单线程的方式处理大量并发请求，无需为每个请求创建单独的线程，从而节省了系统资源。

简单说就是用更少的资源做了更多的事情。

都安装完之后，进行一个小小的验证：

windows系统按下windows（小窗户按键）+r 打开运行， 输入cmd进入命令行，mac直接进入终端Terminal。

1
2
3
node -v
npm -v
git -v

一切正常的话会显示它们对应的版本号。

这里的NPM (Node Package Manager) 是 JavaScript 运行时环境 Node.js 的默认包管理器。它主要用于管理 Node.js 项目中的依赖包，同时也提供了一个庞大的公共仓库，开发者可以在其中分享和使用各种 JavaScript 模块。

npm 的主要功能

  • 安装包：使用 npm install 命令从 npm 仓库下载并安装所需的包。npm 仓库中有数百万个开源包，开发者可以方便地使用这些包，避免重复造轮子。
  • 管理依赖：自动处理包之间的依赖关系，确保所有依赖都正确安装。开发者无需手动下载和管理依赖，npm 自动处理依赖关系，大大提高了开发效率。
  • 发布包：将自己开发的包发布到 npm 仓库，供其他开发者使用。npm 提供了一个平台，开发者可以分享自己的代码，与其他开发者交流合作，共同推动 JavaScript 生态系统的发展。
  • 执行脚本：通过 package.json 文件定义脚本，使用 npm run 命令执行各种任务，如构建、测试、部署等。
  • 版本控制：管理包的不同版本，方便升级或回退。

然后搞冰箱！也就是Hexo：

可以使用npm直接安装：

1
npm install hexo-cli -g

也可以使用Git进行安装：

1
git clone https://github.com/hexojs/hexo.git

两个各有好处，npm的主打一个方便，一键安装，冰箱送货安装一条龙。

Git稍微复杂，但是可以

  • 创建一个完整的 Git 仓库，包含 Hexo 的所有源码和历史记录。
  • 灵活可控：你可以切换到不同的分支、查看提交历史、甚至修改源码。

前期可以先选择npm，后面单独在hexo根目录创建一个git仓库。

配置Github仓库

先申请一个github账号，这个如果不会的话可以先随便下几个app走一下注册流程来点手感。登录之后点Create a new repository，仓库名字注意了，一定是和你的用户名一样，后面加.github.io, 比如你的用户名是ikun，那么仓库名就应该是ikun.github.io

仓库类型选公开(Public), 勾选Add a README file. 然后create.

接下来生成并设置SSH keys，这个网上有很多教程，这里简单提一下：

1
ssh-keygen -t rsa -C "邮件地址"

之后一路确认，然后打开C:\Users\用户名，在里面进入.ssh文件，打开id_rsa.pub（可以用之前提到的Sublime text打开，或者记事本也可以），复制里面的代码。

之后在github -> settings -> SSH keys, 新建SSH keys，名字起什么都可以，粘贴代码并创建。之后输入下面代码进行测试：

1
ssh -T git@github.com

搭建并上线博客

在本地新建一个文件夹，右键选择Git Bash here(没有的话需要看一下Git是否正确安装)，Git bash就是一个属于Git的命令行：

1
2
3
4
hexo init
hexo install
hexo generate
hexo static

generate和static分别用来生成网页文件和展示生成的网页，后面可以用：

1
2
hexo g
hexo s

作为替代.

之后打开文件夹里的_config.yml, 删除deploy之后的内容，加入：

1
2
3
  type: git
repository: 
branch: main

之后回到刚刚建好的github repository，就是署了我们大名的那个，选择code，复制链接

粘贴到上面的repository: 后面. 保存，退出。

之后安装Hexo的自动部署工具：

1
npm install hexo-deployer-git --save

之后再hexo g, hexo d, 这里如果之前没有使用过git会要求输入用户名，邮箱，或是在github登录授权，之后输入:

1
hexo deploy #或hexo d

部署到github。这里在做的其实是把本地的文件上传到github（远端），这个时候网页就已经存储在github了，访问github对应的链接时就会读取你的网站并显示。

之后打开_config.yml:

1
2
3
4
5
6
7
8
## Site
title: 标题
subtitle: 副标题
description: 描述
keywords: 关键词
author: 站主
language: 语言 # en 或 zh-CN
timezone: 时区 #填主要城市像Beijing，Shanghai，Chifeng(这个不行)

这个时候在网站输入 你的用户名.github.io大概应该就能看到一个你刚刚设置建立的光秃秃的网页了，Hooray！

然后就是

主题配置

好消息，房子建好了；坏消息，还是个毛坯房。

下面就是装修流程，好消息是Hexo装修很简单，可以把你看到的样板房直接搬到你家。

这里拿@Anzhiyu举例，其他的同理，之前提到的主题文件都有很明确的说明文档，一步步跟着操作就好。

主题安装:

跟之前用Git安装的方式相同：

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

然后参考主题简介 | 安知鱼主题官方文档这里的说明文档按需搭建。

里面有很详细的配置流程，这里主要讲两点：

一个是评论区模块Twikoo，一个是网站验证GSC。

Twikoo需要前往Mongo Atlas申请账号，按照步骤注册后按快速上手 | Twikoo 文档说明一步一步操作即可。

GSC则是前往https://search.google.com/search-console进行注册，按照步骤验证通过即可

最后则是自动部署上传。

Github Action 自动部署

每次hexo写完文章之后一连串的update操作很心累？

看这里：

先去GitHub的Settings->Developer Settings->Personal Access Tokens建一个新Token，选项选repo和workflow，生成的token存到自己的记事本or你平时存密码的地方。之后新建一个repository，随意命名，设为Private。

本地Blog根目录

1
git init

之后在.github文件夹里新建一个YML文件autodeploy.yml

PS：YAML和Markdown：

YML 是 YAML（YAML Ain’t Markup Language）的文件扩展名，YAML 是一种人类可读的数据序列化语言。它通常用于编写配置文件，并在需要存储或传输数据的应用程序中使用。

区别：

  • 用途不同：

    • YML 主要用于数据序列化和配置文件，它可以表示复杂的数据结构，如列表、字典和嵌套结构。
    • Markdown 主要用于文本内容的格式化，它使用简单的标记语法来表示标题、列表、链接、图片等元素。

  • 语法结构不同：

    • YML 使用缩进和冒号来表示数据结构的层次关系和键值对。
    • Markdown 使用特殊字符（如 #、*、[]()）来表示文本格式。

  • 数据表示能力不同：

    • YML 可以表示各种复杂的数据类型，包括字符串、数字、布尔值、列表、字典等。
    • Markdown 主要用于表示文本内容，对复杂数据结构的支持有限。

  • 灵活性不同：

    • YML 具有更强的表达能力，可以表示更复杂的数据结构。
    • Markdown 更专注于文本格式化，语法简单易学。

总结：

  • YML 和 Markdown 都是纯文本格式，常用于静态网站

回到正题，yml文件里可以写这些：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
name: 自动部署
on:
  push:
    branches:
      - main
  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checking Branch
        uses: actions/checkout@v2
        with:
          ref: main

      - name: Install nodejs
        uses: actions/setup-node@v1
        with:
          node-version: "16.x"

      - name: Install Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: Cache Hexo
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: Install Dependencies
        if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
        run: |
          npm install --save

      - name: Generate website
        run: |
          hexo clean
          hexo generate

      - name: Deploy Website
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: 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
          repository-name: #这里填你网站的 用户名/repository名
          branch: main
          folder: public
          commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

未完待续！