Hexo+Github Pages+Vercel搭建博客(详细)

本篇文章主要写一些我搭建这个博客的详细过程以及一些踩坑记录。

持续更新中~~

一、前言

此博客是采用用Hexo博客框架搭建的。Hexo是一个由Node.js驱动的快速，简单且功能强大的静态博客框架。它能快速生成由MarkDown等渲染的文章，总有数百个主题和插件可供使用，并且支持一键部署到Github Pages上。
而本博客就是部署到Github Pages上并用Vercel加速国内访问的(后面会详细说明)，采用了Matery主题。

二、准备工作

1. Node.js环境配置

  • ①首先去Node.js官网下载安装程序，一路默认即可(路径可根据自己的需求更改)，然后安装。

  • ②测试是否安装成功及环境变量是否正确。在cmd命令行输入：node -v查看效果。若出现：

    image-20210413160808990

    则说明环境变量添加完成，进行下一步。如果报错，则需要手动添加环境变量：右击点击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量，在系统变量下找到名为 path 的变量名，双击Path，点击添加，将node.js的安装复制进去即可。

  • ③改npm的源(将npm的源改为国内镜像了提高访问和下载速度)

    1
    2
    3
    4
    5
    6
    7
    8
    # 查看npm的配置
    npm config list
    # 默认源
    npm config set registry https://registry.npmjs.org
    # 临时改变镜像源
    npm --registry=https://registry.npm.taobao.org
    # 永久设置为淘宝镜像源
    npm config set registry https://registry.npm.taobao.org

2.Git的安装及配置

  • ①首先去Git官网下载安装程序，一路默认Next(有特殊需求可改一些配置)，安装。
  • ②安装完成后右键桌面会出现两个和Git相关的选项，表示安装成功。

3.Git连接Github以及配置SSH连接

  • ①Git账户邮箱配置。在桌面点击鼠标右键，点击 Git Bash Here，并分别输入以下命令并回车：

    1
    2
    git config --global user.name "此处填写你Github的用户名"
    git config --global user.email "此处填写你Github的邮箱"

  • ②SSH连接。在桌面点击鼠标右键，点击 Git Bash Here。输入以下代码并一直回车：

    1
    ssh-keygen -t rsa -C “your_email@example.com” # 引号里填你的Github注册邮箱

  • ③提交SSH私钥。在 C:/Users/[Windows用户名] 目录下找到名为.ssh 的文件夹，找到并用记事本打开id_rsa.pub，复制里面的内容。然后到GitHub上点击右上角头像，进入settings：

    image-20210413161348594

  • ④新建SSH密钥：

    image-20210413161538670

  • ⑤添加密钥：image-20210413161824201

4. 测试是否连成功

  • 在Git Bush或者cmd输入ssh -T git@github.com，如果出现以下语句则说明连接成功：image-20210413180723039

注意事项：

  1. 仓库名称尽量命名为(example).github.io(example)为GitHub账户名，方便Hexo部署；

  2. 建完仓库后如果分支不是master，则需新建master分支：

    image-20210413164650054

  3. 点击仓库的Settings，进入Pages：

    image-20210413164208605

  4. 将默认分支设置为master：

    image-20210413165433792

  1. 将Page指向master分支后save：

    image-20210413164208605

  2. 此时以及可以通过：https://example.github.io(example为GitHub用户名)访问网页了，如果有readme文档则显示readme文档内容，否则显示404 File not found:joy:。至此，GitHub Pages页面创建完成。

三、开始搭建博客

1.建立本地博客站点文件夹

  • ①选定一个磁盘，新建文件夹（如：example），在该文件夹所在目录（不是example文件夹里）右键Git Bush Here,然后依次输入以下命令并等待执行完毕：

    1
    2
    3
    4
    5
    6
    # hexo框架的安装
    npm install -g hexo-cli
    # 等上一个命令完成后，在输入下面的命令
    hexo init example #（新建文件夹的名称）初始化文件夹
    cd example #（新建文件夹的名称）
    npm install  # 安装博客所需要的依赖文件

  • ②执行完毕后进入站点文件夹（example），此时已初始化完成，包含一些文件。右键Git Bush Here,执行以下命令：

    1
    2
    hexo g
    hexo s

    然后打开浏览器，输入：http://localhost:4000或127.0.0.1:4000即可看到博客在本地的运行。

2. 本地博客部署到GitHub上

  • ①安装部署插件，在站点文件夹（example）中执行；

    1
    npm install hexo-deployer-git --save

  • ②修改配置文件。把_config.yml用代码编辑器（如Vscode）打开，修改站点主要的属性：

    1
    2
    3
    4
    5
    6
    7
    title: 你的博客名
    subtitle: 博客的副标题，有些主题支持
    description: 博客描述
    keywords: 博客关键词
    author: 作者，在文章中显示
    language: 博客语言语种，简体中文为：zh-CN   
    timezone: 时区（可不用填，hexo默认使用电脑时区）

    修改url：image-20210413220354674

    拉到文件最底部，在 deploy 下面添加一个 repo 项：image-20210413220753293

  • ③部署到GitHub 上。运行以下命令：

    1
    2
    3
    4
    5
    6
    # Hexo会根据配置文件渲染出一套静态页面
    hexo g
    # 将上一步渲染出的一系列文件上传至至Github Pages
    hexo d
    # 也可以直接输入此命令，直接完成渲染和上传
    hexo g -d

    至此，已经可以通过https://<用户名>.github.io访问博客啦！:tada: