搭建快速发布文章的技术博客

基于GitHub Page 和 hexo 博客框架

应用的知识：hexo + Github

搭建步骤：

Github:github page

生成 Github Page

hexo:

1.安装hexo

npm install -g hexo-cli (全局安装)

2.cd到你的工作目录（blog是你的hexo项目文件夹名字）

hexo init blog

3.为了简化流程就直接先更换网站的主题

$ cd blog
$ git clone https://github.com/iissnan/hexo-theme-next themes/next 旧版地址
$ git clone https://github.com/theme-next/hexo-theme-next themes/next 新版地址

修改next主题样式：在主题文件夹next的配置文件scheme字段中修改

4.cd _config.yml 全局配置文件修改theme属性

theme:next

5.本地跑起hexo

$ hexo g 打包项目（没上线前可不执行）

$ hexo s 启动本地web服务器

6.打开 http://localhost:4000/ 检查是否成功

推送到Github

7.修改hexo项目的根目录，根目录，根目录，下的全局配置文件_config.yml

deploy:
  type: git
  repo: https://github.com/hizeng/hizeng.github.io.git
  branch: master

8.为一键部署做准备安装git hexo 发布插件

$ npm install hexo-deployer-git –save(页面显示问题save前面是两个-)

9.上线

$ hexo clean 清理缓存
$ hexo g 打包项目
$ hexo d 一键部署

10.发布文章

采用md语法编写文章原因简单易上手操作
由于hexo打包（hexo g) 时候会编译成对应的html css js 等线上部署的文章
那么我们要对文章和项目的主题进行相关的配置

10.1文章

进入根目录的souce文件下的_posts里新增md文件xxx.md
文章最顶部插入以下代码之后发布都把这段代码加上
这是YAML的语法相关语法可以阅读教程yaml

---
layout:     post                    # 使用的布局（不需要改）
title:      零基础教你搭建技术博客   # 标题 
subtitle:                         #副标题
date:       2019-04-19             # 时间
author:     lishujun                # 作者
 # header-img: img/post-bg-2015.jpg    这篇文章标题背景图片
catalog: true                       # 是否归档
categories: skill                   #分类
tags:                                   
     - work-skill                      #标签  
---

10.2项目主题

进入项目主题文件themes 目录下的_confiy.yml 文件中menu注释部分按下面的依次打开
目的为菜单栏的按钮添加链接

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

10.3日常发布

在_post文件夹中添加xxx.md文章后只需要执行以下命令
记得添加10.2中的代码片段不然没标题和日期等等信息

1
2
3

$ hexo g 
$ hexo s (本地预览，可不执行)
$ hexo d

11.0关于域名配置

购买域名(阿里云)

解析域名

$ ping hizeng.github.io 得到一个IP后记得ctrl+c 退出命令
修改你的域名解析记录，添加一个A记录，用得到的IP
登录http://github.com>进入项目>Settings>Custom domain>输入你的域名>Save。

hexo项目中添加 CNAME 文件

添加你的域名

因为在下次 hexo d 部署的过程中会把根目录下的CNAME 覆盖删除了因为hexo并不会自动生成 CNAME 文件
有两种方法可以解决

我们就需要这个 CNAME 工具hexo-generator-cname，这时会自动在 public 里生成一个 CNAME 文件，把你的域名加进去再部署一下吧！
在根目录下sourse文件中添加（我采用的是第二种）

11.1 同一域名下挂载第二hexo博客

在全局配置文件中_config.yml 修改
如果您的网站放在子目录中，请将网址设置为”http://yoursite.com/child “，将root设置为”/child/“

12.拓展功能

12.1 添加动画效果

在根目录下操作
$ npm install –save hexo-helper-live2d （安装时间比较长）

安装模板在根目录下操作(例子是一只白猫黑猫是hijiki)

$ npm install live2d-widget-model-tororo

开源作者提供了10多个模板可以在下方 hexo-helper-live-2d 中查阅对应名字可以在
这里阅览模板

cd _config.yml 添加配置如下

# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  model:
    use: live2d-widget-model-tororo
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

12.2 草稿功能

草稿相当于很多博客都有的“私密文章”功能。使用如下命令创建：

1	$ hexo new draft "new draft"

会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到_drafts目录之中。

如果你希望强行预览草稿，更改配置文件（_config.yml）：
render_drafts: true
或者如下方式启动server：
$ hexo server --drafts

下面这条命令可以把草稿变成文章，或者页面：

1	`$ hexo publish [layout] <filename>`

12.3小结next主题插件

使用插件：全局安装依赖（npm install –save hexo-helper-live2d ）到 package.json
全局配置：在_config.yml 中根据对应的插件文档进行配置
其他功能大家可以根据 next文档去尝试配置

hexo文档
nexT主题文档
markdown文档
hexo-helper-live-2d

延伸拓展
浏览器工作原理
Hexo源码设计模式

Peiqin

Hexo技术博客