JobbyM's Blog

GitHub Pages + Hexo 搭建博客

发表于 | 分类于 | | 阅读次数

一、简介

这是一篇使用GitHub Pages 和Hexo 搭建免费独立博客的总结。

  1. Hexo
    Hexo 是一个快速、简单且功能强大的Node.js 博客框架。

    A fast,simple & powerful blog framework,powered by Node.js

  2. GitHub Pages
    GitHub Pages 可以被认为是用户编写的、托管在GitHub 上的静态网页。

    Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, adn your changes are live.

二、Hexo

  1. 安装Hexo

    1
    $ npm install -g hexo-cli

  2. 使用Hexo 建站

    2.1 使用hexo init 初始化个人博客

    1
    $ hexo init hexo-blog

    2.2 进入站点目录，并安装依赖包

    1
    2
    $ cd hexo-blog
    $ npm install

    2.3 启动本地服务

    1
    $ hexo server

    2.4 访问浏览器 http://localhost:4000 就可以在本地进行预览了。

三、GitHub Pages 仓库

  1. 创建对应仓库
    在自己的GitHub 帐号下创建一个新的仓库，命名为JobbyM.github.io
  2. 创建hexo 分支，hexo 用来存放Hexo 生成的网站原始的文件，master 分支用来存放生成的静态网页

四、部署到GitHub 上

  1. 部署到GitHub 上需要进行配置_config.yml 文件，将_config.yml 中的
    1
    2
    3
    4
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type:
    按照如下进行修改
    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: https://github.com/JobbyM/JobbyM.github.io.git
      branch: master
  2. 本地运行如下命令进行部署
    1
    $ hexo deploy
  3. 在浏览器中访问 https://jobbym.github.io/index.html

五、搭建流程

  1. 初始化个人博客
    1
    $ hexo init hexo-blog
  2. 进入hexo-blog 目录，进行git 初始化
    1
    2
    $  cd hexo-blog
    $  git init
  3. 添加远程主机
    1
    $ git remote add origin https://github.com/JobbyM/JobbyM.github.io.git
  4. 更改默认分支为hexo
    1
    $ git checkout -b hexo
  5. 提交文件到本地
    1
    2
    3
    $  git add .
    $  git commit -m "hexo-blog init and git init"
    $  git pull origin hexo
    产生冲突
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    warning: no common commits
    remote: Counting objects: 4, done.
    remote: Compressing objects: 100% (3/3), done.
    remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0
    Unpacking objects: 100% (4/4), done.
    From https://github.com/JobbyM/JobbyM.github.io
     * branch            hexo       -> FETCH_HEAD
     * [new branch]      hexo       -> origin/hexo
    Auto-merging .gitignore
    CONFLICT (add/add): Merge conflict in .gitignore
    Automatic merge failed; fix conflicts and then commit the result.
  6. 处理冲突，再次将代码进行提交
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $ git status
    On branch hexo
    You have unmerged paths.
      (fix conflicts and run "git commit")
    Changes to be committed:
            new file:   README.md
    Unmerged paths:
      (use "git add <file>..." to mark resolution)
            both added:      .gitignore
    代码提交
    1
    2
    3
    $  git add .
    $  git commit -m "fix conflict in .gitignore"
    $  git push -u origin hexo
    提交结果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Counting objects: 110, done.
    Delta compression using up to 4 threads.
    Compressing objects: 100% (100/100), done.
    Writing objects: 100% (110/110), 521.17 KiB | 0 bytes/s, done.
    Total 110 (delta 2), reused 0 (delta 0)
    remote: Resolving deltas: 100% (2/2), done.
    To https://github.com/JobbyM/JobbyM.github.io.git
       77af381..57d0a0e  hexo -> hexo
    Branch hexo set up to track remote branch hexo from origin.
  7. 修改_config.yml 并进行提交
    1
    2
    3
    $  git add .
    $  git commti -m "modify _config.yml"
    $  git push origin hexo
  8. 安装hexo-deployer-git 模块，并进行代码提交
    1
    2
    3
    4
    $  npm install hexo-deployer-git --save
    $  git add .
    $  git commit -m "npm install hexo-deployer-git --save"
    $  git push origin hexo
  9. 部署
    1
    $ hexo deploy
    部署成功
    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
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    INFO  Deploying: git
    INFO  Setting up Git deployment...
    Initialized empty Git repository in D:/nodejs/hexo-blog/.deploy_git/.git/
    [master (root-commit) ae9275c] First commit
     1 file changed, 0 insertions(+), 0 deletions(-)
     create mode 100644 placeholder
    INFO  Clearing .deploy_git folder...
    INFO  Copying files from public folder...
    warning: LF will be replaced by CRLF in 2016/10/21/hello-world/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in archives/2016/10/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in archives/2016/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in archives/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in css/style.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-media.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.pack.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in js/script.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in 2016/10/21/hello-world/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in archives/2016/10/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in archives/2016/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in archives/index.html.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in css/style.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-media.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.css.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.pack.js.
    The file will have its original line endings in your working directory.
    warning: LF will be replaced by CRLF in index.html.
    The file will have its original line endings in your working directory.
    [master 9a77861] Site updated: 2016-10-21 15:45:40
     29 files changed, 5761 insertions(+)
     create mode 100644 2016/10/21/hello-world/index.html
     create mode 100644 archives/2016/10/index.html
     create mode 100644 archives/2016/index.html
     create mode 100644 archives/index.html
     create mode 100644 css/fonts/FontAwesome.otf
     create mode 100644 css/fonts/fontawesome-webfont.eot
     create mode 100644 css/fonts/fontawesome-webfont.svg
     create mode 100644 css/fonts/fontawesome-webfont.ttf
     create mode 100644 css/fonts/fontawesome-webfont.woff
     create mode 100644 css/images/banner.jpg
     create mode 100644 css/style.css
     create mode 100644 fancybox/blank.gif
     create mode 100644 fancybox/fancybox_loading.gif
     create mode 100644 fancybox/fancybox_loading@2x.gif
     create mode 100644 fancybox/fancybox_overlay.png
     create mode 100644 fancybox/fancybox_sprite.png
     create mode 100644 fancybox/fancybox_sprite@2x.png
     create mode 100644 fancybox/helpers/fancybox_buttons.png
     create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
     create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
     create mode 100644 fancybox/helpers/jquery.fancybox-media.js
     create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
     create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
     create mode 100644 fancybox/jquery.fancybox.css
     create mode 100644 fancybox/jquery.fancybox.js
     create mode 100644 fancybox/jquery.fancybox.pack.js
     create mode 100644 index.html
     create mode 100644 js/script.js
     delete mode 100644 placeholder
    warning: LF will be replaced by CRLF in js/script.js.
    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/JobbyM/JobbyM.github.io.git.
    To https://github.com/JobbyM/JobbyM.github.io.git
     + 77af381...9a77861 HEAD -> master (forced update)
    INFO  Deploy done: git
  10. 访问 https://jobbym.github.com/index.html

六、参考文档

  1. Hexo搭建Github静态博客
  2. GitHub Pages + Hexo搭建博客
  3. git远程操作详解