GKD! hexo + github pages + next个人博客搭建指南

其实在年前就试着想搞这么一套个人blog，然而年前只想着放假并没有开搞，于是在年后按照教程搞了一遍。

---

先讲一下总体思路：

github pages 可以展示静态页面

hexo 作为一个blog系统可以生成静态页面

next 其实就是一个主题，用来凑数的

Travis CI 来做集成

---

接下来是正文：

1. 本地环境搭建，生成本地blog

代码语言：txt复制

按照hexo需要两个软件：Node.js 和 git，这两个的安装不在赘述

代码语言：txt复制

安装hexo：

代码语言：txt复制

    npm install -g hexo-cli 

代码语言：txt复制

hexo安装完成之后，使用以下命令可以新建一个hexo博客：

代码语言：txt复制

    hexo init <floder>

代码语言：txt复制

floder为文件夹的名称，也就是新建的博客名，进入到这个文件夹中 *_config.yml* 是配置文件

代码语言：txt复制

到了这里本地的blog也就建好了，下一步我们将其迁移至github上

1. 迁移至github

代码语言：txt复制

这里直接讲将站点文件公开的部署方法：

代码语言：txt复制

1. 在github上新建一个repository，这个repository的命名按照<项目名>.github.io的形式来命名（大部分人的这里的项目名都是直接用的github的用户名，可以直接用<用户名>.github.io的形式来访问这个博客。）

代码语言：txt复制

2. 将github上的repository clone至本地（一般建好的情况下会有一个gh-pages的分支有一些example页面文件，先不要管他），在本地新建一个master分支，将本地blog文件夹里的所有文件copy到master分支下。

代码语言：txt复制

3. travis CI配置：

代码语言：txt复制

    1). 将[travis CI](https://github.com/marketplace/travis-ci)配置到自己的github账户中

代码语言：txt复制

    2). 打开github的[应用设置](https://github.com/settings/installations),里边选择travis ci后边的config，将其权限配置为运行访问所有repository

代码语言：txt复制

    3). 在github中新建一个[token](https://github.com/settings/tokens),并勾选token的 repo 权限， 记录生成的token

代码语言：txt复制

    4). 在[travis CI]()的页面，打开刚刚建立好的github项目的配置页面，在environment variables 下新建一个变量，变量名为 *GH_TOKEN*， 变量值为刚刚github上生成的token， 点击add保存

代码语言：txt复制

4. 修改travis ci配置

代码语言：txt复制

    在刚刚复制过去的文件夹里，新建一个./.travis.yml文件

代码语言：txt复制

        sudo: false

代码语言：txt复制

        language: node_js

代码语言：txt复制

        node_js:

代码语言：txt复制

          - 10 # use nodejs v10 LTS
        cache: npm
        branches:
          only:
            - master # build master branch only
        script:
          - hexo generate # generate static files
        deploy:
          provider: pages
          skip-cleanup: true
          github-token: $GH_TOKEN
          keep-history: true
          on:
            branch: master
          local-dir: public
5. push master branch

代码语言：txt复制

    到了这一步就基本完成了，将上述文件推送至github上，travis ci就会自动检测到此项目有变化，部署博客文件至gh-pages分支上。

代码语言：txt复制

6. 访问网站

代码语言：txt复制

    如果项目名是github用户名的话，可以直接访问 https://<你的 GitHub 用户名>.github.io

代码语言：txt复制

    如果不是的话，就访问 https://<你的 GitHub 用户名>.github.io/<项目名>

---

坑：

1. 如果项目名不是github用户名的话，github还是会访问https://<你的 GitHub 用户名>.github.io 下加载css文件，这个时候需要到 _config.yml 文件下修改url为https://<你的 GitHub 用户名>.github.io/<项目名>,以及修改root为/<项目名>/，才可以正常读取到css文件。

代码语言：txt复制

比如我的URL设置就是如下：

代码语言：txt复制

    # URL

代码语言：txt复制

    ## If your site is put in a subdirectory, set url as 'http://example.com/   child'     and root as '/child/'

代码语言：txt复制

    url: https://jiahui-qin.github.io/dragonFlyInSky.GitHub.io/

代码语言：txt复制

    root: /dragonFlyInSky.GitHub.io/

代码语言：txt复制

    permalink: :year/:month/:day/:title/

代码语言：txt复制

    permalink_defaults:

代码语言：txt复制

    pretty_urls:

代码语言：txt复制

      trailing_index: true # Set to false to remove trailing 'index.html'     from    permalinks

代码语言：txt复制

      trailing_html: true # Set to false to remove trailing '.html' from    permalinks

---

参考：

hexo官方文档

---

ps

写完之后才发现这样的教程也太多了。

github hexo

0 人点赞