2020-09-17

Practice

使用Hexo和Github搭建博客

概述：介绍如何使用Hexo和Github搭建博客

1.注册个人Github账号

在Github新建仓库（Repository），命名规则：{Github账号}.github.io，例如账号名为jm199504，则仓库名为：jm199504.github.io

2.安装

（1）Node.js

下载对应版本

（2）Hexo

1	npm install -g hexo-cli

使用hexo命令验证安装是否成功

3.初始化

1	hexo init {项目名}

执行完成后通常创建一个文件夹，初始化文件夹位置：项目中通常包含themes、scaffolds、source等子文件夹

4.编译生成HTML代码

进入项目文件夹后执行，该步为可选步骤，搭建过程不需要执行

1	hexo generate

5.本地运行

1	hexo serve

6.访问

1	http://localhost:4000

7.部署到Github Pages

（1）安装部署插件

1	npm install hexo-deployer-git --save

（2）修改部署信息

⚠️ 在执行该步前需确定已将本机SSHKEYS添加至个人Github中

项目文件夹下的_config.yml定位到Deployment修改，其内容可参考：

deploy:
  type: git
  repo: {github仓库地址（git@github.com:{账号名}/{账号名}.github.io.git）}
  branch: master

（3）执行部署命令

1	hexo deploy

8.查看Github Page

1	http://{账号名}.github.io

搭建完成存在延时，等待期间可进入对应仓库检查是否上传了相应文件

9.修改主题

（1）下载主题

可参考主题网站：

排名前 10 的 Hexo 主题：https://www.hexothe.me/

有哪些好看的 Hexo 主题？：https://www.zhihu.com/question/24422335

根据相应文档下载，基本命令参考：

1	git clone Hexo主题下载链接

（2）设置主题

在项目文件夹下_config.yml中theme设置你所下载的主题名（一般下载在theme子文件夹中）

1	theme: Hexo主题名

（3）更新Hexo

在项目文件夹下执行命令

hexo g -d

个人可根据theme文档自定义修改js和css样式等，其中hexo g 表示生成页面，hexo d表示部署发布

10.上传文章

方法一：执行新建命令

1	hexo new "文章名"

方法二：在项目文件夹\source_posts\下新建*.md文件

以上两个方法完成后均自行到*.md文件中编写文章细节

11.文章设置首页隐藏部分信息

1
2
3

首页显示内容
<!--more-->
首页隐藏内容

12.设置标题及分类

1 2	title: titleDemo categories: CateDemo

13.设置多标签

1
2
3

tags:
	- tagA
	- tagB

14.设置文章缩略图（依据主题帮助文档）

该方法参考Icarus主题帮助文档，以下为举例

（1）在主题子文件夹中，即项目文件夹/themes/主题文件夹/_config.yml设置修改：

1 2	article: thumbnail: true

（2）在文章md设置

1	thumbnail: /gallery/a.jpg

（3）在项目文件夹/source/下新建gallery子文件夹，并存入a.jpg即可完成

15.文章中插入图片

在项目文件夹/source/下新建images子文件夹，并存入b.jpg即可完成

1	![](/images/b.jpg)

16.修改部署未更新

原因一：部署存在时延

原因二：使用命令清理后再部署

1	hexo clean

17.基本命令

hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

18.添加评论功能

（1）注册Valine账号

https://valine.js.org/quickstart.html

（2）在主题中配置文件

comment:
    # Name of the comment plugin
    type: valine
    app_id: ******
    app_key:  ******
    notify:  # 新留言是否需要邮箱通知
    verify: true        
    placeholder: 评论
    avatar: mm # 默认头像
    pageSize: 10 # pagination size #默认单页的留言条数

19.添加打赏功能

donate:
    -
        # Donation entry name
        type: alipay
        # Qrcode image URL
        qrcode: '/images/ali.jpg'
    -
        # Donation entry name
        type: wechat
        # Qrcode image URL
        qrcode: '/images/wechat.jpg'
    -

20.设置双/三栏目

依据主题帮助问题，以下为举例

主页设置（_config.yml）三栏
widgets:
  - type: profile
    position: left
  - type: recent_posts
    position: right
文章页设置（post.md）双栏
widgets:
  - type: profile
    position: left
  - type: recent_posts
    position: left
文章页设置（_config.page.yml）单栏
widgets: null

Jimmy's blog