windows平台利用hexo框架与github搭建个人博客

总体搭建步骤

• 1.安装Node.js
• 2.注册GitHub账号及安装git
• 3.安装hexo
• 4.hexo初始化及GitHub创建个人仓库
• 5.将hexo部署到GitHub上
• 6.更改主题
• 7.发布文章

 

1.安装Node.js

Hexo是基于Node.js编写的，所以需要安装一下Node.js和里面的npm工具。

npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。

百度搜索Node.js，在它的官网里下载，选下面这个，一步一步默认安装即可，安装位置可自行更改。

 安装完之后win+R输入cmd打开命令窗口：

检测node安装是否成功：

node -v    （返回版本号）

npm -v     （返回版本号）

 

2.注册GitHub账号及安装git

在GitHub官网上创建一个账号，可以先了解一下基本知识：https://blog.csdn.net/weixin_41413511/article/details/105073305

git安装：https://www.cnblogs.com/xueweisuoyong/p/11914045.html

git配置：https://zhuanlan.zhihu.com/p/114068278

注意在配置的最后一步，验证git与GitHub连接的时候，在git bash中输入

ssh -T git@github.com

如果是第一次连接，它会显示如下，输入yes就好了，就会提示You've successfully authenticated，这样就算配置好了：

 

 3.安装hexo

首先需要用npm来安装一下cnpm（类似于npm的包管理工具），用淘宝的镜像源（如果错误就重来，因为连接可能不稳定，不要害怕多试几次就可以了）。

npm install -g cnpm --registry=https://registry.npm.taobao.org

git bash中检测   cnpm

（返回cnpm的信息）

cnpm -v

（返回cnpm的版本信息）

 

安装hexo（如果失败重新来过就可以了）

cnpm install -g hexo-cli

git bash中检测    hexo -v

（返回hexo的版本信息）

 

 

4.hexo初始化及GitHub创建个人仓库

在本地任选一位置建立blog文件夹，建议不要在C盘（如果在以后的操作过程中出现问题无法解决就把这个文件夹删掉直接重新来过就可以了）

 

 

 在此文件夹下右键打开git bash

 

 

 hexo进行初始化

hexo init

启动 hexo

hexo g
hexo s

http://localhost:4000

这样就可以在本地4000端口查看自己的网站了

 

 

5.将hexo部署到GitHub上

首先在github中按照  自己的昵称+.github.io 建立一个仓库（repository）（例：MangoRed.github.io）

 注意：如果命名不正确的话，后面网站页面可能会出现404。

接下来在Blog目录下安装一个hexo部署插件，同样在blog文件夹的git bash里输入

cnpm install --save hexo-deployer-git

再找到Blog文件中的   _config.yml  文件，使用编译器或记事本打开，找到如下

 

找到这部分代码，（原始的是没有repo，和branch的，而且type后面也没有东西）

对这段代码进行更改

type    一个名字，建议写成git方便识别

repo    repository仓库地址   将刚刚新建的github仓库地址复制到这里就可以了

branch  分支这里设置管理员  master

 

 

 注意：在你建立好仓库后，选择SSH，将后面的地址复制作为repo 的东西。

更改以后记得进行保存

然后在Git bash里面输入     

hexo g          //生成静态文章

hexo d        //部署文章

 将本地文件部署到github新建的仓库中。

这样通过访问     https://+自己的仓库名   就可以访问部署到github上的blog了。（例：https://MangoRed.github.io）

 

 6.更改主题

主题可以在hexo官网里themes选项找到，根据自己喜好选择

 

 

 这里选择fluid主题，点击进入它的GitHub界面后，如下根据提示下载最新版本

 

 在Blog文件夹的theme里解压，把解压后的文件改名为fluid

 必须如下修改Blog目录下的 _config.yml，这里原来是默认主题landscape，要改为fluid。

 然后在Blog目录的git bash里进行主题更新：

hexo clean            //清除数据库之类
hexo g               //生成静态网站
hexo d               //将现在的文件部署到github中

然后我们重新打开博客网址，会发现主题已经更改了：