零 楔子

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

偶然间了解到了 Hexo 这个静态博客网站，通过github绑定，无需购买服务器 就可以生成完全属于自己的博客网站（白嫖）。

因为不熟悉前端，我在搭建过程中也经历了许多的坑，现在我将搭建流程分享出来，希望能给你们提供一些帮助。这是我的两个博客网站：gitee.io 和 heeh.xyz，大家可以点开看看搭建好后的效果。

最重要的是它是免费的，里面也有很多插件和博客主题模板，你完全可以根据自己的喜好来设置它的风格。

心动不如行动，现在就开始搭建属于自己的博客吧。有什么问题可以在评论区讨论，觉得有用的兄弟萌可以点个赞😝

一 运行环境准备

本文环境信息：

• win10 + vscode（可以是任意文本编辑器）
• Node.js
• Git
• 修改npm为淘宝镜像源，并设置cnpm

1. 环境的下载只需点开网站找到适合自己的版本安装即可，这里不赘述🍉。
   
2. 安装完毕后可以通过cmd命令行输入node -v,npm -v和git --version来验证，如果出现下图则安装成功。
   

修改npm的镜像源为在国内更为稳定的淘宝镜像源（建议永久设置）

# 临时改变镜像源
 npm --registry=https://registry.npm.taobao.org
 # 永久设置为淘宝镜像源
 npm config set registry https://registry.npm.taobao.org
 # cnpm安装，在国外服务器不佳时就可以用cnpm代替npm命令
 npm install -g cnpm --registry=https://registry.npm.taobao.org

二 Github准备

1. 打开GitHub，登陆你的账号。
   
2. 新建一个格式为你的用户名.github.io的仓库
   
   

• 创建成功后在桌面点击右键，Git Bash Here，打开Git的命令行输入这两行代码：

git config --global user.name "此处填写你注册github时的用户名"
 git config --global user.email "此处填写你注册github时的邮箱"
复制代码

• 然后就可以在C:/Users/[username]/下找到.gitconfig文件（如果没能找到，请打开显示windows显示隐藏文件的功能），用编辑器打开看到以下内容代表配置成功。
  

三 安装Hexo

1. 首先新建一个文件夹👀作为你的博客文件的存放位置，点进去打开Git命令行分别输入：

# hexo框架的安装
  npm install -g hexo-cli
  # 等上一个命令完成后，再输入下面的命令
  hexo init
  # 安装博客所需要的依赖文件
  npm install
复制代码

💥 Tips：Hexo一大好处就是你在安装过程内出现了任何问题，都大可以删掉文件夹重来。 注意后续所有操作都应该在这个文件夹目录下进行~

1. 等待运行完成，你会发现此时文件夹内多了好多文件。此时本地搭建完成，我们来运行一下试试看，输入以下命令：

hexo g
 hexo s

1. 根据提示我们打开 http://localhost:4000 ，就可以看到生成的网页，说明Hexo已经成功在本地运行。

四 发布到Github

我们已经完成了Hexo下载安装和本地运行，接下来将本地博客发布到Github让别人也能通过网址访问你的博客。

1. 在本地文件夹下打开Git命令行，分别输入以下命令

# 安装用来发布的插件
 npm install hexo-deployer-git --save
 # 将本地目录与Github关联起来
 # 这步输入后一直回车即可
 ssh-keygen -t rsa -C "你的邮箱地址"
复制代码

1. 在 C:/Users/[username] 目录下找到名为.ssh 的文件夹，打开其中的 id_rsa.pub，复制里面的的内容。 然后打开 Github，点击右上角的头像 Settings 选择 SSH and GPG keys。
   

点击 New SSH key 将之前复制的内容粘帖到 Key 的框中，Title 可以随意，点击 Add SSH key 完成添加。

• 回到命令行界面测试是否与Github连接成功，输入ssh -T git@github.com，出现一个询问内容输入yes，出现You’ve successfully …说明连接成功。
  

• 进入博客站点目录，用文本编辑器打开_config.yml，这个_config.yml 是博客的配置文件，在以后会经常使用到，修改如下图的几个地方：
  

然后滑到文件最底部deploy处添加如下代码：

type: git
 repo: git@github.com:github用户名/github用户名.github.io.git  
 branch: master

1. 最后一步，生成页面并发布，我们执行如下命令：

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

1. 上传完成后，在浏览器中打开网址 你的github用户名.github.io，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话等一下或按ctrl+f5刷新清除一下浏览器缓存试试。

五 写文章

1. 在博客文件夹的/source/_posts目录下新建或修改md格式的文章，每个文章前都至少添加以下front-matter字段。

---
 title: hexo文章
 date: 2021-08-17 22:25:00
 ---
复制代码

1. 每次上传都应该在命令行输入：

hexo cl
 hexo g -d