搭完博客的第一篇文章，讲讲搭建的过程。

本文旨在让初学者快速上手，用 hexo 快速搭建自己的博客。😀

what is hexo?

  • blog framework
  • based on Node.js
  • backend free
  • simple & powerful

创建 hexo 项目

  1. 安装 hexo

    1
    $ npm install -g hexo-cli

  2. 初始化项目&&安装依赖

    1
    2
    3
    $ hexo init bolg（项目名称）
    $ cd blog
    $ npm install

  1. 完成上述步骤之后，可以看到项目目录如下:

    1
    2
    3
    4
    5
    6
    7
    ├── _config.yml // 网站的配置文件，可以在其中配置网站的大部分参数
    ├── package.json // 应用程序的信息
    ├── scaffolds // 模板文件夹，当新建文章的时候，Hexo会根据模板来建立文件
    ├── source // 资源文件夹，用来存放用户资源的地方
    |   ├── _drafts
    |   └── _posts
    └── themes // 主题文件夹，Hexo会根据主题来生成不同的静态页面

  1. 执行以下命令预览博客雏形：

    1
    2
    $ hexo g #生成静态页面，生成的内容在public文件夹下
    $ hexo s #启动本地服务，进行文章预览调试。hexo s --debug 命令可以用来调试

theme

  • 套用主题模板

    hexo 拥有很多主题，大家可以去各大网站寻找自己喜欢的主题，如：https://hexo.io/themes/等等。
    在 theme 文件夹下

    1
    $ git clone 你想要主题地址

    然后将 _config.yml 的 theme 配置成该主题的文件夹名称，执行

    1
    2
    $ hexo g
    $ hexo s

    查看新主题的展示效果。

  • 自定义主题
    如你找不到满意的主题，可以自己写一个。那么如何自定义主题呢？
    主题文件夹只要包含：

    1
    2
    3
    - html template // html 模板（ejs/jade等）
    - config // _config.yml 配置文件
    - assets // 存放静态文件js、css等

    推荐工具slush，在此先不展开叙述，可自行参照工具文档。

如何部署

首先先了解一下GitHub page
了解之后我们知道了，部署的实质，就是把 generate 到 public 文件夹下的内容同步到你的 username.github.io 项目之下。

  • 笨方法

    1
    2
    3
    4
    5
    6
    7
    8
    - cd ./public
    - git init
    - git config user.name "summerbaby"  #修改name
    - git config user.email "xxxx@qq.com"  #修改email
    - git add .
    - git commit -m "update"
    - git remote add origin git@github.com:summerbabybiu/summerbabybiu.github.io.git
    - git push -f origin master

    缺点： 每一次修改都要手动执行一遍上面的命令。

  • 一劳永逸
    利用 travis-ci 实现自动化部署。。
    首先以 GitHub 账号登录 https://travis-ci.org，找到你想要部署的项目，开启并前往设置,如下图：

    要想让 travis-ci 去部署，就要将您的 GitHub token 添加到项目的设置之中。
    先前往 GitHub 生成你的 token， 如下图：

    然后将 token 配置到项目设置中， 如下图：

    以上步骤完成之后，就可以去写脚本啦~~
    在项目的根目录下创建 .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
    language: node_js  #设置语言

    node_js: stable  #设置相应的版本

    install:
      - npm install  #安装hexo及插件

    script:
      - hexo cl  #清除
      - hexo g  #生成

    after_script:
      - cd ./public
      - git init
      - git config user.name "summerbaby"  #修改name
      - git config user.email "xxxx@qq.com"  #修改email
      - git add .
      - git commit -m "update"
      - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master  #GH_TOKEN是在Travis中配置token的名称

    branches:
      only:
        - master 
    env:
     global:
       - GH_REF: github.com/summerbabybiu/summerbabybiu.github.io.git  #设置GH_REF，注意更改yourname

    部署脚本写完之后，提交代码，就可以去 https://travis-ci.org 查看部署进度啦~~~

    部署完之后，前往你的 https://username.github.io 查看你的博客。

END

撒花❀❀❀ 然后你就完成自己的博客啦啦啦啦😋