基于Hexo的GitHub博客搭建流程

第1步：系统环境配置

• 1.安装Node.js
  • 安装了Node.js会自动安装npm包管理器
• 2.安装Git(自行官网下载)
• 3.安装Hexo
  • 打开CMD命令行窗口，输入npm install -g hexo

第2步：本地部署Hexo

• 1.初始化博客目录

  • hexo init （这个命令会初始化博客的目录，所以，执行这个命令时，在你想创建的目录下执行，就自动生成到对应目录下。）
    ├── node_modules
    ├── scaffolds
    ├── source
    └── _posts
    ├── themes
    └── landscape
    ├── .gitignore
    ├── _config.yml
    ├── yarn.lock(可以删除)
    └── package.json
    

• 2.个性化你的博客（全局配置）
  在根目录_config.yml里进行全局配置，可选。

• 3.本地启动博客

  • hexo g 生成本地public静态文件
  • hexo s启动本地服务器
  • 现在我们打开http://localhost:4000/ 已经可以看到一篇内置的blog了。

第3步：个性化主题

• 1.推荐主题

  • https://github.com/litten/hexo-theme-yilia（一个简洁优雅的hexo主题）
  • https://github.com/TryGhost/Casper（幽灵主题）

• 2.怎么使用主题
  这里以主题yilia为例进行说明。

  • 1)安装主题
    • hexo clean （根目录下执行命令）
    • git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
  • 2)启用主题
    • 修改Hexo目录（根目录）下的_config.yml配置文件中的theme属性，将其设置为yilia（默认是landscape）。
  • 3)本地启动
    • hexo g 生成本地public静态文件
    • hexo s 启动本地服务器
    • 现在我们打开http://localhost:4000/，会看到我们已经应用了一个新的主题。

• 3.部署到GitHub上

  • 1)GitHub新建一个仓库：xblog（名字自定义）
  • 2)修改Hexo目录（根目录）下的_config.yml配置文件
  • url：GitHub Pages网址（https://GitHub的名字.github.io/仓库名）
  • root：/仓库名/
    

• 3)修改根目录/themes/yilia/_config.yml配置文件

  • root：/仓库名/

• 4)将本地推送到GitHub远程仓库上

  • 在根目录下执行git bash，输入以下指令
  • hexo clean
  • hexo g
  • 此时会生成一个public文件夹，cd public
  • 本地版本管理
    • git init
    • git add -A
    • git commit -m “add blog”
      • 推送
        • 关联git remote add origin [e-mail]:sxzxiaofeng/xblog.git(这是ssh秘钥地址,没有配置就用http地址)
        • 推送 git push -u origin master（首次需要加上-u，后续不用）

• 5)设置仓库为GitHub Pages

• 6)演示网址：https://sxzxiaofeng.github.io/xblog/

• 第4步：补充

  • 1.如何添加文章
    • 在source/_posts目录下添加文章，格式为md的文件。
    • 在文章头部加入以下内容：

---

toc: true       # 是否有目录
reward: true    # 是否有打赏
title: vuex     # 标题名称
tags: 		  	# 小标签
- 随笔
- vue
- vuex
---

• 2.解决文章预览显示过长

  • 手动在文章内部加上，你需要在哪里截取文章就使用。
    
    

• 3.添加评论功能

  • 1)获取Client ID和Client Secret
  • https://github.com/settings/applications/new网址注册。
    
  • 在Settings—>Developer settings—>OAuth Apps中可以找到Client ID和Client Secret。
    

• 2)修改配置文件

  • 修改根目录\themes\yilia_config.yml配置文件
    

• gitment_repo可以是不同的仓库，Client ID和Client Secret分别是你自己注册好的。

• 3)修复Issue Page的路径为undefined的BUG

  • 修改根目录\themes\yilia\layout_partial\post\gitment.ejs文件
    
  • 将gitment.js文件放入根目录\themes\yilia\source目录下