IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    手把手教你不依赖任何环境使用 Hexo

    forecho (caizhenghai@gmail.com)发表于 2016-10-27 12:58:22
    love 0

    引言

    今天心血来潮,想搭建一个 3li3 的博客,准备以博客的形式记录产品的成长。类似的博客有:SelfStore 博客。

    感觉 Hexo 的博客插件比较多,于是这次想试试。因为很早以前就搭建过一次,这次以为分分钟搞定,但实际上还是花了我不少时间,为了以后不再重复踩坑,我决定记录下整个过程。

    我们先看一下成果 3li3博客,然后我再来分享我的经验。

    安装 Hexo

    方式一

    根据 Hexo 官网文档安装说明,你需要先安装 node 环境。 由于我不是专业的前端,本地发环境没有 node,还好 hexo 文档有提供安装方法,而且安装方法非常简单:

    1
    2
    
    wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
    nvm install stable

    然后安装 Hexo:

    1
    
    $ npm install -g hexo-cli

    但是实际上我安装的时候,nvm install stable 命令卡半天也没反应,进度很慢。而且第一次我明明安装成功了,但是输入 npm 的时候任然提示:

    The program 'npm' is currently not installed. To run 'npm' please ask your administrator to install the package 'npm'

    输入 hexo 的时候也是遇到:hexo: command not found

    我一脸懵逼,只能重新再安装一遍。每次看到一推输出 npm WARN ... 我也很慌,它是安装成功了吗?

    总结一下,就是搭建环境是巨耗费时间的,特别是你对它不是十分了解的时候,如果你敢时间的话,我们来换一种姿势安装看看。

    方式二

    直接下载我刚刚安装好的 Hexo 包,解压,然后我们就可以继续下一个步骤了。

    这个方式不需要你安装 node 环境,任何一台新电脑都能直接使用。当然也有一个缺点就是:本地不能预览,但是这功能我们需要吗?

    配合 Travis CI 实现自动发布,还要啥本地预览??

    使用 Travis CI 工具自动部署 Hexo

    我安装完 Hexo 第二件事就是完成此功能,而且今天在这个功能上「浪费」了最多时间。

    其实 Google 搜索「配置travis来自动发布hexo」 结果一大把,但是我看了几篇都没找到想要的,我要的很简单 - 用最少的步骤完成此功能。

    下面我来简单分享一下我的步骤:

    1、安装 travis 命令行

    1
    
    $ gem install travis

    2、去 Github 提供的 Personal Access Token 创建一个 Token,然后复制 Token 值。 3、使用密码生成加密的 Token

    1
    
    $ travis encrypt -r owner/repo GH_Token=Your_Personal_Access_Token

    owner/repo: 你的 Github 仓库名字(<用户名>/<仓库名>),比如我的博客仓库 3li3/blog GH_Token: 你上一步新建的 Personal Access Token。

    以上命令返回:

    1
    
    secure: "xxxxx="

    此处的 secure 值,下面步骤会用到。

    4、新建 .travis.yml 文件,代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    
    language: node_js
    node_js: stable
    
    # Travis-CI Caching
    cache:
      directories:
        - node_modules
    
    install:
      - npm install  #安装hexo及插件
    
    script:
      - hexo cl  #清除
      - hexo g  #生成
    
    after_script:
      - cd public
      - git init
      - git config user.name "forecho"
      - git config user.email "caizhenghai@gmail.com"
      - git add .
      - git commit -m "Auto deploy from Travis-CI."
      - git push --force --quiet "https://$GH_Token@github.com/$GH_REPO.git" master:gh-pages
    
    branches:
      only:
        - master
    
    env:
      global:
        - GH_REPO: 3li3/blog
        - secure: "xxxxx="

    以上文件你需要修改4处:

    • git config user.name
    • git config user.email"
    • GH_REPO
    • secure: "xxxxx="

    此处我被一个教程给坑了,注意是 GH_Token 不是 GH_TOKEN!

    5、最后你要去 Travis CI,手动开启此项目的监控,以后你写文章就是手动新建一个文件,然后 git push 就可以实现自动部署了。

    添加域名解析

    这个很简单,首先你要在项目 source 目录下创建一个 CNAME 文件,写入你要解析的域名就可以了,比方说:

    1
    
    blog.3li3.com

    然后你需要在域名管理中心,添加一个 cname 解析,记录值写 3li3.github.io,3li3 代表 GitHub 组织名或者用户名,如下

    更换主题

    这个也遇到一个坑,首先我看到这篇文章 Hexo Top 10 Popular Themes,然后找到了 NexT 主题, 下载主题的时候一定要使用「下载稳定版本」的方式,不然你会遇到 git 子模块的坑。

    然后使用上面的配置会导致 Travis CI 不能自动部署 Hexo,除非你让配置支持子模块,哎,懒得折腾了,所以我用最简单的方式把主题重新安装整了一遍。

    关于主题的时候,文档已经很明确了,我就不多讲了。

    总结

    为了以后方便,一定要使用 Travis CI 工具自动部署 Hexo。



沪ICP备19023445号-2号
友情链接