Hexo+github如何搭建博客

前言

博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。

这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。

演示站：晚枫^-博客

博客文章链接：https://white_maple.gitee.io/posts/fef1.html

下面就开始吧~

一、准备博客环境

准备 node 和 git 环境，

首先，安装 NodeJS，因为 Hexo 是基于 Node.js 驱动的一款博客框架,然后，安装 git，一个分布式版本控制系统，用于项目的版本控制管理，作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 Git 教程。

1.1 Node.js的安装与配置

下载地址：https://nodejs.org/en/

根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。

这里我推荐菜鸟教程的Node.js 安装配置这里面很详细！！

安装完成后呢，我们就要去验证有没有安装成功。

首先，win+R，再输入cmd，按Enter进入到我们的控制台，查看node和npm的版 本，看是否安装成功。

按照上图这样输入命令后，如果结果和上图差不多的话（你们下载的版本有可能不一样），就说明已经安装成功了！

假如执行node -v报错的话，那么手动将Node.js的安装路径添加到环境变量中，右击点击我的电脑 ->属性 -> 高级系统设置 -> 环境变量，在系统变量下找到名为path的变量名，如下图：

选中path，或者双击，然后将你node.js的安装路径放在path变量值的最后面，如果添加之前path值最后有 英文的分号，则直接将路径添加进去即可，如果没有，先添加分号，然后点击保存，回到桌面，打开cmd（Win+R），执行node -v，看是否成功。

接下来,由于国内镜像源速度比较慢，一般先安装cnpm淘宝源，选择复制下列一个命令粘到cmd执行

# 查看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
# 另一种方式，编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

安装镜像后，输入下列指令，查看是否安装成功

cnpm -v

​

1.2 Git的安装与配置

同样这里我还是推荐大家去菜鸟教程Git的安装与配置,下载安装后按照下面步骤进行

回到桌面，点击鼠标右键，会出现两个选项Git GUI Here和Git Bash Here，在打开Cmd(Win+R)，分别输入git和git --version，如果出现如下图的情况，即安装成功！

二、Github注册以及Github Pages创建

我推荐一个简书上面的博主写的文章Github注册以及Github Pages创建,根据他的步骤完成Github的注册以及Github Pages后，让我们进入下一环节！！

三、配置Git用户名和邮箱

在桌面点击鼠标右键，点击Git Bash Here，会出现一个界面如下图所示：

然后分别输入下面的两个命令，并回车：

git config --global user.name "此处填写你注册时的用户名"
git config --global user.email "此处填写你注册时的邮箱"
# 一般只要不报错，可以跳过下面寻找.gitconfig文件

然后找到.gitconfig文件，文件存放位置在C:/Users/[username]/.gitconfig（未找到的话，请开启显示隐藏文件的功能），用编辑器打开，看到如下图所示的内容，即配置成功！

四、本地安装hexo静态博客框架以及发布到Github Pages

首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为blogtest的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择Git Bash Here，然后依次输入如下命令，：

# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后，在输入下面的命令
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>
npm install  # 安装博客所需要的依赖文件

等待运行完成，此时文件夹中多了许多文件。

注意：后续的命令均需要在站点目录下（即文件夹内）使用Git Bash运行。

此时Hexo框架的本地搭建已经完成了。我们来运行一下看看，命令行依次输入以下命令 :

hexo g
hexo s

浏览器中打开http://locakhost:4000或者127.0.0.1:4000，可以看到一个网页，说明Hexo博客已经成功在本地运行。

1. 本地博客发布到Github Pages

之前的步骤中，我们已经完成了对Github账户的注册以及Github Pages的创建，接下来是将本地博客发布至Github Pages。

首先需要安装发布的插件，在站点目录下执行下面的命令，也就是创建的博客目录下：

npm install hexo-deployer-git --save

紧接着，将本地目录与GitHub关联起来，输入下面的命令行：

ssh-keygen -t rsa -C "你的邮箱地址"

输入后一直回车，然后在C:/Users/[username]目录下找到名为.ssh的文件夹， 文件夹内会有两个文件，一个id_rsa.pub一个id_rsa，用文本编辑器打开id_rsa.pub，复制里面的的内容。 然后打开Github，点击右上角的头像 Settings 选择SSH and GPG keys

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

然后回到Git的命令行界面，测试一下是否与GitHub连接成功。输入下面的命令行：

ssh -T git@github.com

点击回车，然后会出现一个询问内容，输入yes，回车，会出现一段内容，Hi ! You've successfully authenticated, but GitHub doesnot provide shell access.。 说明连接成功。此处这个``应该是你Github的用户名。

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

title: 你的博客名
subtitle: 博客的副标题，有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者，在文章中显示
language: 博客语言语种
timezone: 时区

滑到文件最底部，有一个deploy，在deploy下面添加一个repo项 ，一个branch项。填入如下代码，并如下图所示：

type: git
repo: git@github.com:Github用户名/github用户名.github.io.git
//也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git
branch: master

最后就是生成页面，并发布至Github Pages，执行如下命令：

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

上传完成后，在浏览器中打开https://<用户名>.github.io，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。

到此，基本的个人博客搭建就完成啦，以为默认的主题不好看，所以后续我会将博客美化教程发出来。

最后，欢迎大家来我的个人博客踩踩哟！

--- 晚枫^-博客 ---