如何用github和hexo搭建自己的Blog

发表于 | 分类于

step 1. 在github新建page

  1. 登录GitHub，注册自定义用户名如wangbinbin0326；

  2. 在主页右下角创建New repository，name必须和用户名一致如wangbinbin0326.github.io；

  3. 点击新建的repository（wangbinbin0326.github.io），然后点击launch automatic page generator，选择自己喜欢的page 模板，创建后10分钟左右可以访问。http://wangbinbin0326.github.io/ 此时访问的是默认模板在gh-pages 这个branch；

注意：我们需要修改这个branch，page 才可以显示我们hexo创建的博客， wangbinbin0326.github.io ---> setting ---> GitHub Pages ---> master branch。

step 2. 安装Hexo

  • 安装准备：
  • 安装Hexo

配置好GitHub window后，双击桌面上的Git Shell，输入npm命令即可安装

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
$ npm install hexo-cli -g
hexo-util@0.6.0 postinstall C:\Users\binbiwan\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-util
npm run build:highlight
C:\Users\binbiwan\AppData\Roaming\npm\hexo -> C:\Users\binbiwan\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
hexo-cli@1.0.2 C:\Users\binbiwan\AppData\Roaming\npm\node_modules\hexo-cli
├── object-assign@4.1.0
├── abbrev@1.0.9
├── minimist@1.2.0
├── bluebird@3.4.6
├── tildify@1.2.0 (os-homedir@1.0.2)
├── chalk@1.1.3 (escape-string-regexp@1.0.5, supports-color@2.0.0, ansi-styles@2.2.1, strip-ansi@3.0.1, has-ansi@2.0.0)
├── hexo-util@0.6.0 (html-entities@1.2.0, striptags@2.1.1, camel-case@3.0.0, cross-spawn@4.0.2, highlight.js@9.7.0)
├── hexo-log@0.1.2 (bunyan@1.8.1)
└── hexo-fs@0.1.6 (graceful-fs@4.1.9, escape-string-regexp@1.0.5, chokidar@1.6.0)
──────────────────────────────────────────────────────────────────────────────────────────────
$ npm install hexo --save
├── swig@1.4.2 (optimist@0.6.1, uglify-js@2.4.24)
├── hexo-log@0.1.2 (bunyan@1.8.1)
├── nunjucks@2.5.2 (asap@2.0.5, yargs@3.32.0, chokidar@1.6.0)
├── moment@2.13.0
├── cheerio@0.20.0 (entities@1.1.1, dom-serializer@0.1.0, css-select@1.2.0, htmlparser2@3.8.3, jsdom@7.2.2)
├── hexo-util@0.6.0 (striptags@2.1.1, html-entities@1.2.0, camel-case@3.0.0, cross-spawn@4.0.2, highlight.js@9.7.0)
├── lodash@4.16.4
└── warehouse@2.2.0 (graceful-fs@4.1.9, is-plain-object@2.0.1, JSONStream@1.2.1, cuid@1.3.8)
>

  • 安装Hexo插件git

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

  • 创建站点BlogHexo

    1
    2
    3
    4
    $ hexo init BlogHexo
    $ cd BlogHexo
    $ npm install
    >

  • 配置站点BlogHexo

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    编辑站点BlogHexo目录下的_config.yml
    title: Tony Blog
    subtitle: 迈小步，不停步
    description: 终会有属于自己的一片天空！
    author: Tony Wang
    language: zh-Hans
    timezone:
    url: http://wangbinbin0326.github.io/
    theme: next
    deploy: 
      type: git
      repo: https://github.com/wangbinbin0326/wangbinbin0326.github.io.git
      branch: master
    >

  • 更改站点BlogHexo的主题NEXT

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $ pwd
    /c/git/BlogHexo/BlogHexo/themes
    git clone https://github.com/iissnan/hexo-theme-next themes/next
    $ mv hexo-theme-next next
    编辑NEXT主题目录下的配置文件_config.yml
    menu:
      home: 注意这地有个空格符
      archives: archives
      tags: /tags
      avatar: https://wangbinbin0326.github.io/images/job/myself.jpg
    auto_excerpt:
      enable: true
      length: 150
    >

  • 写Blog

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    $ hexo new post Oracle-DB-概述
    $ pwd
    /c/git/BlogHexo/BlogHexo/source/_posts
    $ ll
    -rw-r--r-- 1 binbiwan 1049089 3948 十月 13 01:15 Oracle-DB-概述.md
    编辑Oracle-DB-概述.md这个文件，使用Markdown格式
    $ hexo g
    $ hexo g
    INFO  Start processing
    INFO  Files loaded in 1.83 s
    INFO  Generated: archives/2016/index.html
    INFO  Generated: tags/DBA/index.html
    INFO  Generated: tags/Oracle/index.html
    INFO  Generated: index.html
    >

  • 查看blog

    1
    2
    3
    4
    $ hexo s
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
    >

  • 提交Blog到github

    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
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    ──────────────────────────────────────────────────────────────────────────────────────────────
    1. 确保 git remote 是git@github.com, 这种方式连接
    $ git remote -v
    origin  git@github.com:wangbinbin0326/wangbinbin0326.github.io.git (fetch)
    origin  git@github.com:wangbinbin0326/wangbinbin0326.github.io.git (push)
    $ git remote remove origin
    git remote add origin git@github.com:wangbinbin0326/wangbinbin0326.github.io.git
    $ git remote -v
    origin  git@github.com:wangbinbin0326/wangbinbin0326.github.io.git (fetch)
    origin  git@github.com:wangbinbin0326/wangbinbin0326.github.io.git (push)
    ──────────────────────────────────────────────────────────────────────────────────────────────
    2. 确保使用桌面上的github登录，会生成以下两个文件
    C:\Users\binbiwan\.ssh> pwd
    C:\Users\binbiwan\.ssh
    C:\Users\binbiwan\.ssh> ls
        Directory: C:\Users\binbiwan\.ssh
    Mode                LastWriteTime     Length Name
    ----                -------------     ------ ----
    -a---        2016/10/13     16:18       1679 github_rsa
    -a---        2016/10/13     16:18        405 github_rsa.pub
    ──────────────────────────────────────────────────────────────────────────────────────────────
    3. 确保提交blog代码时，打开Git Shell运行，否则会报错如下错误，
    nothing to commit, working directory clean
    bash: /dev/tty: No such device or address
    error: failed to execute prompt script (exit code 1)
    fatal: could not read Username for 'https://github.com': Invalid argument
    FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
    Error: bash: /dev/tty: No such device or address
    error: failed to execute prompt script (exit code 1)
    fatal: could not read Username for 'https://github.com': Invalid argument
    C:\git\BlogHexo\BlogHexo [master +4 ~2 -1 !]> hexo d
    INFO  Deploying: git
    INFO  Clearing .deploy_git folder...
    INFO  Copying files from public folder...
    warning: LF will be replaced by CRLF in 2016/10/11/DBA职责/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in 2016/10/12/Oracle-DB-概述/index.html.
    The file will have its original line endings in your working directory.
    Branch master set up to track remote branch master from https://github.com/wangb
    inbin0326/wangbinbin0326.github.io.git.
    To https://github.com/wangbinbin0326/wangbinbin0326.github.io.git
       f3b58e1..bb12b42  HEAD -> master
    INFO  Deploy done: git
    >

  • 访问改地址wangbinbin0326.github.io
    此处输入图片的描述

step 3. 优化blog

  • 创建标签云页面
  • 新建一个页面，命名为 tags 。命令如下：hexo new page "tags"
  • 编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。
    title: All tags date: 2014-12-22 12:39:04 type: "tags"
  • 在菜单中添加链接。编辑主题的 _config.yml ，添加 tags 到 menu 中，如下:
    menu: home: / archives: /archives tags: /tags
  • hexo next 添加分类页
  • 新建一个页面，命名为 categories 。命令如下：hexo new page categories
  • 编辑刚新建的页面，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类。
    title: 分类 date: 2014-12-22 12:39:04 type: "categories"
  • 在菜单中添加链接。编辑主题的 _config.yml ，将 menu 中的 categories: /categories 注释去掉，如下:
    menu: home: / categories: /categories archives: /archives tags: /tags
  • hexo中有Front-matter这个概念，是文件最上方以 — 分隔的区域，用于指定个别文件的变量。举个栗子，在hexo new post article时会生成article.md文件，文件生成好的文章属性。在其中添加categories属性，再部署之后就可以在分类页看到分类了。
    --- title: Oracle-DB-概述 date: 2016-10-12 17:12:40 tags: Oracle categories: Database ---
  • hexo next 设置背景图片
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    将背景图片放到改目录下backgroud.jpg
    C:\git\BlogHexo\BlogHexo\themes\next\source\images
    编辑改文件
    C:\git\BlogHexo\BlogHexo\themes\next\source\css\_custom\custom.styl
    // Custom styles.
    body{
    background-image:url(/images/backgroud.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%; 
    }
    footer{
    color: #eee;
    }
    注：此方法push git 上，背景色无法显示，
    >

step 4. 运到的问题

  • TypeError: Cannot set property ‘lastIndex’ of undefined error, and error message as below
    --- highlight: enable: true line_number: true auto_detect: false --true改为false tab_replace: ---