这是第一篇文章，也是这个网站的起点。

零成本从零开始搭建自己的博客

作为现在或者即将从事互联网的工作人员，拥有一个自己的网站作为“错题本”是非常重要的，而受限于费用等原因，我也一度望而却步，但就在最近我了解了搭建个人博客可以实现0成本错题本。

如何使用 GitHub 和 Hexo 搭建个人博客

如果你想拥有一个免费、稳定、快速、个性化的个人博客，那么使用 GitHub 和 Hexo 搭建静态博客网站是一个不错的选择。本文将详细介绍如何从零开始，一步一步地完成这个过程。

GitHub Pages 是什么？

GitHub Pages 是由 GitHub 官方提供的一种免费的静态站点托管服务，让我们可以在 GitHub 仓库里托管和发布自己的静态网站页面。我们只需要将网站的源代码推送到 GitHub，就可以通过一个专属的网址访问我们的网站。

Hexo 是什么？

Hexo 是一个快速、简洁且高效的静态博客框架，它基于 Node.js 运行，可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。Hexo 还提供了丰富的主题和插件，让我们可以轻松地定制和美化我们的博客。

Hexo + GitHub Pages 文章发布原理

在本地撰写 Markdown 格式文章后，通过 Hexo 解析文档，渲染生成具有主题样式的 HTML 静态网页，再推送到 GitHub 上完成博文的发布。

准备工作

在开始搭建博客之前，我们需要准备以下几个东西：

  • 一个 GitHub 账户，用于创建和管理博客仓库
  • Node.js 和 npm，用于运行和安装 Hexo
  • Git，用于版本控制和部署博客- 一个文本编辑器，用于编写和修改博客文件

步骤一：注册 GitHub 账户并创建博客仓库

首先，我们需要注册一个 GitHub 账户，如果你已经有了，可以跳过这一步。然后，我们需要创建一个专门用于托管博客的仓库，仓库的名字必须是 用户名.github.io，其中 用户名 是你的 GitHub 用户名。例如，我的 GitHub 用户名是 cxzcanying，那么我的仓库名就是 cxzcanying.github.io。创建仓库的时候，我们可以勾选 “Initialize this repository with a README” 选项，这样就会自动生成一个 README.md 文件，用于介绍我们的仓库。创建完成后，我们就可以通过 https://用户名.github.io 的网址访问我们的博客了，当然现在还是空白的，因为我们还没有上传任何内容。

步骤二：安装 Node.js、npm 和 Git

接下来，我们需要安装 Node.js、npm 和 Git，这些都是搭建博客所必需的工具。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它可以让我们在服务器端执行 JavaScript 代码。npm 是 Node.js 的包管理器，它可以让我们安装和管理各种 JavaScript 库和工具。Git 是一个分布式版本控制系统，它可以让我们管理和追踪我们的代码变化，并且与 GitHub 进行协作和部署。我们可以从官网下载并安装 Node.js 和 Git，安装过程比较简单，一路按照提示进行即可。- Node.js 官网- Git 官网安装完成后，我们可以打开命令行窗口，输入以下命令，检查是否安装成功：

1
2
3
node -v                          # 查看 Node.js 版本
npm -v                               # 查看 npm 版本
git --version                        # 查看 Git 版本

如果能够正常显示版本号，说明安装成功。

步骤三：配置 Git 和生成 SSH 密钥

在使用 Git 之前，我们需要先配置一下我们的用户名和邮箱，这些信息会在我们提交代码的时候显示，用于标识我们的身份。我们可以在命令行窗口输入以下命令，将 用户名 和 邮箱 替换为我们的 GitHub 账户名和绑定的邮箱：

1
2
git config --global user.name "用户名"
git config --global user.email "邮箱"

然后，我们需要生成一个 SSH 密钥，用于与 GitHub 进行安全的通信。SSH 密钥是一种非对称加密的方式，它可以让我们在不输入密码的情况下，使用 Git 将代码推送到 GitHub。我们可以在命令行窗口输入以下命令，将 邮箱 替换为我们的 GitHub 邮箱，然后一路按回车键，直到生成密钥：

1
ssh-keygen -t rsa -C "邮箱"

生成密钥后，我们需要将公钥添加到 GitHub 上，以便 GitHub 能够识别我们的身份。我们可以在我们的电脑上找到公钥文件，它的路径一般是 C:\Users\用户名\.ssh\id_rsa.pub，我们可以用记事本打开它，复制里面的内容。然后，我们可以登录 GitHub，进入 Settings 页面，选择左边栏的 SSH and GPG keys，点击 New SSH key。Title 随便取个名字，粘贴复制的公钥内容到 Key 中，点击 Add SSH key 完成添加。最后，我们可以在命令行窗口输入以下命令，验证是否连接成功：

1
ashssh -T git@github.com

如果出现 “Are you sure you want to continue connecting (yes/no)?” 的提示，输入 yes 回车确认。如果出现 “Hi 用户名! You’ve successfully authenticated, but GitHub does not provide shell access.” 的消息，说明连接成功。

步骤四：安装和初始化 Hexo

现在，我们已经准备好了所有的工具，接下来就是安装和初始化 Hexo 了。首先，我们需要在我们的电脑上新建一个文件夹，用来存放 Hexo 的程序文件，比如我们可以新建一个叫做 Hexo-Blog 的文件夹。然后，我们可以在该文件夹下右键，选择 Git Bash Here，打开一个命令行窗口，输入以下命令，使用 npm 一键安装 Hexo：

1
npm install -g hexo-cli

安装完成后，我们可以输入以下命令，初始化并安装 Hexo 所需的组件：

1
2
3
hexo init                                         # 初始化

npm install                                       # 安装组件

完成后，我们可以输入以下命令，启动本地服务器，预览我们的博客：

1
2
3
hexo g                                            # 生成页面

hexo s                                            # 启动预览

然后，我们可以访问 http://localhost:4000，看到 Hexo 的默认页面，说明本地博客安装成功。

步骤五：部署 Hexo 到 GitHub Pages

本地博客测试成功后，我们就可以将它上传到 GitHub，进行部署，使其能够在网络上访问。首先，我们需要安装一个叫做 hexo-deployer-git 的插件，它可以帮助我们将博客部署到 GitHub 上。我们可以在命令行窗口输入以下命令，安装该插件：

1
npm install hexo-deployer-git --save

然后，我们需要修改 Hexo 的配置文件，即_config.yml 文件，它位于 Hexo-Blog 文件夹下，我们可以用文本编辑器打开它，找到末尾的 Deployment 部分，
修改markdowndeploy 配置项如下：

1
2
3
4
5
yaml
deploy:  
type: git  
repo: git@github.com:用户名/用户名.github.io.git
branch: main

其中，type 表示部署的类型，repo 表示部署的仓库地址，branch 表示部署的分支名。注意，GitHub Pages 默认使用 main 分支作为博客的源代码，所以我们需要将 branch 设置为 main。最后，我们可以在网站文件根目录空白处右键选择在Git Bash中打开，然后输入以下命令，将博客部署到 GitHub 上：

1
hexo d  # 部署

部署完成后，我们可以访问 https://用户名.github.io，看到我们的博客已经成功上线了。

Q&A（我在建站过程中遇到的问题及解决方法）

  1. 如何检索到的教程

    A：知乎，谷歌搜索第一个即是。

  2. Github无法进去

    A：挂加速器，这里我推荐Watt Toolkit，简单方便，关键是免费。

  3. Hexo使用npm下载命令无反应

    A：无反应说明在下载，下载过程比较久，请耐心等待，若显示网络问题请换淘宝镜像

    1
    2
    3
    npm config set registry https://registry.npm.taobao.org/  #更换淘宝镜像
    npm config set registry https://registry.npmjs.org        #更换官方镜像
    npm config get registry                                   #查看当前镜像

  4. 通过hexo d显示spawn error

    A：这个问题我试了很多次，怀疑是网络问题，于是用了小蓝猫，发现还是不行，最后发现要在hexo d前面输入hexo g就不会出现此错误，即每次推送此网页都要按照如下代码顺序进行

    1
    2
    3
    4
    hexo clean                                # 清空本地缓存
    hexo g                                    # 生成页面html
    hexo s                                    # 生成本地界面（可省略）
    hexo d                                    # 推送本地网页到Github

    如果多次尝试之后还是无解则进入Github主页，点击个人头像，选择Settings,进入设置界面，往下滑找到Danger Zone,找到Change repository visibility，点击Change visibility，选择Change to public保存设置后再次推送即可，

    PS：由于本人网络原因，推送过程需要两遍。

  5. 本地网页生成错误

    A：由于网上教程与最新版指令略有不同，在主目录_config.yml文件里的Branch改成main而不是master

以上就是本文的全部内容了，希望对你有所帮助。

关于无后端评论管理（Valine），主题更换等教程后续会加入博客

__END__