Hexo+Github Pages+Vercel搭建博客(详细)
本篇文章主要写一些我搭建这个博客的详细过程以及一些踩坑记录。
持续更新中~~
一、前言
此博客是采用用Hexo博客框架搭建的。Hexo是一个由Node.js驱动的快速,简单且功能强大的静态博客框架。它能快速生成由MarkDown等渲染的文章,总有数百个主题和插件可供使用,并且支持一键部署到Github Pages上。
而本博客就是部署到Github Pages上并用Vercel加速国内访问的(后面会详细说明),采用了Matery主题。
二、准备工作
1. Node.js环境配置
①首先去Node.js官网下载安装程序,一路默认即可(路径可根据自己的需求更改),然后安装。
②测试是否安装成功及环境变量是否正确。在cmd命令行输入:
node -v
查看效果。若出现:则说明环境变量添加完成,进行下一步。如果报错,则需要手动添加环境变量:右击点击我的电脑 -> 属性 -> 高级系统设置 -> 环境变量,在系统变量下找到名为 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:④新建SSH密钥:
⑤添加密钥:
4. 测试是否连成功
- 在
Git Bush
或者cmd
输入ssh -T git@github.com
,如果出现以下语句则说明连接成功:
注意事项:
仓库名称尽量命名为**(example).github.io**(example)为GitHub账户名,方便Hexo部署;
建完仓库后如果分支不是master,则需新建master分支:
点击仓库的Settings,进入Pages:
将默认分支设置为master:
将Page指向master分支后save:
此时以及可以通过:
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:4000
或127.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:
拉到文件最底部,在 deploy 下面添加一个 repo 项:
③部署到GitHub 上。运行以下命令:
# Hexo会根据配置文件渲染出一套静态页面 hexo g # 将上一步渲染出的一系列文件上传至至Github Pages hexo d # 也可以直接输入此命令,直接完成渲染和上传 hexo g -d
至此,已经可以通过
https://<用户名>.github.io
访问博客啦!🎉