通过Hexo和Github Pages搭建个人博客

2021-03-05 09:36:53 # Github

参考文章：超详细Hexo+Github Page搭建技术博客教程【持续更新】

前言

很久以前我就想写个人博客了，所以在上网找了很多的博客方案，发现还是Github Pags最简约，没有花里胡哨的东西，于是搭建了这套方案，下面就是我这套方案的具体实现。

准备环境

因为我使用的Macbook，所以本教程主要针对MacOS用户。如果您使用的是PC的话，可以通过官网安装Git和Node.js，并配置环境变量，详细安装教程请参考Hexo官方文档，以下是安装命令。

#brew通过安装脚本安装
Homebrew    # /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
Git         # brew install git
Node.js     # brew install nodejs

安装完毕后通过如下命令验证是否安装成功。

% git version
git version 2.30.0
% node -v
v14.15.4
% npm -v
7.4.3

安装Hexo

以上程序验证安装好后，通过npm安装Hexo，并初始化Hexo文件

1
2
3

% npm install -g hexo-cli
% mkdir niuyulee_blog # 这里可以写成自己想要设置的文件夹名
% cd niuyulee_blog && npx hexo init

查看文件夹下是否已经已经有安装文件

1
2
3

% ls
_config.landscape.yml	db.json			package-lock.json	public			source
_config.yml		node_modules		package.json		scaffolds		themes

如果执行npx hexo init没有报错的话，就可以执行npx hexo s访问浏览器链接http://localhost:4000验证是否搭建成功，如果有hexo默认页面的话就继续向下看吧

登陆Github并创建博客仓库

登陆GitHub，点击个人头像 > Your profile，进入个人资料，新建名为<username>.github.io的仓库。

注：仓库名必须为<username>.github.io

因为我这里已经创建过niuyulee.github.io，所以会报错，如果是大家创建的<username>.github.io，会显示一个✅，则表示检测成功，点击页面最下端的Create repository创建完毕。

配置 SSH key

全局配置本地用户并新建SSH key。

1
2
3

% git config --global user.name "用户名"
% git config --global user.email "邮箱地址"
% ssh-keygen -t rsa -C '上面的邮箱'

按照提示回车3次，生成SSH key。通过cat ~/.ssh/id_rsa.pub查看文件内容，获取刚刚创建的SSH key。

1
2

% cat ~/.ssh/id_rsa.pub
ssh-rsa AAAAB3xxxxxxxxxxxxxhwoehqoheiofqowfoiwhoiaodighoaihfgoidhfoihiofxxxxxOe6PkoB8h0Ji7KHdQrXQH9FVN081+96NsOGZEFUrjHXTxWc9B6DVpuWzv9KG1YI6u9ZfKtWcUvV4dxY6GqnvbSfHAFf6CtRpCOaQcQvE= niuyulee@gmail.com

然后打开Github绑定本地创建的SSH key。点击个人头像 > Settings > SSH and GPG Keys，点击New SSH key，Title这里可以随便写，Key填写刚才查看的pub，再点击Add SSH key创建完毕。

部署到 Github

此时基本要安装及设置的东西都好了，接下来我们还要设置下Hexo中的仓库地址。
首先打开Hexo目录下的_config.yml 配置文，跳转至文件末尾，填写如下配置并保存。

% vim niuyulee_blog/_config.yml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
    github: https://github.com/NIUYULEE/niuyulee.github.io.git  
    # 这里为您创建的https://github.com/username/<username>.github.io
  branch: master

然后安装Hexo插件hexo-deployer-git。

1	% npm install hexo-deployer-git --save

最后执行以下命令部署上传，g 是 generate 缩写，d 是 deploy 缩写。

1	% npx hexo g -d

上传完毕后打开浏览器访问https://<username>.github.io即可看到您部署的Hexo个人博客。

编写您的第一篇文章

您可以执行hexo new <title>来创建一篇新文章或者新的页面

1
2
3

% hexo new '通过Hexo和Github Pages搭建个人博客'
INFO  Validating config
INFO  Created: ~/niuyulee_blog/source/_posts/通过Hexo和Github-Pages搭建个人博客.md

然后打开该markdown文件进行编辑，详细的文档参数请参考写作｜Hexo，markdown语法请参考Markdown 入门参考。

注：可以先执行hexo s运行本地项目，然后编写文章的同时访问localhost:4000查看最后应用于Github Pages的页面，通过cmd + r刷新缓存。

---
title: 通过Hexo和Github Pages搭建个人博客
date: 2021-03-05 09:36:53
tags:
  - Github
---

# 前言
很久以前我就想写个人博客了，所以在上网找了很多的博客方案，发现还是Github Pags最简约，没有花里胡哨的东西，于是搭建了这套方案，下面就是我这套方案的具体实现。

# 准备环境
···
···
···

最后写完没有问题后，再次上传您刚才编写的markdown页面。

1	% npx hexo g -d

大功告成

访问https://<username>.github.io查看您刚才编写的文章，开一瓶肥宅快乐水庆祝一下吧～

2021-03-05 09:36:53 # Github