Hexo-博客搭建全过程

环境准备

工具:Windows 、Git、 Intllij IDEA + Markdown 插件、Node.js 、Cygwin(该软件的安装使用请参考本人的Cygwin系列教程)
个人配置

momin@MrRobot:~$ systeminfo.exe
 主机名:           MRROBOT
 OS 名称:          Microsoft Windows 10 专业版
 OS 版本:          10.0.10586 暂缺 Build 10586
 OS 制造商:        Microsoft Corporation
 OS 配置:          独立工作站
 OS 构件类型:      Multiprocessor Free
momin@MrRobot:~$ git --version
 git version 2.7.4
momin@MrRobot:~$ npm -v
 3.7.3
momin@MrRobot:~$ more build.txt
 IU-145.597.3
momin@MrRobot:~$

安装Node
　　到 Node.js官网下载相应平台的最新版本，一路安装即可。我用的是 node-v4.4.3-x86.msi，安装完成后在终端输入：npm -v 验证是否安装成功，顺利输出node.js的话则成功安装。

安装Git
　　1. Git的客户端很多，个人用的是git官网(https://git-scm.com/download/), 下载下来的自带git-bash、gitk。你用第三方的git工具也可以，只要你自己习惯就好。
　　2. 配置git
　　　　1　git config
　　　　git config --global user.name 用户名
　　　　git config --global user.email 邮箱
　　　　完成后git config --list 或者 cat ~/.gitconfig 确认配置正确

momin@MrRobot:~$ git config --global user.name "xxx"
momin@MrRobot:~$ git config --global user.email "xxx@xxx"
momin@MrRobot:~$ git config --list 
 user.name=chenshang
 user.email=2414973330V@gmail.com
 alias.stt=status
 alias.sts=stash
 alias.stg=stage
 color.ui=auto
momin@MrRobot:~$

2 生成ssh key

ssh-keygen  -t rsa（注意没有sudo）
cat ~/.ssh/id_rsa.pub  并拷贝

安装Cygwin
　　请参照我的Cygwin系列博客

配置GitHub
　　1. 请到GitHub上注册自己账号，并新建一个仓库，仓库的命名规则是，你的GitHub用户名+ . +github+ . +io 这就是你以后生成博客地地址.
　　2. 将地二步中生成的key添加到GitHub中，这样你就可以从你的远程仓库下载和上传东西了

Node.js 源设置

alias cnpm="npm --registry=https://registry.npm.taobao.org --cache=$HOME/.npm/.cache/cnpm --disturl=https://npm.taobao.org/dist --userconfig=$HOME/.cnpmrc"

以上相当于制定了node.js的源，并从新设置了一个别名叫cnmp ,这样下载插件的时候会快一点

安装 Hexo
　　1. 安装 Hexo（注意，现在是 cnpm 开头了，不是 npm 了）：cnpm install -g hexo-cli
　　　安装时间不一定很快，有可能需要等 3 ~ 5 分钟。安装完有 WARN 警告也没关系的。

博客搭建

新建一个文件夹 <i class="fa fa-folder"></i> hexo-study 用来存放你的博客系统
进入该目录，执行 hexo init 命令 ,输出如下结果说明博客系统初始化完成,中间出现 WARN 也没事。

momin@MrRobot:/cygdrive/d/blog$ mkdir hexo-study
momin@MrRobot:/cygdrive/d/blog$ cd hexo-study/
momin@MrRobot:/cygdrive/d/blog/hexo-study$ ls
momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo init
INFO  Cloning hexo-starter to D:\blog\hexo-study
正克隆到 'D:\blog\hexo-study'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
展开对象中: 100% (53/53), 完成.
检查连接... 完成。
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
正克隆到 'themes/landscape'...
remote: Counting objects: 730, done.
remote: Total 730 (delta 0), reused 0 (delta 0), pack-reused 729
接收对象中: 100% (730/730), 2.51 MiB | 457.00 KiB/s, 完成.
处理 delta 中: 100% (385/385), 完成.
检查连接... 完成。
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e22468d38'
INFO  Install dependencies
    。。。。。。
  +-- opn@4.0.1
  | `-- pinkie-promise@2.0.1
  |   `-- pinkie@2.0.4
  `-- serve-static@1.10.2
    +-- escape-html@1.0.3
    `-- send@0.13.1
      +-- destroy@1.0.4
      +-- etag@1.7.0
      +-- fresh@0.3.0
      +-- http-errors@1.3.1
      +-- range-parser@1.0.3
      `-- statuses@1.2.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
INFO  Start blogging with Hexo!
momin@MrRobot:/cygdrive/d/blog/hexo-study$

我们先ls看一下，初始化后的目录结构应该是这样的

momin@MrRobot:/cygdrive/d/blog/hexo-study$ ls
_config.yml  node_modules  package.json  scaffolds  source  themes

接下来我们运行 hexo cl 和 hexo g 两个命令来生成静态博客,我来解释一下 hexo cl = hexo clean 、hexo g =hexo generate ;从名字上可以看出，clean 就是清理生成的文档，generate就是生成静态文档，hexo g 的时候如果不报错的话说明你的各项配置都是没有问题的了，恭喜你就这么建单，马上你就能看到你的博客长什么样子了。

momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo cl
momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo g
INFO  Start processing
INFO  Files loaded in 221 ms
INFO  Generated: index.html
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: archives/index.html
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: archives/2016/04/index.html
INFO  Generated: archives/2016/index.html
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: js/script.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: 2016/04/22/hello-world/index.html
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  28 files generated in 743 ms
momin@MrRobot:/cygdrive/d/blog/hexo-study$

接下来执行hexo s 也就是hexo server的缩写，来启动hexo 服务，这时候你的博客网站就可以在本地打开了

momin@MrRobot:/cygdrive/d/blog/hexo-study$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

我们来看看最开始博客长什么样子

hexo最开始的样子.PNG

我们进入themes文件夹看看有什么,发现landscape是hexo自带的主题

momin@MrRobot:/cygdrive/d/blog/hexo-study$ cd themes/
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ ls
landscape
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ tree -L 2
.
└── landscape
    ├── _config.yml
    ├── Gruntfile.js
    ├── languages
    ├── layout
    ├── LICENSE
    ├── package.json
    ├── README.md
    ├── scripts
    └── source

5 directories, 5 files
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$

嫌自带的主题太丑了怎么办？我推荐一套主题给大家 git@github.com:chen-shang/Hexo-Theme-TaiJi.git 这个主题是我自己在yelee主题的基础上修改的，后面会教大家怎么在原有主题的基础上进行修改。大家也可以拿我这套主题Taiji（太极）进行修改。
我的主题先来看看他的颜值

彩蛋1.PNG

momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ git clone git@github.com:chen-shang/Hexo-Theme-TaiJi.git ./back
正克隆到 './back'...
remote: Counting objects: 2286, done.
remote: Compressing objects: 100% (133/133), done.
接收对象中:  22% (514/2286), 2.59 MiB | 451.00 KiB/s
处理 delta 中: 100% (1364/1364), 完成.
检查连接... 完成。
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ ls
back  landscape
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ tree -L 2
.
├── back
│   ├── _config.yml
│   ├── languages
│   ├── layout
│   ├── package.json
│   ├── README.md
│   └── source
└── landscape
    ├── _config.yml
    ├── Gruntfile.js
    ├── languages
    ├── layout
    ├── LICENSE
    ├── package.json
    ├── README.md
    ├── scripts
    └── source

9 directories, 8 files
momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$

接下来我们看看如何配置这套主题，先回到上级目录，打开_config.yml这个配置文件，我喜欢用vim打开，你用记事本什么的打开都可以.定位到66行，将theme对应的主题名字改成你新下载下来的主题。然后 hexo cl, hexo g, hexo s在启动起来看看,是不是还是我的主题漂亮呢

momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ cd ..
momin@MrRobot:/cygdrive/d/blog/hexo-study$ vim _config.yml
    。。。。。。
 51 # Date / Time format
 52 ## Hexo uses Moment.js to parse and display date
 53 ## You can customize the date format as defined in
 54 ## http://momentjs.com/docs/#/displaying/format/
 55 date_format: YYYY-MM-DD
 56 time_format: HH:mm:ss
 57
 58 # Pagination
 59 ## Set per_page to 0 to disable pagination
 60 per_page: 10
 61 pagination_dir: page
 62
 63 # Extensions
 64 ## Plugins: https://hexo.io/plugins/
 65 ## Themes: https://hexo.io/themes/
 66 theme: back
 67
 68 # Deployment
 69 ## Docs: https://hexo.io/docs/deployment.html
 70 deploy:
 71   type:
:wq

后记

可以将你的博客文件夹和主题文件夹也纳入git中，这样以后如果有修改也好有个记录，恢复的时候也方便

momin@MrRobot:/cygdrive/d/blog/hexo-study$ git init
初始化空的 Git 仓库于 /cygdrive/d/blog/hexo-study/.git/
momin@MrRobot:/cygdrive/d/blog/hexo-study$ ll
总用量 126
drwxrwxr-x+ 1 momin momin     0 4月  22 00:08 ./
drwxrwx---+ 1 momin momin     0 4月  21 23:43 ../
drwxrwxr-x+ 1 momin momin     0 4月  22 00:08 .git/
-rw-rw-r--+ 1 momin momin   110 4月  22 00:07 .gitignore
-rw-rw-r--+ 1 momin momin  1478 4月  21 23:58 _config.yml
-rwxrwxr-x+ 1 momin momin 28049 4月  21 23:59 db.json*
drwxrwxr-x+ 1 momin momin     0 4月  21 23:44 node_modules/
-rw-rw-r--+ 1 momin momin   448 4月  21 23:45 package.json
drwxrwxr-x+ 1 momin momin     0 4月  21 23:59 public/
drwxrwxr-x+ 1 momin momin     0 4月  21 23:43 scaffolds/
drwxrwxr-x+ 1 momin momin     0 4月  21 23:43 source/
drwxrwxr-x+ 1 momin momin     0 4月  21 23:55 themes/
momin@MrRobot:/cygdrive/d/blog/hexo-study$
momin@MrRobot:/cygdrive/d/blog/hexo-study$ git stt
位于分支 master

初始提交

未跟踪的文件:
  （使用 "git add <文件>..." 以包含要提交的内容）

        scaffolds/
        source/

提交为空，但是存在尚未跟踪的文件（使用 "git add" 建立跟踪）
momin@MrRobot:/cygdrive/d/blog/hexo-study$


momin@MrRobot:/cygdrive/d/blog/hexo-study$ git stt
位于分支 master

初始提交

未跟踪的文件:
  （使用 "git add <文件>..." 以包含要提交的内容）

        scaffolds/
        source/

提交为空，但是存在尚未跟踪的文件（使用 "git add" 建立跟踪）
momin@MrRobot:/cygdrive/d/blog/hexo-study$ git add .
momin@MrRobot:/cygdrive/d/blog/hexo-study$ git stt
位于分支 master

初始提交

要提交的变更：
  （使用 "git rm --cached <文件>..." 以取消暂存）

        新文件：   scaffolds/draft.md
        新文件：   scaffolds/page.md
        新文件：   scaffolds/post.md
        新文件：   source/_posts/hello-world.md

momin@MrRobot:/cygdrive/d/blog/hexo-study$ git commit -m "新建博客，将博客纳入git管理工具"
[master（根提交） 0399ae8] 新建博客，将博客纳入git管理工具
 4 files changed, 51 insertions(+)
 create mode 100644 scaffolds/draft.md
 create mode 100644 scaffolds/page.md
 create mode 100644 scaffolds/post.md
 create mode 100644 source/_posts/hello-world.md
momin@MrRobot:/cygdrive/d/blog/hexo-study$

纳入git管理.PNG

好了现在博客在本地建立成功了，我们怎么把它部署到github上并让别人访问到他呢？首先我们需要安装两个插件

cnpm install hexo -server --save
cnpm install hexo-deployer-git --save

安装成功后等待后续操作

然后打开站点的配置文件。定位到最后一行

deploy:
  type: git (写git ,我也不知道为什么，拿来主义)
  repo: git@github.com:chen-shang/chen-shang.github.io.git（写你自己github项目地址）
  branch: master(提交的分支)

<p style="color:red">首先你要在github上新建一个项目，项目的命名是有规范的git@github.com:+github账户名/+github账户名+.github.io</p>

然后执行hexo d 就可以将博客推送到github上去了。这之后就可以在浏览器中输入你的项目名就可以访问你的博客了。是不是很简单那，以后有了修改只需要运行hexo d就可以提交，过一会再访问就可以看到修改了

最后记

momin@MrRobot:/cygdrive/d/blog/hexo-study$ npm install hexo-asset-image --save
hexo-site@0.0.0 D:\blog\hexo-study
`-- hexo-asset-image@0.0.2
  `-- cheerio@0.19.0
    +-- css-select@1.0.0
    | +-- css-what@1.0.0
    | `-- domutils@1.4.3
    `-- lodash@3.10.1

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
momin@MrRobot:/cygdrive/d/blog/hexo-study$

想要知道上面是干什么，敬请关注下一篇博客，hexo关于本地显示图片问题的解决方案。

彩蛋

最后编辑于：2017.12.03 04:40:11

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 210,835评论 6赞 490
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 89,900评论 2赞 383
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 156,481评论 0赞 345
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,303评论 1赞 282
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,375评论 5赞 384
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,729评论 1赞 289
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,877评论 3赞 404
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,633评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,088评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,443评论 2赞 326
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,563评论 1赞 339
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,251评论 4赞 328
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,827评论 3赞 312
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,712评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,943评论 1赞 264
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,240评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,435评论 2赞 348

Hexo-博客搭建全过程

环境准备

博客搭建

后记

最后记

彩蛋

推荐阅读更多精彩内容