搭建基于Github的Hexo博客

发表于 更新于

首先感谢codesheep（B站up）的视频指导

本流程是windows下完成的，在实现过程中碰到了一些问题，使用了别人的解决方法，所以这篇博客是个自我学习总结

一开始是用cmd窗口输入命令的，然后发现用Git Bash更好（之前学过linux的命令语言），所以建议安装Git Bash之后，在Git里面操作（安装完成后，先完成6.4的配置再从头看）

1.首先下载Node.js

网址：Node 下载LTS版本

直接全部点next（自己修改下安装路径），然后完成安装

检查安装结果：打开Git Bash 输入命令

1
2
node -v ##检查node安装的版本
npm -v  ##检查npm（node package manager）安装的版本

1

npm(node安装完自带的)是用来安装之后所需包的工具(基于Node.js的javascript代码包管理工具)

如果下载是.msi格式的安装包，，那么Node会自动在系统变量path中添加安装路径（如果变量添加成功，则上面查node版本肯定可以成功）

3

4

2.Node环境配置

配置目标：npm安装的全局模块的路径、缓存cache的路径（将npm安装的东西，放到Node的安装路径，统一管理）

环境配置的理由：在执行类似：npm install -g XXXX （后面的参数-g，代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中（因为用户变量Path内，node默认配置了C:\Users\用户名\AppData\Roaming\npm作为模块的安装路径）。主要是不想在用npm装东西时，把东西自动放C盘占地方

  1. 创建两个文件夹【Node.js安装路径】下创建两个文件夹【node_global】及【node_cache】

2

创建两个文件夹之后，Git Bash 输入命令

1
2
npm config set prefix "node安装路径\node_global"
npm config set cache "node安装路径\node_cache"

以上操作表示：修改全局包下载目录为安装路径\node_global,缓存目录为安装路径\node_cache,输入上面命令后会自动创建node_global目录，而node_cache目录会在下载全局包时自动创建

  1. 修改环境变量

    在环境变量—>系统变量下新建NODE_PATH，值：Node安装路径\node_global\node_modules

    在环境变量—>用户变量下的Path内，将C:\Users\用户名\AppData\Roaming\npm修改为Node安装路径\node_global

  2. 测试修改效果

    在Git Bash内输入

    1
    npm install -g express

    5

    在node安装路径\node_global\node_modules内出现了express的包，说明环境配置成功，以后新装的package都会出现在这个目录下

3.更换npm源

1-2中完成了Node的下载和环境配置，接下来就要用Node的工具npm来安装hexo博客框架了。但是，因为用npm下载慢，所以装阿里的镜像npm->cnpm，

注意事项，在利用npm装东西的时候，应该将Git Bash通过管理员模式打开

Git Bash输入命令如下

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

cnpm包就会出现在与express相同的地方（同样可以通过cnpm -v的形式查验安装版本）

4.安装Hexo

安装好cnpm后，就可以用cnpm的命令下载hexo了

Git Bash输入命令

1
cnpm install -g hexo-cli

安装完可以通过hexo -v验证，hexo包会出现在与express相同的地方

11

5.创建本地博客

下载好hexo之后，找个地方创建一个文件夹-我命名为Blog，Git Bash通过cd命令进入Blog路径下（一定要进入Blog文件夹的路径下）

输入下面命令，会在Blog文件夹下，初始化hexo博客架构（会自动生成一个hello world的博客）

1
hexo init

如果要创建自己的博客，首先通过cd命令进入路径Blog/source/_posts（文章都放在这个目录下）

输入命令

1
hexo n "我的第一篇博客"

然后输入下面命令，生成刚创建（new）的博文

1
2
3
hexo clean ##清理缓存 
hexo g ##创建generate
hexo s ##启动server

然后在浏览器中打开链接http://localhost:4000/，就可以看到自己的博客了

10

6.创建Github博客

  1. 在注册github账户后，创建仓库create a new repository

    用户部署个人博客的gihub仓库的命名必须符合特定要求，即repository name：owner name.github.io

    例如：owner：qingjiu 那么 repository name必须为qingjiu.github.io

  2. 安装github的插件

    在Blog目录下安装，输入如下命令

    1
    cnpm install --save hexo-deployer-git

    这个可以帮助把本地博客推送（deploy）到github

  3. 配置_config.yml文件

    1
    vim _config.vml ##进入_config.yml文件

    找到deploy的下面

    在type：后写git

    添加repo：写自己github仓库的HTTPS地址，例如https://github.com/flybigpig1999/flybigpig1999.github.io.git

    添加brach：maser（冒号后面要空一格）

    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
      branch: [branch]
      message: [message]

  4. 配置Git（全篇都是用Git Bash来输入命令，所以应该在最开始安装Git就配置好）

    在安装完Git后应当首先配置下Git的个人信息，在Git Bash内输入如下命令

    1
    2
    git config --global user.name ##在user.name处写自己的github名字
    git config --golbal user.email ##在user.email处写自己的github注册邮箱

    如果想要查询Git的config信息，输入

    1
    git config --list

  5. 将本地博客推送到github

    在推送本地博客到github之前，想要免密推送，需要生成秘钥

    Git Bash输入秘钥生成

    1
    ssh-keygen -t -ras -C "你的github注册邮箱"

    然后一直回车，系统会自动在C:\Users\用户\目录下生成**.ssh文件夹 **

    地址：C:\Users\jhon.ssh

    用记事本打开id_rsa.pub（公共秘钥），复制给出的所有文本，登录github，在右上角用户图标下拉栏目里找到Settings

    6

    然后在左侧栏目，找到SSH and GPG keys，创建SSH keys（title随便取，Key栏里粘贴刚才复制的公共秘钥）

    7

    粘贴好之后确认生成秘钥，然后可以通过在Git Bash输入命令

    1
    ssh -T git@github.com

    检测连接是否成功

    如果出现下面这种情况（connection refused连接被拒绝）

    8

    可以输入下面的命令

    1
    ssh -vT git@github.com

    修复完之后再输入-T的命令，重新验证是否连接成功

    9

    这样就是成功了successfully，然后就可以免密推送（deploy）博客到github了

    1
    hexo d ##在hexo g之后推送；hexo s仅仅是本地查看，会一直运行，需要Ctrl+C退出

    最后，可以在链接为：用户名.github.io 下查看github博客的内容

    至此，基于github的hexo博客就搭建完成了！