github整合hexo搭建个人博客教程

---

阔别hexo两年，在朋友的劝说下又重新拾捣了起来，面对早已遗忘的操作步骤和命令，一时间竟无从下手，幸而朋友的远程和视频手把手教学以及hexo官网的文档帮助（此处感谢@好基友 ClanceyHuang的帮助），才终于成功搭建成功。特此记录hexo的安装步骤以及和github整合的相关流程，以备不时之需！

hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装

前置准备

安装hexo需要提前安装一下服务：

• Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
• Git

安装hexo

所有必备的应用程序安装完成后，即可使用npm安装hexo

npm install -g hexo-cli

版本限制

官网建议永远安装最新版本的hexo，以及推荐的Node.js版本，详见下表格（资料来源于官网：https://hexo.io）

Hexo 版本	最低兼容 Node.js 版本
5.0+	10.13.0
4.1 - 4.2	8.10
4.0	8.6
3.3 - 3.9	6.9
3.2 - 3.3	0.12
3.0 - 3.1	0.10 or iojs
0.0.1 - 2.8	0.10

建站

初始化hexo项目

安装hexo后，执行以下命令，hexo将会在指定文件夹中新建所需要的文件

hexo init <floder>

新建完成后，指定文件夹的目录如下：

.
├── _config.yml     
├── package.json     
├── scaffolds       
├── source          
|   ├── _drafts     
|   └── _posts       
└── themes           

构建github项目

• 新建个人博客项目，项目名按照.github.io格式，为github上的用户名，且该项目需要设置为public，因为需要发布供访问静态页面，该静态页面由源博客项目解析而成。

• 新建博客源项目，用于存放原始的博客数据，项目名可自定义，此处以为名，该项目设为私有仓库。

如下：

文件目录

_config.yml

站点的配置信息

常见配置如下，详情参见官网：https://hexo.io/zh-cn/docs/configuration 配置

# Site
title: Hatcher  #网站标题
subtitle: ''    #网站副标题
description: '' #网站描述
keywords:       #网站关键词
author: Hatcher #您的名字
language: en    #网站使用的语言
timezone: ''    #网站时区

# URL网址
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://www.hatcher.live
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory 目录
source_dir: source #资源文件夹，这个文件夹用来存放内容。
public_dir: public #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags      #标签文件夹
archive_dir: archives  #归档文件夹
category_dir: categories  #分类文件夹
code_dir: downloads/code  #Include code 文件夹，source_dir 下的子目录
i18n_dir: :lang  #国际化（i18n）文件夹
skip_render:  #跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

# Writing 文章
new_post_name: :title.md # 新文章的文件名称
default_layout: post # 预设布局
titlecase: false # 把标题转换为 title case
external_link:
  enable: true # 在新标签中打开链接
  field: site # 对整个网站（site）生效或仅对文章（post）生效
  exclude: '' #需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false #显示草稿
post_asset_folder: false #启用Assert文件夹
relative_link: false #把链接改为与根目录的相对位址
future: true #显示未来的文章

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# 分类&标签
default_category: uncategorized
category_map: #分类别名
tag_map: #标签别名

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

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

# 包括或不包括目录和文件
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# 主题
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: pure

# 部署
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  ## 部署类型 
  type: git
  ## 指定解析的博客仓库
  repository: 
  ## 仓库分支
  branch: 

##代码块的高亮配置，启用了prism插件需要关键原生的highlight配置，启动prismjs.enable配置
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false 
  preprocess: true
  line_number: true
  tab_replace: ''
prism_plugin:
  mode: 'preprocess' # realtime/preprocess
  theme: 'synthwave84' # 代码快的主题，详情参见https://github.com/PrismJS/prism-themes#available-themes
  line_number: true # 是否显示行号

package.json

应用程序的信息

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server",
    "public": "hexo clean && hexo g && hexo d"
  },
  "hexo": {
    "version": "5.3.0"
  },
  "dependencies": {
    "hexo": "^5.3.0",
    "hexo-asset-image": "^1.0.0",
    "hexo-deployer-git": "^2.1.0",
    "hexo-filter-mermaid-diagrams": "^1.0.5",
    "hexo-fs": "^2.0.1",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^2.2.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-json-content": "^4.2.3",
    "hexo-generator-search": "^2.4.0",
    "hexo-generator-sitemap": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-neat": "^1.0.8",
    "hexo-permalink-pinyin": "^1.1.0",
    "hexo-prism-plugin": "^2.3.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^3.3.0",
    "hexo-renderer-stylus": "^2.0.0",
    "hexo-server": "^2.0.0",
    "hexo-wordcount": "^6.0.1"
  },
  "devDependencies": {
    "hexo-renderer-jade": "^0.4.1"
  }
}

scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

如下为默认的post配置，即每个新建的post文章里面则都会附加title和date信息。

---
title: {{ title }}
date: {{ date }}
tags:
---

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

主题详情可以参考：https://hexo.io/themes/

示例主题配置

以 pure主题 为例，详情见：https://github.com/cofess/hexo-theme-pure

• 安装主题

  git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

• 将从git上的拉取下来的代码复制到themes目录下，并在配置文件中设置theme配置项为主题的工程名称

• 主题配置文件：

  在主题工程下，有一个_config.yml配置文件，可以配置一些网站的基础信息

  # 配置信息
  menu:
    Home: .
    Archives: archives  # 归档
    Categories: categories  # 分类
    Tags: tags  # 标签
    Repository: repository  # github repositories
  #  Books: books  # 豆瓣书单
    Links: links  # 友链
    About: about  # 关于
  
  # Enable/Disable menu icons
  menu_icons:
    enable: true  # 是否启用导航菜单图标
    home: icon-home-fill
    archives: icon-archives-fill
    categories: icon-folder
    tags: icon-tags
    repository: icon-project
    books: icon-book-fill
    links: icon-friendship
    about: icon-cup-fill
  
  # rss
  rss: /atom.xml
  
  # 网站
  site:
    logo:
      enabled: true
      width: 40
      height: 40
      url: /favicon.png
  #    url: ../images/logo.png
    title: Hatcher # 页面title
    favicon: /favicon.png
    board: <p>欢迎交流与分享经验!</p> # 站点公告
    copyright: true # 底部版权信息
  
  # 配置信息
  config:
    skin: # 主题颜色 theme-black theme-blue theme-green theme-purple
    layout: main-center # 布局方式 main-left main-center main-right
    toc: true # 是否开启文章章节目录导航
    menu_highlight: false # 是否开启当前菜单高亮显示
    thumbnail: false # enable posts thumbnail, options: true, false
    excerpt_link: Read More
  
  # Pagination
  pagination:
    number: false
    prev: 
      alwayShow: true
    next:
      alwayShow: true
  
  # Sidebar
  sidebar: right
  widgets:
    - board  
    - category
    - tag
    - tagcloud
    - archive
    - recent_posts
  
  # display widgets at the bottom of index pages (pagination == 2)
  index_widgets:
  # - category
  # - tagcloud
  # - archive  
  
  # widget behavior
  archive_type: 'monthly'
  show_count: true
  
  # Fancybox
  fancybox: false
  
  # Search
  search:
    insight: true # you need to install `hexo-generator-json-content` before using Insight Search
    baidu: false # you need to disable other search engines to use Baidu search
  
  # Donate
  donate:
    enable: false
    # 微信打赏
    wechatpay:
      qrcode: images/donate/wechatpayimg.png
      title: 微信支付
    # 支付宝打赏
    alipay: 
      qrcode: images/donate/alipayimg.png 
      title: 支付宝
  
  # Share
  # weibo,qq,qzone,wechat,tencent,douban,diandian,facebook,twitter,google,linkedin
  share:
    enable: true  # 是否启用分享
    sites: weibo,qq,wechat,facebook,twitter  # PC端显示的分享图标
    mobile_sites: weibo,qq,qzone  # 移动端显示的分享图标
  
  # Github
  github: 
    username: xiehqing  # github username
  
  # 评论系统
  # Gitment
  # Introduction: https://imsun.net/posts/gitment-introduction/
  comment:
    type: valine  # 启用哪种评论系统
    disqus:  # enter disqus shortname here
    youyan: 
      uid: 1783844 # enter youyan uid 
    livere:
      uid: # enter youyan uid 
    gitment:
      githubID: 
      repo: 
      ClientID: 
      ClientSecret: 
      lazy: false
    gitalk: # gitalk. https://gitalk.github.io/
      owner:  #必须. GitHub repository 所有者，可以是个人或者组织。
      admin:  #必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
      repo:  #必须. GitHub repository.
      ClientID:  #必须. GitHub Application Client ID.
      ClientSecret:  #必须. GitHub Application Client Secret.
    valine: # Valine. https://valine.js.org
      appid:  # your leancloud application appid
      appkey:  # your leancloud application appkey
      notify: false # mail notifier , https://github.com/xCss/Valine/wiki
      verify: false # Verification code
      placeholder: Just go go # comment box placeholder
      avatar: mm # gravatar style
      meta: nick,mail,link # custom comment header
      pageSize: 10 # pagination size
      visitor: false # Article reading statistic https://valine.js.org/visitor.html
  
  # douban 豆瓣书单
  # Api：
    # https://developers.douban.com/wiki/?title=book_v2 图书
    # https://developers.douban.com/wiki/?title=movie_v2 电影
  # books：  
    # https://api.douban.com/v2/book/user/:name/collections?start=0&count=100 个人书单列表
  # movies: 
    # https://api.douban.com/v2/movie/in_theaters 正在上映的电影
    # https://api.douban.com/v2/movie/coming_soon 即将上映的电影
    # https://api.douban.com/v2/movie/subject/:id 单个电影信息
    # https://api.douban.com/v2/movie/search?q={text} 电影搜索
  douban:
    user: # 豆瓣用户名
    start: 0 # 从哪一条记录开始
    count: 100 # 获取豆瓣书单数据条数
    
  # PV
  pv:
    busuanzi:
      enable: false  # 不蒜子统计
    leancloud:
      enable: false  # leancloud统计
      app_id: # leancloud <AppID>
      app_key: # leancloud <AppKey>
          
  # 统计
  postCount:
    enable: false
    wordcount: true  # 文章字数统计
    min2read: true  # 阅读时长预计 
  
  # Plugins
  plugins:
    google_analytics: # enter the tracking ID for your Google Analytics
    google_site_verification: # enter Google site verification code
    baidu_analytics: # enter Baidu Analytics hash key
    tencent_analytics: 
    
  # Miscellaneous
  twitter:
  google_plus:
  fb_admins:
  fb_app_id:  
    
  # profile
  profile:
    enabled: true # Whether to show profile bar
    avatar: images/avatar.jpg
    gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
    author: Hatcher
    author_title: Java Developer
    author_description: 个人简介。
    location: Shanghai, China
    follow: https://github.com/xiehaiqing
    # Social Links
    social:
      links:
        github: https://github.com/cofess
        weibo: http://weibo.com/cofess
        twitter: https://twitter.com/iwebued
        # facebook: /
        # dribbble: /
        behance: https://www.behance.net/cofess
        rss: atom.xml
      link_tooltip: true # enable the social link tooltip, options: true, false
    # My Skills 
    skills:
      Git: ★★★☆☆
      Gulp: ★★★☆☆
      Javascript: ★★★☆☆
      HTML+CSS: ★★★☆☆
      Bootstrap: ★★★☆☆
      ThinkPHP: ★★★☆☆
      平面设计: ★★★☆☆
    # My Personal Links
    links:
      Github: https://github.com/cofess
      Blog: http://blog.cofess.com
      微博: http://weibo.com/cofess
      花瓣: http://huaban.com/cofess
      Behance: https://www.behance.net/cofess
    # My Personal Labels
    labels:
      - 前端
      - 前端开发
      - 前端重构
      - Web前端
      - 网页重构
    # My Personal Works
    works:
      项目名:
        link: http://www.example.com
        date: 2016
    # My Personal Projects
    projects:
      中文: https://github.com/cofess/gulp-startpro
      cofess/hexo-theme-pure: https://github.com/cofess/hexo-theme-pure

操作命令

详情见官网：https://hexo.io/zh-cn/docs/commands，以下贴出常用命令

进入工程所在目录下：

• 工程构建

  npm install

• 生成静态文件

  hexo generate || hexo g

• 启动服务器。默认情况下，访问网址为： http://localhost:4000/。

  hexo server || hexo s

  选项	描述
  -p, --port	重设端口
  -s, --static	只使用静态文件
  -l, --log	启动日记记录，使用覆盖记录格式

• 部署网站

  hexo deploy || hexo d

• 清除缓存文件 (db.json) 和已生成的静态文件 (public)。

  hexo clean

• 新建一篇文章

  hexo new [layout] <title>

  参数	描述
  -p, --path	自定义新文章的路径
  -r, --replace	如果存在同名文章，将其替换
  -s, --slug	文章的 Slug，作为新文章的文件名和发布后的 URL

CNAME配置

在根目录的source目录下新建CNAME文件，填写解析的域名，即可关联到自己的域名上