使用 Hexo 在 GitHub Pages 上搭建个人博客

523 阅读7分钟

背景

计算机作为一个技术更新迭代速度非常快的行业,只有不断学习才不会被时代抛弃,但是对新技术的学习还有进行积累并输出才可以学习更加透彻,因此每个人都应该有自己的积累和输出方式。

GitHub 提供的 Pags 功能可以用来作为静态博客的展示,因此我们可以借助 GitHub 平台挂载资源,实现个人的静态博客,记录一些日常积累。

创建 GitHub Pages

作为开发或热爱上网的人士,GitHub 是必不可少的网站,可谓是集学习、娱乐、摸鱼、交友于一身的大型社交平台,如果还没有 GitHub 账号的话,那我们就要赶紧注册一个加入进来,xdm 就等你了!

GitHub 注册登录

GitHub 官网地址:github.com/

进行博客搭建要借助 GitHub 为我们提供的仓库服务,并借用 GitHub 的仓库 Pages 功能来实现静态页面的显示,因此需要有一个 GitHub 账号,没有的话就去 GitHub 官网 注册一个账号。

如果 GitHub 网站无法正常打开,可以参考 解决国内 GitHub 访问慢的问题!! 进行处理

初始化 GitHub Pages 仓库

登录 GitHub 账号后,如果想要为 Hexo 进行静态资源托管,则要创建一个名称有格式要求的仓库进行使用,操作步骤如下

  1. 点击新建一个仓库,名称使用 [yournamer].github.io ,初始化一个 readme.md 文件,并完成仓库的创建
  • [yourname] 代表自己 GitHub 账户名称,GitHub Pages 使用的仓库必须是 [yournamer].github.io 格式,其他仓库名称不可用

创建 GitHub 仓库

  1. 进入当前仓库的 Setting 页面,左侧选择 Pages ,右侧展示为 GitHub Pages 页面,在页面中可以对 GitHub Pages 进行配置,可以尝试切换主题,然后点击链接,跳转到 `[yournamer].github.io`` 页面
  • 出现自己仓库的 readme.md 页面信息后表示创建成功

设置 GitHub Pages

GitHub Pages 即 GitHub 提供了用来展示用户个人项目静态资源信息的页面,用户可以使用 GitHub 支持的功能进行修饰静态页面。

参考文档可见官网地址:pages.github.com/

本地安装 Hexo 环境

安装 Node.js 环境并配置国内镜像

GitHub Pages 博客使用 Hexo + GitHub Pages 实现,而 Hexo 博客是基于 node.js 的,因此需要在本地安装 node.js 环境。

  1. 下载安装 node.js 并进行安装,下载地址:node.js 官网node.js 国内下载地址

  2. 下载到本地后,双击应用进行安装,按照默认安装完成并配置本地 node.js 环境变量,具体安装步骤参考:Node.js 安装与配置

  3. 安装完成后,windows 本地打开控制台窗口,使用 node -v 命令查看本地 node.js 版本信息,输出版本信息说明安装成功

node-version

  1. node.js 安装成功后,后续可以使用 npm 命令安装相关模块,由于 node.js 源服务在国外,为了增加 node 资源包下载速度,可以使用国内阿里云镜像下载:npm config set registry https://registry.npm.taobao.org

  2. 设置完成后,可以使用 npm config get registry 命令查看当前资源镜像地址,返回结果如下表示设置成功。

设置 node.js 资源镜像

安装 Git 环境

为了能够在本地与 GitHub 更好的进行文件资源的上传和下载,使用 Git 软件进行操作,需要下载并安装 Git 环境。

  1. 下载与本机系统匹配的 Git 客户端并完成安装,下载地址:git-scm.com/downloads ,安装教程:blog.csdn.net/mukes/artic…

  2. 安装完成后,命令行中使用 git --version 查看到本地 git 版本号,输出版本信息则说明安装成功

git --version

  1. windows 进入文件浏览器任意目录,鼠标右键打开 Git Bash Here 进行本地 Git 信息的配置
    • 使用 git config --global user.name "name" 配置本地用户信息,name 为自定义 git 账户名
    • 使用 git config --global user.email "eamil@xx.com" 配置本地邮箱信息
    • 使用 ssh-keygen -t rsa -C "eamil@xx.com" 命令在本地生成私钥和密钥信息

本地生成密钥

  1. 密钥生成后,在本地 ~/.ssh ,即用户路径的 .ssh 目录下找到 Git 的密钥和公钥 id_rsa.pub 文件

  2. 在 GitHub 个人设置页面,选择左侧 SSH and GPG keys 内容,右侧新增一个 SSH key ,上一步公钥文件内容作为 SSH 密钥添加到 GitHub 中完成 Git 与 GitHub 的授权认证

配置 github ssh key

  1. 远程 GitHub 中添加了本地 SSH 密钥后,使用控制台命令 ssh -T git@github.com 检查是否可以与远程通信,如果出现 Hi... 你的 GitHub 账户名称的内容,说明链接成功

ssh 通信

初始化 Hexo 博客项目

Hexo 项目下载安装

本地 node 等环境准备好后,就可以进行 Hexo 博客的初始化安装,安装过程中使用 Git 控制台工具。

  1. 首先,选择一个本地存放 Hexo 博客文件的位置,如 D:\Blog

  2. 进入到目录中,右键选择 Git Bash Here 打开 Git 命令窗口

  3. 在命令窗口中使用命令 npm i hexo-cli -g 下载安装 Hexo 项目

  4. 安装完成后使用 hexo -v 查看是否成功,输出版本信息说明安装成功

hexo 版本信息

初始化本地 Hexo Blog

安装 Hexo 后,在同目录下初始化博客网站文件,并进行本地运行效果预览。

  1. 仍然是在 Git 控制台窗口中,使用命令 hexo init 初始化 hexo 文件夹

    • 初始化完成后,本地有了 hexo 的目录,之后的操作都在根目录下的 Git 命令窗口中
    • 初始化时可能会报错,要注意是否使用了管理员权限进行操作
  2. 使用命令 npm install 安装必备的组件

  3. 使用命令 hexo g 生成静态网页

  4. 使用 hexo s 打开本地服务器,开启后可在浏览器 localhost:4000/ 查看本地博客效果

hexo 博客页面

  1. 查看完后,可以使用 ctrl + c 退出服务

本地 Hexo 连接远程 GitHub Pages 对应仓库

本地 hexo 安装完成,并在远程 GitHub 新建仓库,之后就可以通过 Git 访问远程 GitHub 仓库,在此之前,还需要最后一步将本地 hexo 和远程仓库进行关联,实现博客的一键部署。

  1. 打开 hexo 目录下的 _config.yml 文件,修改配置内容
# [yourName] 即 GitHub 中的账户名称
# 绑定完成后,可以将本地内容部署到 GitHub 远程仓库中
deploy:
    type: git
    repository: https://github.com/[yourName]/[yourName].github.io
    branch: master
  1. 使用 Git 命令安装 hexo 部署插件;npm install hexo-deployer-git --save

  2. hexo clean 命令清理项目生成文件

  3. hexo g命令重新生成文件

  4. hexo d 命令部署项目到远程仓库

  5. 部署完成后,我们可以通过访问 [yourname].github.io 网址查看博客内容

开放的博客页面

本地博客项目和远程仓库绑定后,就可以将本地文件内容部署到远程,并通过 GitHub Pages 进行网络访问。

对于后续的博客书写,则可以在本地使用 markdown 文档记录内容,并使用 hexo 命令部署到远程仓库中。

创建新的文件

写一篇新的博客时,在 Hexo 博客根目录下,使用 git bash 打开 Git 命令界面,在控制台界面操作

  • hexo new post "title" 新增一篇名为 title 的博客,文件格式为 title.md

  • 本地文章生成在 D:\Blog\source\_posts 目录下,资源文件都会在 source 文件夹下

  • 可以使用本地 markdown 编辑器进行博客内容的书写

博客发布

本地 markdown 文档记录完成后,将文章部署到远程仓库步骤如下:

  1. 使用markdown操作完文件后,使用 hexo g 生成静态网页

  2. 使用 hexo s 可以开启本地服务器,在 localhost:4000/ 预览效果

  3. 使用 hexo d 上传到 GitHub 仓库,并部署博客网站,此时可以使用 [name].github.io 网络地址访问

最后

一个使用 Hexo + GitHub Pages 个人博客就部署成功了,可以用作平时一些工作生活的记录,不断学习积累,厚积而薄发。

个人的 GitHub Pages 地址,欢迎访问指教:shonee.github.io/