By

文章目录
  1. 1. 序
  2. 2. 安装Node.Js
  3. 3. 安装Hexo
    1. 3.1. Hexo 文件目录介绍
  4. 4. Hexo命令
  5. 5. 配置Github
  6. 6. 关联Github
  7. 7. 报错总结
  8. 8. 脚本发布

序

现在终于搭建完了自己的技术博客网站,虽然技术上没有什么难度可言，但光搭建环境和整合资源就花了很久时间。所以目前把自己所搜集的资源快捷方法给大家，大家可以根据教程尝试搭建属于自己的技术博客网站。

安装Node.Js

目前我的博客是用Hexo搭建的，这里有必要稍微说一下Hexo的原理。

Hexo是一款基于Node.js的静态博客框架,通过Hexo的命令生成静态文件，然后将静态文件部署到远端服务器。

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

安装方法上官网下载Node.Js,安装之后即可使用，我目前安装的版本是4.4。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

1
2
$ npm -v
2.3.0

安装Hexo

基于NPM命令，使用如下方法可以安装Hexo:

1
$ sudo npm install -g hexo

部署Hexo

1
$ hexo init

注：这个命令会初始化博客的目录，所以，执行这个命令时，在你想创建的目录下执行，就自动生成到对应目录下
执行命令生，会在当前命令的路径下，生成以下文件：

1
2
3
4
5
6
7
8
9
10
.
├── _config.yml
├── node_modules
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
└── package.json

Hexo 文件目录介绍

  • public：执行hexo generate命令，输出的静态网页内容目录
  • scaffolds：layout模板文件目录，其中的md文件可以添加编辑
  • scripts：扩展脚本目录，这里可以自定义一些javascript脚本
  • source：文章源码目录，该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录，404文件、favicon.ico文件，CNAME文件等都应该放这里，该目录下可新建页面目录。
  • _drafts：草稿文章
  • _posts：发布文章
  • themes：主题文件目录
  • _config.yml：全局配置文件，大多数的设置都在这里
  • package.json：应用程序数据，指明hexo的版本等信息，类似于一般软件中的关于按钮

Hexo命令

Hexo下，通过 _config.yml 设置博客，可以想象成我们用的软件里的设置一样，只是它通过一个文件列出这些参数，然后让我们填写和修改。

  • 全局设置
    在你博客目录下有一个文件名_config.yml，打开可以配置信息。

  • 局部页面
    在你博客目录下 \themes\你使用的主题_config.yml

  • Hexo常用命令

    1
    2
    3
    4
    5
    $ hexo new "postName"   or hexo n "postName"    #新建文章
    $ hexo new page "pageName"      #新建页面
    $ hexo generate or hexo g       #生成静态页面至public目录
    $ hexo server   or hexo s       #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
    $ hexo deploy   or hexo d       #将.deploy目录部署到GitHub

  • 还可以复合命令：

    1
    2
    $ hexo deploy -g
    $ hexo server -g

有时候生成的网页出错了，而生成的rss其实没有清除，那么用下面的命令，在重新生成吧

1
$ hexo clean

当本地调试出现诡异现象时候，请先使用 hexo clean 清理已经生成的静态文件后重试。

注：Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中，在执行hexo deploy时将其复制到.deploy文件夹中。Github的版本库通常建议同时附上README.md说明文件，但是hexo默认情况下会把所有md文件解析成html文件，所以即使你在线生成了README.md，它也会在你下一次部署时被删去。怎么解决呢？
在执行hexo deploy前把在本地写好的README.md文件复制到.deploy文件夹中，再去执行hexo deploy。

配置Github

  • 安装Git (把本地的hexo内容提交到github)
  • 申请GitHub账号 (是用来做博客的远程创库、域名、服务器等)
  • 需要在GithHub上配置SSH Keys,如果不了解SSH Keys详见 SSHKey的作用和生成
  • 在github上建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】

关联Github

现在我们需要_config.yml文件，来建立关联，命令：

vim _config.yml

翻到最下面，改成我这样子的

deploy:

type: git

repo:https://github.com/leopardpan/leopardpan.github.io.git

branch:master

然后执行命令：

1
$ npm install hexo-deployer-git --save

有的type是github,我现在的版本是hexo: 3.1.1，执行命令

1
$ hexo -vsersion

貌似3.0后全部改成我上面这种格式了。

然后，执行配置命令：

1
$ hexo deploy

报错总结

ERROR Deployer not found: git 或者 ERROR Deployer not found: github

解决方法： npm install hexo-deployer-git –save

如发生报错： ERROR Process failed: layout/.DS_Store , 那么进入主题里面layout和_partial目录下，使用删除命令：

rm-rf.DS_Store

ERROR Plugin load failed: hexo-server

原因：

Besides,utilities are separated into a standalone module.hexo.util is not reachable anymore.

解决方法，执行命令：

1
$ sudo npm install hexo-server

执行命令hexo server，提示：Usage: hexo ….

原因：

我认为是没有生成本地服务

解决方法，执行命令：

1
$ npm install hexo-server--save

提示：hexo-server@0.1.2 node_modules/hexo-server

….

表示成功了参考

这个时候再执行：

1
$ hexo-server

得到:

INFOHexois running at http://0.0.0.0:4000/.PressCtrl+C to stop.

这个时候再点击http://0.0.0.0:4000

脚本发布

如果发布调用Hexo deploy 失败，可以尝试使用脚本部署的方式发布到Github，以下是脚本命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
$ cd /Users/Chausson/Documents/Blog #这里指的是Hexo创建文件夹的路径
$ hexo clean
$ hexo generate
$ cd public

$ git init
$ git add .
$ git commit -m "update at `date` "

$ git remote add origin git@github.com:chausson/chausson.github.io
$ echo "### Pushing to Github..."
$ git push origin master -f
$ echo "### Done"