Hexo搭建

经过一天的折磨,终于在10点之前把GitHub+Hexo给搭起来了,我配置的主题是NexT,战线拉得虽然有些长,但是有很多感悟。

第一次自己搭建博客系统,尤其是对git使用还一知半解的情况下,最后取得成功感觉很满足。同时发现随着自己对行业的了解和自己能力的一步步提升,这种感触越来越深。有时,一个问题搞一天也得不到想要的结果,急的暴跳如雷,情绪异常激动,稍不留神就影响他人,同时也影响自己。但是当最后成功解决问题后,内心获得巨大的满足感的同时,相信更应该去考虑自己处理问题方式和思路。


Hexo安装

不过多废话了,进入正题。
我的安装过程是按照网上百度的几篇Hexo系列教程安装的,可以说每个人的安装教程各有优缺点,但总体来说都是不错的,几篇文章相互借鉴,基本上遇到的问题都能解决,即时没有在这几篇文档里找到自己遇到的问题,百度一下(Google更好)也都能解决。

安装参考文章

  1. Hexo系列教程: (一)Hexo介绍
  2. Hexo系列教程之一:hexo-github搭建独立博客
  3. Hexo常见问题解决方案

按照上面三位博主的教程相互对比查看,终于在放学之前(22:30实验室关门)搭建完成整个Hexo。接下来记录一下自己的一些小问题,方便以后遇到的时候,有地方查资料,另外安装完成才发现Hexo的官方文档(网站右上角有语言切换,默认英语)和NexT主题的官方安装教程。


Hexo安装小记录

  1. Git版本冲突

    问题描述:
    电脑Windows10 64位,朋友传了一个Git 32位版本,还特意告诉我没有任何问题,64位也能运行,然后我就自信满满的开始安装,结果不知道是网速原因还是Windows10的原因,始终停留在 “npm install -g hexo”这一步,死活过不去。正常来说一般挺多一两分钟就完了(可能更快),但是我这活活搞了半小时没安装上hexo,抱着试试看的态度去换了一个Git 64位版本,立马成功(可能有些电脑不会出现此情况)。

  2. Hexo的文件目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .deploy_git: hexo和gitHub的同步目录,这个文件夹在第一次本地与GitHub同步时才会出现(hexo deploy命令执行后)。
    node_modules:hexo本地安装的插件目录(比如:npm install hexo-deployer-git --save命令安装的插件hexo-deployer-git,就在此文件下有一个文件夹)。
    scaffolds:模板布局文件目录,通过“ hexo new page [文件名]”新建的文件就是利用的该目录下page.md的布局模板生成的。
    source:资源目录,博客、图片、站点图片等相关的资源都在这个文件目录下存着。
    themes: 主题的存放路径,配置主题或者自定义主题时经常用。
    _config.yml:hexo 配置文件,刚开始搭建的时候需要手动常用。
  3. _config.yml配置文件

    为了方便阅读,我分了一下代码块,下面都是_config.yml文件内的配置项。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    # Site ##站点配置
    title: 前端小开发 ##站点名称,一级标题
    subtitle: 随笔 分享 笔记 ##站点二级标题
    description: 分享前端技术 整理学习笔记 ##站点简介(个人简介)
    author: 彬仔 ##站点博主昵称
    avatar: /images/avatar.png ##站点博主头像(自定义添加的,照片存放在source/images路径下)
    language: zh-Hans ##站点语言
    timezone: Asia/Hong_Kong ##站点时区
    # URL ##网址
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    ## 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
    url: https://chping2125.github.io/ ##没有子目录则设置为username.github.io(资源的引用会将该URL拼在资源路径前面)
    root: /
    permalink: :year/:month/:day/:title/ ##如果有子目录生成文件名字的格式我改成blog/:title:year:month:day/,否则不改
    permalink_defaults:
    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
    # Directory ##资源目录配置
    source_dir: source ##站点资源文件夹(即Hexo的文件目录中source文件夹)
    public_dir: public ##站点公共文件夹(这个文件夹用于存放生成的站点文件,一般为临时文件"hexo g"命令后会生成,“hexo clean”命令会删除该文件)
    tag_dir: tags ##标签文件夹
    archive_dir: archives ##归档文件夹
    category_dir: categories ##分类文件夹
    code_dir: downloads/code ##nclude code 文件夹
    i18n_dir: :lang ##国际化(i18n)文件夹
    skip_render: README.md ##跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。(GitHub中的README.md就配置在这里,防止渲染)
    # Writing ##博客文章
    new_post_name: :title.md # File name of new posts ##默认文章名称
    default_layout: post ##默认文章布局样式
    titlecase: false ##小写文章标题
    external_link: true ##在新标签中打开一个外部链接,默认为true
    filename_case: 0 ##转换文件名,1代表小写;2代表大写;默认为0,意思就是创建文章的时候,是否自动帮你转换文件名,默认就行,意义不大。
    render_drafts: false ##是否渲染_drafts目录下的文章,默认为false
    post_asset_folder: false ###启动 Asset 文件夹
    relative_link: false ##把链接改为与根目录的相对位址,默认false
    future: true ##显示未来的文章,默认false
    highlight: ##代码块的设置
    enable: true ##默认开启
    line_number: true ##行号,默认开启
    auto_detect: false ##自动检测
    tab_replace:
    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
    # 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 ##每页显示的文章量 (0 = 关闭分页功能)
    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: ##部署地址github设置
    type: git ## 部署的位置 写git
    repository: git@github.com:chping2125/chping2125.github.io.git
    ## 这里填写项目的地址 git@github.com:Git用户名/Git用户名.github.io.git 参照上面
    branch: master ## 分支选择 master
    ####自定义第三方插件
    # Share ##博客文章分享功能
    ##Duoshuo_Share ##多少分享
    duoshuo_shortname: chping ##就是在多少设置的站点名称
    duoshuo_share: true
    ##JiaThis_Share ##JiaThis分享
    jiathis: false
    ##baidu_Share ##百度分享
    baidushare: false
    #BaiDu_Analytics ##百度分析
    baidu_analytics: c8027b8ba4beebe6ebe89d22781de0a1
    ##search ##搜索功能
    search:
    path: search.xml
    field: post

    配置文件的第三方配置部分是自定义添加的。

  4. 主题目录(以NexT为例)

    next目录

    1. 主题语言目录
      该文件夹主要是各种NexT主题内置的语言包,如果主题定制的时候,添加的内容在语言包中没有对应的映射,则需要自己添加(如:以简体中文为例,若你需要添加一个菜单项,比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml,在 menu 字段下添加一项:something: 有料)。
    2. 主题结构目录
      该文件夹是主题的HTML结构,想改动主题的大结构,可以在这里找到对应的部分修改。
    3. 主题行为目录
      该文件夹是主题的部分js文件。
    4. 主题资源目录
      该文件下资源比较多,有css文件、fonts文件、img文件、js文件、其他。其中最常用的就是css文件,和主题结构目录相结合进行定制用的最多的文件目录,再结合下图详细记录一下。
      next-css文件目录
      i. _common文件下包括三个文件夹:
      scaffolding文件夹下放得是css样式重置文件
      outline文件夹下放得是主题大结构的的css文件,包括header/main/footer等结构的样式。
      components文件夹下放的事主题的各个模块的样式,命名方式和模块一样,想改哪里就改哪里。
      
      ii. _custom文件下包括一个custom.styl文件,在该文件内编辑的任何css样式优先级最高,所以可以将自定义修改的css样式写在这里面。
      iii. _mixins文件下放置的事混合开发的一些样式,自适应适配用。该文件夹下也有一个custom.styl文件,用于自定义适配样式。
      iiii. _schemes文件下放置的是NexT自带的三个主题单独配置文件,当你自定义修改时,如果在_common文件夹下没有找到对应的样式,那么它肯定在这里面呢,找到你对应的主题下修改就好了。
      vi. _variables文件夹下放置的是变量的文件,包括数值型的变量(高度,宽度等)和默认颜色变量等。其中该文件夹下也有一个custom.styl文件,用于自定义适配样式。
      vii. main.styl文件将各个模块的样式文件引入。
      css优先级为:_custom > _schemes > _common/_mixins
  5. 主题配置文件

    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
    # ---------------------------------------------------------------
    # Site Information Settings
    # ---------------------------------------------------------------
    # Put your favicon.ico into `hexo-site/source/` directory.
    favicon: /favicon.ico ##站点图片,“/”为站点根目录下的sourse文件
    # Set default keywords (Use a comma to separate)
    keywords: "前端,技术,HTML,CSS,JS,NodeJs" ##站点关键字,
    # Set rss to false to disable feed link.
    # Leave rss as empty to use site's feed link.
    # Set rss to specific value if you have burned your feed already.
    rss: ##rss设置,需下载插件
    # Specify the date when the site was setup
    since: 2015 ##底部时间设置格式: 2015-今年
    # ---------------------------------------------------------------
    # Menu Settings
    # ---------------------------------------------------------------
    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
    menu: ##菜单设置,“/”:站点根目录下的文件或文件夹
    home: /
    categories: /categories
    tags: /tags
    archives: /archives
    about: /about
    #commonweal: /404.html
    # Enable/Disable menu icons.
    # Icon Mapping:
    # Map a menu item to a specific FontAwesome icon name.
    # Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
    # When an question mask icon presenting up means that the item has no mapping icon.
    menu_icons:
    enable: true
    #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
    home: home
    about: user
    categories: th
    tags: tags
    archives: archive
    commonweal: heartbeat
    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
    # ---------------------------------------------------------------
    # Scheme Settings
    # ---------------------------------------------------------------
    # Schemes ##next的三个scheme
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    # ---------------------------------------------------------------
    # Font Settings
    # - Find fonts on Google Fonts (https://www.google.com/fonts)
    # - All fonts set here will have the following styles:
    # light, light italic, normal, normal intalic, bold, bold italic
    # - Be aware that setting too much fonts will cause site running slowly
    # - Introduce in 5.0.1
    # ---------------------------------------------------------------
    font: ##字体设置
    enable: true
    # Uri of fonts host. E.g. //fonts.googleapis.com (Default)
    host:
    # Global font settings used on <body> element.
    global:
    # external: true will load this font family from host.
    external: true
    family: Lato
    # Font settings for Headlines (h1, h2, h3, h4, h5, h6)
    # Fallback to `global` font settings.
    headings:
    external: true
    family:
    # Font settings for posts
    # Fallback to `global` font settings.
    posts:
    external: true
    family:
    # Font settings for Logo
    # Fallback to `global` font settings.
    # The `size` option use `px` as unit
    logo:
    external: true
    family:
    size:
    # Font settings for <code> and code blocks.
    codes:
    external: true
    family:
    # ---------------------------------------------------------------
    # Sidebar Settings
    # ---------------------------------------------------------------
    # Social Links
    # Key is the link label showing to end users.
    # Value is the target link (E.g. GitHub: https://github.com/iissnan)
    social: ##社交账号设置
    Weibo: http://weibo.com/chengping2125
    GitHub: https://github.com/chping2125
    # Social Links Icons
    # Icon Mapping:
    # Map a menu item to a specific FontAwesome icon name.
    # Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
    # When an globe mask icon presenting up means that the item has no mapping icon.
    social_icons: ##社交账号对应的小图标
    enable: true
    # Icon Mappings.
    # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
    GitHub: github
    Twitter: twitter
    Weibo: weibo
    # Sidebar Avatar
    # in theme directory(source/images): /images/avatar.jpg
    # in site directory(source/uploads): /uploads/avatar.jpg
    avatar: /images/avatar.png ##站点博主头像设置,站点配置中已设置
    # Table Of Contents in the Sidebar
    toc: ##文章自动显示目录
    enable: true
    # Automatically add list number to toc.
    ##目录是否自动显示数字序号
    number: true
    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
    # Creative Commons 4.0 International License.
    # http://creativecommons.org/
    # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
    #creative_commons: by-nc-sa
    #creative_commons:
    sidebar: ##侧边栏设置
    # Sidebar Position, available value: left | right
    #position: left ##侧边栏位置设置,左右两种
    position: right
    # Sidebar Display, available value:
    # - post expand on posts automatically. Default.
    # - always expand for all pages automatically
    # - hide expand only when click on the sidebar toggle icon.
    # - remove Totally remove sidebar including sidebar toggler.
    display: post ##侧边栏显示设置,提供四种,默认post,区别就是显示的时机不同
    #display: always
    #display: hide
    #display: remove
    # Blogrolls ##侧边栏链接设置
    links_title: 推荐链接
    #links_layout: block
    links_layout: inline
    links:
    阮一峰: http://www.ruanyifeng.com/
    张鑫旭: http://www.zhangxinxu.com/
    Aaron: http://www.haorooms.com/
    牛客网: http://www.nowcoder.com/
    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
    # ---------------------------------------------------------------
    # Misc Theme Settings ##NexT主题中的misc主题设置
    # ---------------------------------------------------------------
    # Custom Logo.
    # !!Only available for Default Scheme currently.
    # Options:
    # enabled: [true/false] - Replace with specific image
    # image: url-of-image - Images's url
    custom_logo:
    enabled: false
    image:
    # Code Highlight theme
    # Available value:
    # normal | night | night eighties | night blue | night bright
    # https://github.com/chriskempson/tomorrow-theme
    highlight_theme: normal
    # Automatically scroll page to section which is under <!-- more --> mark.
    scroll_to_more: true
    # Automatically Excerpt. Not recommand.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt: ##主页文章折叠,显示查看更多按钮,不建议使用。建议使用“<!-- more -->”代替
    enable: false
    length: 150
    # Wechat Subscriber
    #wechat_subscriber: ##微信支持
    #enabled: true
    #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
    #description: ex. subscribe to my blog by scanning my public wechat account
    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
    # ---------------------------------------------------------------
    # Third Party Services Settings ##第三方应用支持
    # ---------------------------------------------------------------
    # MathJax Support
    mathjax:
    enable: true
    cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    # Swiftype Search API Key
    #swiftype_key:
    # Baidu Analytics ID
    #baidu_analytics: c8027b8ba4beebe6ebe89d22781de0a1
    # Duoshuo ShortName
    #duoshuo_shortname: chping
    # Disqus
    #disqus_shortname:
    # Baidu Share
    # Available value:
    # button | slide
    #baidushare:
    ## type: button
    # Share
    #jiathis:
    #add_this_id:
    # Share
    #duoshuo_share: true
    # Google Webmaster tools verification setting
    # See: https://www.google.com/webmasters/
    #google_site_verification:
    # Google Analytics
    #google_analytics:
    # CNZZ count
    #cnzz_siteid:
    # Make duoshuo show UA
    # user_id must NOT be null when admin_enable is true!
    # you can visit http://dev.duoshuo.com get duoshuo user id.
    duoshuo_info:
    ua_enable: true
    admin_enable: true
    user_id: 6257465157467767553
    admin_nickname: 彬仔
    # Facebook SDK Support.
    # https://github.com/iissnan/hexo-theme-next/pull/410
    facebook_sdk:
    enable: false
    app_id: #<app_id>
    fb_admin: #<user_id>
    like_button: #true
    webmaster: #true
    # Show number of visitors to each article.
    # You can visit https://leancloud.cn get AppID and AppKey.
    leancloud_visitors:
    enable: true
    app_id: 8oHQTcoEX25FOPclwvl0Fh2A-gzGzoHsz
    app_key: QFHjBCnX5GEB8TGU5B6prx90
    # Show PV/UV of the website/page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi/
    busuanzi_count:
    # count values only if the other configs are false
    enable: false
    # custom uv span for the whole site
    site_uv: true
    site_uv_header: <i class="fa fa-user"></i>
    site_uv_footer:
    # custom pv span for the whole site
    site_pv: true
    site_pv_header: <i class="fa fa-eye"></i>
    site_pv_footer:
    # custom pv span for one page only
    page_pv: true
    page_pv_header: <i class="fa fa-file-o"></i>
    page_pv_footer:
    # Tencent analytics ID
    # tencent_analytics:
    # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
    baidu_push: true
    # Dashang ##打赏功能
    reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
    wechatpay: /images/weixin.JPG
    alipay: /images/alipay.JPG
    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
    #! ---------------------------------------------------------------
    #! DO NOT EDIT THE FOLLOWING SETTINGS ##下面的不要修改
    #! UNLESS YOU KNOW WHAT YOU ARE DOING
    #! ---------------------------------------------------------------
    # Motion
    use_motion: true
    # Fancybox
    fancybox: true
    # Script Vendors.
    # Set a CDN address for the vendor you want to customize.
    # For example
    # jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
    # Be aware that you should use the same version as internal ones to avoid potential problems.
    vendors:
    # Internal path prefix. Please do not edit it.
    _internal: vendors
    # Internal version: 2.1.3
    jquery:
    # Internal version: 2.1.5
    # http://fancyapps.com/fancybox/
    fancybox:
    fancybox_css:
    # Internal version: 1.0.6
    # https://github.com/ftlabs/fastclick
    fastclick:
    # Internal version: 1.9.7
    # https://github.com/tuupola/jquery_lazyload
    lazyload:
    # Internal version: 1.2.1
    # http://VelocityJS.org
    velocity:
    # Internal version: 1.2.1
    # http://VelocityJS.org
    velocity_ui:
    # Internal version: 0.7.9
    # https://faisalman.github.io/ua-parser-js/
    ua_parser:
    # Internal version: 4.4.0
    # http://fontawesome.io/
    fontawesome:
    # Assets
    css: css
    js: js
    images: images
    # Theme version
    version: 5.0.1
  6. 域名绑定

    i. 域名绑定的时候,在万网或者其他机构购买域名,第一次可能需要填写个人信息,填完了,点击上面的域名解析->解析设置->添加解析,记录类型选A或CNAME,A记录的记录值就是ip地址,github提供了两个IP地址,192.30.252.153和192.30.252.154,随便填一个就行,解析记录设置两个www和不填,线路就默认就行了,CNAME记录值填你的github博客网址imwillxue.github.io(如下图)
    域名解析
    ii. 在source文件夹里创建CNAME文件,不带任何后缀,里面添加你的域名信息,如:qiuncheng.com(注意前面不添加http://)
    CNAME文件
    iii. 然后就hexo d && hexo -g 访问你的网站吧。

  7. 总结

    终于写完了自己的Hexo小记录,其实还有一些小细节的东西没有去写,抽个时间在写一篇吧。下一篇想写一下markDown的使用,也是通过Hexo的搭建和使用才接触到markDown的,基本用法已经掌握了,也记录一下。
测试功能而已,你非要赏点我就没办法了...