本文为作者使用Hexo博客的初次尝试,在作者参照网上相关资源搭建该博客的过程中,发现很多问题和弊端,例如,有的例程给出了方法,但是没有说明具体方法,非常不利于刚入门的小白们学习。为此,同样身为小白一员的博主有意记录在博客搭建过程中遇到的问题以及解决方法,期待对后来的学习者扫清障碍。

1.前期准备

  • Win10 专业版操作系统

  • node.js最新版(建议node-v6.11.0)

  • Git最新版(建议v2.6.2版)

  • Github账号

2.Git与Node安装

  • 无论是node.js,还是Git都可以安装在C盘以外的其他位置,在安装过程中无需修改默认选项,直接点下一步直至安装即可。

  • 强烈建议从官网上下载Node和Git,不好的是从官网下载速度极慢,可以想办法获取官网下载链接后再使用迅雷下载。

3.安装Hexo

(1)打开windows中的cmd或Git命令窗口(建议使用Git,毕竟是模拟Linux环境),输入以下命令:

1
$ npm install hexo-cli -g

注意: hexo与cli之间以“-”连接,无空格;

(2)在任意地址创建Hexo文件夹,在此文件夹下安装Hexo框架。此处可使用命令行创建Hexo文件夹,也可直接手动创建。我认为第二种方法更直接。我的Hexo项目的地址是:E:\Hexo。创建完后,进入该文件夹启动Git Bash Here,输入以下命令:

1
2
3
$ hexo init Hexo  // 第一个hexo是命令行,第二个Hexo是项目名称(为方便起见,建议直接使用Hexo作为项目名)
$ npm install // 安装Hexo框架
$ hexo server (或者是hexo s) // 启动Hexo本地服务(可到http://localhost:4000/查看),查看Hexo默认博客界面
  • 可使用crtl + c 关闭hexo本地服务(我觉得关不关都可以吧,只是为了能够继续在Git中输入命令而已)

(3)安装hexo主题:

  • 1
    git clone https://github.com/iissnan/hexo-theme-next themes/next

更多主题可在https://hexo.io/themes/ 上查找,但是我暂时还没找到使用NEXT以外主题的方法,暂时先这样,等哪天我想换主题时,再来尝试这部分内容。

  • 修改Hexo根目录配置文件_config.yml 内容(在修改前最好先备份,防止改错后不知道怎么恢复)

    1
    theme: next  // 冒号后面一定要有空格
  • 每次修改配置文件都要执行以下命令:

    1
    2
    3
    $ hexo clean // 删除上一次的配置文件,第一次不需要,第二次配置时需要
    $ hexo genrate (或 hexo g) // 生成静态博客所有内容
    $ hexo s //启动hexo本地服务,仅用于查看修改配置文件后的显示效果,无实际意义

4.将本地博客托管到GitHub

  • 登入个人账户

  • 新建仓库(creat a new repository),仓库命名格式为:user_name.github.io,例如geopassenger.github.io,仓库属性为Public属性

  • 生成本地ssh密钥:

    1
    ssh-keygen -t rsa -C "email adress" // 没必要一定要使用gmail邮箱,163邮箱就可以了

    这里会要求输入密钥存放文件名以及密钥密码,但是没有必要,直接回车即可,最后的密钥会存放在用户目录下.ssh文件夹中

  • 使用记事本或Notepad+打开密钥(有pub后缀的那个),粘贴到https://github.com/settings/keys对应位置并保存

5.将本地博客内容同步到GitHub

  • 安装两个重要插件

    1
    2
    $ npm install hexo-server --save        
    $ npm install hexo-deployer-git --save // 安装部署发布工具
  • 修改Hexo配置文件_config.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
    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
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    # Site
    title: Hexo // 博客名
    subtitle: // 博客副标题(可以理解为位于正标题下面的一句话)
    description: // 形容作者的一句话,位于作者名称下方
    author: John Doe // 作者名称
    language: // 建议使用简体中文:zh-Hans
    timezone: // 时区,可不管

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:

    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:

    # Writing
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
    enable: true
    line_number: true
    auto_detect: false
    tab_replace:

    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:

    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss

    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git
    repo: git@github.com:user_name/user_name.github.io.git
    branch: master
  • 部署

    1
    2
    3
    4
    hexo clean                        
    hexo generate //生成静态文件
    hexo server //本地预览,查看修改效果(这一步非必要)
    hexo deploy //关闭本地服务,使用部署命令部署到GitHub