作者：FloatingGuy 转载请注明出处：https://floatingguy.github.io/

基础配置（一）

工具安装

1.install nodejs-v6.9.4

下载zip package
  1. 安装Nodejs
    ubuntu: 
    1
    2
    3
    sudo apt-get install nodejs
    #检查版本
    node -v

如果nodejs 版本不是 v6.9.4,那么需要去官网下载按照包：

安装release版 Nodejs

如果命令行下载不了 nodejs:
安装过程 官网下载好，解压。终端 mv node-v6.9.4-linux-x64 /opt/ 输入命令：sudo chmod 777 /etc/profile，进入目录下，备份一下，这里我是用 sublime text 打
开的，在末尾添加以下三行：

1
2
3
export NODE_HOME=/opt/node-v6.9.4-linux-x64
export PATH=PATH:PATH:NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules

之后按保存退出 在命令行输入：source /etc/profile，然后在命令行输入：node -v，返回版本信息v6.9.4，说明环境变量配置就生效了；但，你会发现进入root账户，改配置并没有生效 在命令行输入：sudo chmod 777 /root/.bashrc,进入所在目录，备份好文件，并在文件末尾加入一行source /etc/profile命令，保存。这样就大功告成了。 操作完后记得将权限改回去。

3.install nodejs-legacy

sudo apt-get install nodejs-legacy

4.install hexo

sudo npm install -g hexo-cli --registry=https://registry.npm.taobao.org

配置Hexo

1
2
3
mkdir $Blog-name && cd $Blog-name
hexo init $blog
cd $blog

Hexo 用法

  1. 常用命令列表：

    1. ~ generate #生成静态文件
    2. ~ server #本地预览环境
    3. ~ new “paper name” #创建博文
    4. ~ deploy #部署
    5. ~ new page “page name” #创建页面
      本地测试在浏览器中打开 localhost:4000

  2. Hexo根目录结构

  • 需要上传到 source repo 的文件

    #全局配置文件，站点基本信息(title/subtitle/author/..), 主题 …
    -rw-rw-r– 1 floatg floatg 1.5K 1月 21 16:51 _config.yml

    #所有博文都在source/目录下
    drwxrwxr-x 3 floatg floatg 4.0K 1月 21 16:51 source
    drwxrwxr-x 2 floatg floatg 4.0K 1月 21 16:51 scaffolds
    -rw-rw-r– 1 floatg floatg 448 1月 21 17:07 package.json

    #所有可以使用的主题都在这个目录下，每个主题对应一个文件夹
    drwxrwxr-x 4 floatg floatg 4.0K 1月 21 17:17 themes
    -rw-r–r– 1 floatg floatg 77B 1 23 15:39 .gitignore

  • .gitignore 过滤的文件

    -rw-rw-r– 1 floatg floatg 24K 1月 21 17:07 db.json
    drwxrwxr-x 12 floatg floatg 4.0K 1月 21 16:53 node_modules
    drwxrwxr-x 7 floatg floatg 4.0K 1月 21 17:07 public
    drwxr-xr-x 17 floatg floatg 578B 1 23 15:16 .deploy_git

#本地测试脚本
-rwxr-xr-x 1 floatg floatg 91B 1 23 14:38 rtest.sh
-rw-r–r–@ 1 floatg floatg 6.0K 1 23 14:55 .DS_Store

切换主题

目前 我找到的主题比较少，只有默认的landscape 和huno，较喜欢huno。

  1. 下载主题

    1
    2
    cd themes
    git clone git@github.com:someus/huno.git

  2. 分析主题

    1. cyanstyle 可以设置背景图片,并且page主体是一个半透明的theme, 建议背景图片搞一个深色的图
    2. huno 左右布局，极简风格，category,目录等基本功能齐全
    3. landscape 上下布局
    4. icarus 感觉是设计，艺术风，推荐给@Alian。 这个主体还有一些bug,测试的时候存在显示问题
    5. aero-dual 上下布局，喜欢配色
    6. yelee 很喜欢， 冬天显示列表+目录
    7. xnew 目录+归档–按日期排列
    8. GhoSadillaX 使用中

更多功能

(更多内容)[http://ibruce.info/2013/11/22/hexo-your-blog/]
(统计)[http://busuanzi.ibruce.info/]

hexo config review

1
2
3
4
5
6
7
8
9
10
11
hexo: 3.2.2
hexo-cli: 1.0.2
os: Linux 4.x.x-xx-generic linux xxx
http_parser: 1.0
node: 0.10.25
v8: 3.xx.5.9
ares: 1.10.0
uv: 0.10.23
zlib: 1.2.8
modules: 11
openssl: x.x.xf

夸主机同步 Blog

CI辅助自动部署

参考文章:
http://lotabout.me/2016/Hexo-Auto-Deploy-to-Github/
https://formulahendry.github.io/2016/12/04/hexo-ci/

我首先尝试了使用appveyor 做CI的办法，效果不尽如人意。主要的问题在：

1. nodejs, hexo的版本和我本地不同，导致命令 解析都不一样。解决办法：可以在yml中下载制定版本
2. 使用作者的yml, 直接把我content repo下的内容删除了连site都打不开了。
3. 执行速度很慢，push完成以后貌似要到[appveyor管理页面](https://ci.appveyor.com/project/FloatingGuy/floatingguy-github-io)去点击 **new build** 才能执行下去。

虽然有一些bug，不过还是蛮有趣的产品。先说下原理，再说下大概的步骤：

  1. 原理：CI工具(这里是appveyor)会监控代码管理(github)中指定repo的commit记录, 发现有新的commit 就会将代码拉取到CI主机上，然后去执行repo根目录下的appveyor.yml中的命令。

  2. 步骤:

    1. open appveyor projects page
    2. create new projects, choose Github, source-code repo (支持的所有代码管理工具)
    3. add appveyor.yml to source-code repo root directory
    4. get Token from Github
    5. CI platform to encrypt Token page
    6. set CI environment
      • STATIC_SITE_REPO – github content repo
      • TARGET_BRANCH – content repo branch
      • GIT_USER_EMAIL – github account
      • GIT_USER_NAME – github username
    7. oK, you can using your blog， finally push source repo
    8. Debug project page can monitor appveyor.yml file console

最终没有找到好的解决办法,目前就先这样啦,等找到办法了再来更新

github 托管 source

原理就是将常用电脑上的 blog根目录下建立 git仓库(source repo)，然后注意哪些文件要上传，哪些不能上传。以后可以在任意一台电脑上将 source repo clone 到本地，然后按照下面的步骤来配置。
步骤：

  1. 安装 node-v6.9.4
  2. clone 到本地以后，进入 repo目录然后安装工具&模块。

  3. 执行下面的命令就可以配置好 hexo

    1
    2
    3
    npm install hexo --save
    npm install
    npm install hexo-deployer-git --save

  4. 下面就是测试 server,generate,deploy命令了

再来总结一下哪些文件需要上传，哪些不能上传：
上传:

* _config.yml
* theme/
* source/
* scaffolds/
* package.json
* .gitignore

theme 下所有的.git/目录要删除，.gitignore 根据需要做修改。

不上传:

* .git/
* db.json
* node_modules/
* public/
* .deploy_git/

我遇到的坑, 在使用 GhoSadillaX 主题时，因为其gitignore 不上传_config.yml, 导致在 mac 上测试一直显示 duoshao 没配置short_name, 最后还是把 theme下的_config.yml找回来才解决。

hexo 博文设置 密码验证

首先，我们要了解 hexo 支持 markdown和javascript 混合编程。那么要实现对 单独的blog 加密，就可以在md 文件中嵌入一段校验密码的 js代码，如果要对所有的 blog 加密可以在 theme 中的 layout/_partial/header.ejs文件中添加一段校验密码的 js代码。

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    if( prompt("Please input password") !== String({{ password }}) )
    {
        alert('密码错误！');
        self.location='http://localhost:4000/about/';
        // history.back();
    } else {
        alert("密码正确");
    }
</script>

password 可以在 md文件头部设置

1
2
3
4
5
6
7
---
title: xxx
date: 2017-
tags:  [xx,zz]
categories:
password: password
---

辅助脚本

本地测试脚本

rtest.sh

1
2
3
4
5
Bhome=/home/floatg/data/FG-Blog/hexo/blog
killall -9 hexo
cd $Bhome
hexo g
hexo s

.gitignore 内容

1
2
3
4
5
6
7
8
.DS_Store
*.log
/.deploy*
/_config.yml
node_modules/
public/
rtest.sh
db.json