hexo 安装与配置


title: hexo 安装与配置

categories: 工具

tags: [Hexo,GitHub,多说评论]


总想弄个自己的博客,写一些东西(或感悟、或经验、或代码、或计划)。选择困难症的我纠结到底是用CSDN还是新浪抑或网易......还有很多,都挑花眼了,各有各的有点,也各有各的不足。那么到头来我为什么选择了Hexo + GitHub 来创建自己的博客呢?因为它没广告啊!!!当然还可以根据自己的喜好选择喜欢的主题,同时看着自己的作品是不是有一种满足感呢?最后,作为一个程序猿用别的博客怎么能体现程序猿的与众不同呢?

Hexo 简单介绍

hexo 是一个基于Node.js的静态博客框架,可以方便的生成静态网页并且托管在github 上。hexo是一个开源的博客框架,我们可以任意使用修改,但是很多功能要自己去实现,没有计算机基础的人使用起来可能比较困难。

准备

前面提到hexo是基于Node.js的博客框架,所以安装Hexo之前需要先Node.js 和设置 github(托管代码)

GitHub 设置

  • 首先你要注册一个github帐号
  • 创建一个库(new repository)命名为YourSiteName.github.io/
  • 根据自己的喜好简单设置一下github生成的静态网页

请参考

下载Git

安装Node.js

下载Node.js 并安装

Hexo 安装

  • 安装
$ npm install -g hexo-cli
  • 初始化

安装完成后,建一个文件夹(如hexo),执行以下指令(在hexo路径下),Hexo 即会自动在目标文件夹建立网站所需要的所有文件

$ hexo init 
  • 查看博客
$ hexo g
$ hexo s

然后在浏览器中输入localhost:4000 就可以看到你的博客了。

如果安装过程中出现错误可以尝试在命令行前加上 sudo

详情请参考

Hexo 基本使用

既然博客已经安装好了,那么怎么写博客呢?博客是基于MarkDown语法的,不了解MarkDown的请点击这里

编辑器MAC环境下免费的有Mou 和MacDown 比较给力,其他的不熟悉。

  • 创建文件
$ hexo new "Hexo使用"

或者直接进入hexo\source\_posts路径下添加 xxx.md 类型的文件,然后打开文件编辑

title: Hexo使用    // 标题
categories: hexo    // 分类
tags: [hexo,blog]  //标签,多个用逗号隔开
---

#这里是正文,用markdown编写
  • 预览
$ hexo g  
$ hexo s  
$ 访问localhost:4000预览效果。(退出server用Ctrl+c)
  • 提交到git

编辑hexo\_config.yml,把下面的 abc 换成你的用户名。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/abc/abc.github.io

保存文件并运行

$ hexo g  
$ hexo s  
$ hexo d

然后在浏览器输入abc.github.io 就能看到 Git 的博客发生了变化。

Hexo 配置

Okay

Hexo 的基本使用已经结束了,下面是怎样装饰你的博客了,如果你对默认的样式很满意,后面的可以跳过了。

我这里使用的主题是next

Hexo 有两个配置文件,在hexo路径下的 _config.yml 文件是 站点配置文件 ,在 hexo\themes\hexo-theme-next 路径下的 _config.yml 文件是主题配置文件

配置文件

  • 站点配置文件

      # Hexo Configuration
      ## Docs: https://hexo.io/docs/configuration.html
      ## Source: https://github.com/hexojs/hexo/
      
      # Site  这里的配置可以参考我的博客
      title: Try、Try Again!The worst result is failure!    // 博客title
      subtitle:   // 副标题
      description: 以出以入,以就鲜絜,似善化。其万折也必东,似志。是故君子见大水必观焉。 --  荀子·宥坐   // 描述
      author: 东折   // 作者
      language: zh-Hans  // 使用语言
      timezone:
      email: zhd_dong@163.com  // 邮箱
      
      # 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
      max_open_file: 100
      future: true
      highlight:
        enable: true
        line_number: true
        auto_detect: false
        tab_replace:
      
      # Category & Tag
      default_category: uncategorized
      category_map:
      tag_map:
      #archive: 1
      #category: 1
      #tag: 1
      
      # 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: hexo-theme-next  // 在这里设置想要的主题(主题对应的文件夹的名称)
      
      duoshuo_shortname: yulncbd   // 这里添加多说评论
      
      # Deployment  // 这里设置Git 的相关信息
      ## Docs: https://hexo.io/docs/deployment.html
      deploy:
        type: git
        repository: https://github.com/YulncBd/YulncBd.github.io  // 这里将YulncBd替换成自己用户名
    

站点配置文件 主要配置了博客简介,git,多说评论等一些信息。自己可以尝试一下其他的设置,看看什么效果。设置完成后执行一下命令查看结果

    hexo g
    hexo s
    hexo d
      
到用浏览器打开 `localhost:4000` 查看效果,再到 `你的用户名.github.io` 查看Git 上你博客的变化。
  • 主题配置文价

可以打开 zh-Hans.yml 文件查看对应的汉字设置

    # ---------------------------------------------------------------
    # Site Information Settings
    # ---------------------------------------------------------------
    
    # Put your favicon.ico into `hexo-site/source/` directory.
    favicon: /favicon.ico
    
    # Set default keywords (Use a comma to separate)
    keywords: "Hexo, NexT"
    
    # 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: false
    
    # Specify the date when the site was setup
    since: 2016
    # ---------------------------------------------------------------
    # Menu Settings
    # ---------------------------------------------------------------
    
    // 这里设置导航栏(添加了分类 和 标签,具体设置后面在介绍)
    # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
    menu:
      home: /
      archives: archives
      categories: categories
      tags: tags
      #about: about
      #tags: /tags
      #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
      search: search
    # ---------------------------------------------------------------
    # Scheme Settings
    # ---------------------------------------------------------------
    
    // 这里设置主题的样式(可以都选择看一下效果)
    # Schemes
    #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.
      code:
        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:
      简书: http://www.jianshu.com/
      GitHub: https://github.com/
      知乎: http://www.zhihu.com
      豆瓣: https://www.douban.com/
    
    // 这里设置链接的图片
    # 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: /uploads/avatar.png  
    # Table Of Contents in the Sidebar

    toc:
      enable: true
    
      # Automatically add list number to toc.
      number: true
   
    # 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
      #display: always
      #display: hide
      #display: remove

    # ---------------------------------------------------------------
    # Misc Theme Settings
    # ---------------------------------------------------------------
    
    # 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: night bright

    # 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:
      enable: true  // 博客能否收起
      length: 200   // 博客收起后显示高度
      excerpt_link: read_more #替换为中文  // 阅读全文

    # Wechat Subscriber
    wechat_subscriber:
      enabled: false
      qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
      description: hello ex. subscribe to my blog by scanning my public wechat account
    
    # ---------------------------------------------------------------
    # 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:
    
    # Duoshuo ShortName
    #duoshuo_shortname:
    
    # 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: false
      user_id: 0
      #admin_nickname: Author
      Author: hello
    
    // 设置Facebook信息
    # 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: false
      app_id: #<app_id>
      app_key: #<app_key>
    
    # 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: false

    #! ---------------------------------------------------------------
    #! 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
      fancybox:
    
      # Internal version: 1.0.6
      fastclick:
    
      # Internal version: 1.9.7
      lazyload:
    
      # Internal version: 1.2.1
      velocity:
    
      # Internal version: 1.2.1
      velocity_ui:
    
      # Internal version: 0.7.9
      ua_parser:
    
    # Assets
    css: css
    js: js
    images: images
    
    # Theme version
    version: 5.0.1
    
    // 这里设置的是打赏的信息
    # Donate 文章末尾显示打赏按钮
    reward_comment: 如果觉得写的不错,那就打赏一下吧! // 文字提示
    wechatpay: /uploads/weixin.png  //微信图片(本地图片或网络图片)
    #alipay: 此处为支付宝向我付款二维码图片的相对或者是绝对URL

分类和标签

  • 添加分类
cd hexo   // 进入博客路径
hexo new page categories  // 创建分类页面

然后进入到hexo\source\ categories路径下打开index.md文件,编辑保存。

---
title: categories
date: 2016-04-26 16:17:21
 type: "categories"
---

在主题配置文件里设置

menu:
    home: /
    archives: archives
    categories: categories   // 如果有问题在前面加一个反斜杠
    tags: tags
    #about: about
    #commonweal: /404.html
  • 添加标签
 cd hexo   // 进入博客路径
 hexo new page tags  // 创建分类页面

然后进入到hexo\source\ tags路径下打开index.md文件,编辑保存。

---
title: tags
date: 2016-04-26 16:17:21
 type: "tags"
---

在主题配置文件里设置

menu:
    home: /
    archives: archives
    categories: categories   
    tags: tags  // 如果有问题在前面加一个反斜杠
    #about: about
    #commonweal: /404.html

最后发表一篇文章(设置好分类和标签),执行一下命令查看结果

hexo g
hexo s
hexo d

头像

要在 source 路径下创建文件夹 uploads ,然后将要设置的图片拷到这里,设置如下

avatar: /uploads/avatar.png   // 在主题配置文件里设置(也可以用网络链接)

打赏

在主题配置文件底部添加以下代码:

// 这里设置的是打赏的信息
# Donate 文章末尾显示打赏按钮
reward_comment: 如果觉得写的不错,那就打赏一下吧! // 文字提示
wechatpay: /uploads/weixin.png  //微信图片(本地图片或网络图片)
#alipay: 此处为支付宝向我付款二维码图片的相对或者是绝对URL

图片的设置同头像设置一致。

多说评论

额,以为很麻烦,所以一开始没有设置,后来有时间想设置一下,发现 so easy!

先到多说 去申请一个站点,步骤如下:

1.登录后在首页选择 我要安装

2.创建站点,填写表格,多说域名这一栏填写的即是你的 duoshuo_shortname,如图:

3.创建站点完成后在 站点配置文件 中新增 duoshuo_shortname 字段,值设置成上一步中的值。

不用别的操作,只有3步就搞定。

总结

以上的设置只是一些基本的设置,先把博客用起来,后面在慢慢的去了解,去深入。关于404公益页面,域名,统计,搜索等功能暂未实现,感觉博客没必要弄那么多不必要的功能,如果你感兴趣可以去研究一下。

推荐阅读更多精彩内容