github Page + Hexo (NexT) 搭建个人博客笔记

发表于

开始

环境

  1. node

    1
    2
    node -v
    v8.11.3

  2. 安装完node后会自动携带npm

    1
    2
    npm -v
    5.6.0

  3. git : git不限于搭建个人博客，github上和国内coding等都有很不错的开源项目

    1
    2
    git --version
    git version 2.17.1.windows.2

1. github Page

需要github Page来提供一个服务

cmd-markdown-logo

设置该分支为master

2. NexT本地搭建

NexT可以理解为Hexo的一种样式，所以我们搭建的还是Hexo

前文有介绍需要安装npm，现在就用npm安装hexo

该步骤可以按照官网教程进行，https://hexo.io/zh-cn/index.html

以下为官网命令：

1
2
3
4
5
npm install hexo-cli -g   //安装hexo
hexo init blog   //初始化一个hexo(博客)
cd blog //打开
npm install //装载
hexo server //启动

我们不需要这么多

2.1 搭建hexo

找一个目录

1
2
3
npm install hexo-cli g
hexo init 
hexo s

附图：

cmd-markdown-logo

hexo init ： 自动拉代码，并且npm该项目

hexo s ： 启动该项目，图中可以看出默认 localhost:4000

访问一下：

cmd-markdown-logo

第一步已经完成

2.2 装载NexT

NexT官网：https://theme-next.iissnan.com/getting-started.html

1.看一下hexo init 后的文件目录
cmd-markdown-logo

2.执行

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

可以理解为把github的项目clone到themes的next文件夹下

特别注意themes/next中的next,这个next是一个文件夹，后续的配置需要根据这个名字来启动NexT的样式/主题
现在两个必要的条件已经完成了，hexo已经搭建了，NexT的主题已经放在对应位置了，剩下的就是让这个主题生效
怎么生效？ 改配置：

_config.yml : 就是它

这个文件一共两个:

test目录一个 : 全局配置，可以理解为，配置整个环境中的设置

themes/next目录一个 : 组件配置，（某个样式，你的名字等）

现在修改的是test目录下的_config.yml:

1
2
原配置：theme: landscape  
修改为：theme: next

编译，启动

1
2
hexo g
hexo s

cmd-markdown-logo

成功！

NexT是个组件库，可以自行到官网查询所有样式配置开启特效

3.Next推送到github

推送到github需要几个点：

1.github地址

2.github地址和hexo的关联

附图:

test目录下_config.yml:

cmd-markdown-logo

配置后执行：

1
hexo d
注意：第一次提交到github会失败，需要执行以下： 
1
npm install hexo-deployer-git --save

这个语句会安装hexo 和 git之间的插件

安装完成后，重试hexo d

执行后在github Page中映射的地址访问即可