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


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的源改为国内镜像了提高访问和下载速度)

    # 查看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,并分别输入以下命令并回车:

    git config --global user.name "此处填写你Github的用户名"
    git config --global user.email "此处填写你Github的邮箱"
  • ②SSH连接。在桌面点击鼠标右键,点击 Git Bash Here。输入以下代码并一直回车:

    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

  5. 将Page指向master分支后save:

    image-20210413164208605

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

三、开始搭建博客

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

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

    # hexo框架的安装
    npm install -g hexo-cli
    # 等上一个命令完成后,在输入下面的命令
    hexo init example #(新建文件夹的名称)初始化文件夹
    cd example #(新建文件夹的名称)
    npm install  # 安装博客所需要的依赖文件
  • ②执行完毕后进入站点文件夹(example),此时已初始化完成,包含一些文件。右键Git Bush Here,执行以下命令:

    hexo g
    hexo s

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

2. 本地博客部署到GitHub上

  • ①安装部署插件,在站点文件夹(example)中执行;

    npm install hexo-deployer-git --save
  • ②修改配置文件。把_config.yml用代码编辑器(如Vscode)打开,修改站点主要的属性:

    title: 你的博客名
    subtitle: 博客的副标题,有些主题支持
    description: 博客描述
    keywords: 博客关键词
    author: 作者,在文章中显示
    language: 博客语言语种,简体中文为:zh-CN   
    timezone: 时区(可不用填,hexo默认使用电脑时区)

    修改url:image-20210413220354674

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

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

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

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


文章作者: 一袖南烟顾
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 一袖南烟顾 !
评论
  目录