Hexo框架(一)：使用Hexo快速搭建个人博客

平时自己也会做很多笔记，把一些学习和开发中的经验心得和踩过的一些坑及解决办法写下来，但是笔记都太多零散，不方便整理成册，而且因为电脑原因还丢失了很多笔记，所以就想写一个博客。

但是之前所使用的一些博客或者记录网站，都不太符合自己的心意，要么广告太多，要么太过繁琐。所以我觉得搭建一个属于自己的博客。

Hexo 是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持 Markdown 格式，有众多优秀插件和主题。本篇使用 Hexo + GitHub Pages 在 windows 系统快速搭建一个免费个人博客。

前期准备工作

安装 Git Bash

安装教程你可以看这里： Git 安装教程

安装 Node.js

安装教程你可以看这里： Node.js 安装教程

配置 Github 仓库

关于 GitHub 注册相关这里就不赘述了。

新建仓库

• 新建一个名为你的用户名.github.io的仓库，如果你的 github 用户名是test，那么你就新建test.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://test.github.io 了.

• 仓库名字必须是：username.github.io，其中username是你的用户名,然后点击 Create repository；

  

• 创建成功：

配置 SSH key

• 回到 GitBash 中，配置 GitHub 账户信息（YourName 和 YourEail 都替换成你自己的）：

• 创建 SSH。

• 在 GitBash 中输入命令(替换成你 GitHub 绑定的邮箱)，回车三次。

  1	ssh-keygen -t rsa -C "youremail@example.com"

• 出现以下界面：

• 找到红框中的路径，用记事本打开id_rsa.pub文件，复制里面的内容。

• 返回 GitHub，打开这个设置：

• 选择 SSH and GPG keys，然后点击 New SSHkey

• 把你复制的记事本的内容填到这里，然后点击 Add SSH key：

• 检查是否成功：

  在GitBash中输入命令：
  
  1
  2
  
  ssh -T git@github.com
  
  
  如果提示:
  
  1
  Are you sure you want to continue connecting (yes/no)?
  
  
  输入：yes。
  
  如果看到这样。说明SSH配置成功！
  

代码编辑器

我选择使用 VSCode，关于代码编辑器相关的东西，这里不再赘述。

使用 Hexo 搭建博客

安装 Hexo

• 1.创建一个文件夹，我们可以命名为 Blog，将这个文件夹在 VSCode 中打开，并打开 VSCode 终端。

• 2.在终端中输入npm install -g hexo 进行全局安装。

• 3.初始化项目：在终端中输入hexo init，初始化完成后项目结构如图：

• 如果文件夹内没有 node_modules 文件夹，我们需要安装一下依赖，输入命令：npm install 进行安装。

• 安装完成后，我们可以运行hexo g

• 然后运行hexo s，即可本地预览博客。

• 浏览器输入 http://localhost:4000/ ，查看效果。出现这个界面，表示成功！

上传到 GitHub

• 首先打开 Blog 根目录下的_config.yml文件，翻到最后进行如下配置(替换你自己的 GitHub 名字)：

1
2
3
4

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

• 在终端执行命令安装一下插件：

1

npm install hexo-deployer-git --save

（我使用了淘宝镜像，所以是 cnpm。与 npm 没有什么区别。）

• 然后我们依次执行一下这 3 个命令
  • hexo clean
  • hexo g
  • hexo d
• 如果在过程中弹出提示要求你输入 GitHub 的账户和密码，输入即可，最后弹出：

• 打开浏览器，输入你的地址： https://YourName.github.io/，即可看到效果。至此博客搭建完毕。

结语

使用 Hexo + GitHub Pages 搭建一个博客的基础工作到这里就完成了，后面将详细介绍如何使用及个性化设置。

相关推荐

2022-02-10

使用GitHub Actions 实现自动化部署和部署到服务器

2020-07-19

给你的博客添加一个收藏页

2020-05-20

Hexo博客添加emoji表情支持

2020-05-20

给文章标题添加一个emoji表情

2020-05-19

NexT版本更新V8.0记录

2020-05-03

sitemeta渐变背景实现