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
 [email protected]
 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 警告也没关系的。

博客搭建

新建一个文件夹 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
    。。。。。。
  +-- [email protected]
  | `-- [email protected]
  |   `-- [email protected]
  `-- [email protected]
    +-- [email protected]
    `-- [email protected]
      +-- [email protected]
      +-- [email protected]
      +-- [email protected]
      +-- [email protected]
      +-- [email protected]
      `-- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
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/[email protected]
INFO  Generated: archives/index.html
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/[email protected]
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$

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

彩蛋1.PNG

momin@MrRobot:/cygdrive/d/blog/hexo-study/themes$ git clone [email protected]: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: [email protected]:chen-shang/chen-shang.github.io.git（写你自己github项目地址）
  branch: master(提交的分支)

首先你要在github上新建一个项目，项目的命名是有规范的[email protected]:+github账户名/+github账户名+.github.io

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

最后记

momin@MrRobot:/cygdrive/d/blog/hexo-study$ npm install hexo-asset-image --save
[email protected] D:\blog\hexo-study
`-- [email protected]
  `-- [email protected]
    +-- [email protected]
    | +-- [email protected]
    | `-- [email protected]
    `-- [email protected]

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

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

Hexo-博客搭建全过程

环境准备

博客搭建

后记

最后记

彩蛋

你可能感兴趣的:(Hexo-博客搭建全过程)