利用github和hexo搭建博客

杂项 评论

1. 组件安装

1.1 安装git

1.2 安装node.js

1.3 安装Hexo

git和nodejs全部安装好

1
2
3
4
5
# 安装hexo
npm install -g hexo-cli

# 查看版本
hexo -v

2.博客安装

1
2
3
4
5
6
7
8
# 初始化blog文件，这里myblog文件夹一定要不存在
hexo init myblog

# 进入myblog
cd myblog

# 安装文件
npm install

安装完，在myblog文件夹中存在以下目录文件：

1
2
3
4
5
6
node_modules: 依赖包
public：      存放生成的页面
scaffolds：   生成文章的一些模板
source：      用来存放你的文章
themes：      主题
** _config.yml: 博客的配置文件**

3 本地调试

1
2
3
# 启动本地服务
hexo g
hexo server

然后在浏览器查看http://localhost:4000/

4. github配置

5. hexo同步到github

可以将以下三行写在一个脚本里面，每次执行这个脚本即可。

1
2
3
hexo clean
hexo generate
hexo deploy

6. 更换主题

1
2
3
4
5
6
7
8
9
10
# 首次拉取
cd D:\workspace\05.my\myblog\
git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

# 后期更新
cd themes/pure
git pull

# 拷贝文件夹
将themes\pure\_source文件夹中所有文件拷贝到目录myblog\source\

注意：拷贝文件夹非常重要，否则会出现分类、标签、项目等页面都是error

7.安装插件

1
2
3
4
5
6
npm install hexo-wordcount --save
npm install hexo-generator-json-content --save
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-neat --save

8. 修改配置项

根目录下myblog_config.yml我们称为站点配置文件。
主题目录myblog\themes\pure_config.yml我们称为主题配置文件

8.1 修改站点配置文件

8.1.1 修改语言：

language: zh-CN

8.1.3 主题更改

theme: pure

8.1.4 发布地址

deploy:
type: git
repo: https://github.com/datawz/datawz.github.io.git
branch: main

8.2 修改主题配置

8.2.1 站点信息

favicon 修改头像
title： 修改网站标题

1
2
3
4
5
6
7
8
9
10
11
# Site
site:
  logo:
    enabled: true
    width: 40
    height: 40
    url: ../images/logo.png
  title: 硅谷工具人 # 页面title
  favicon: /favicon.png
  board: <p>欢迎交流与分享经验!</p> # 站点公告
  copyright: false # 底部版权信息

8.2.2 关闭打赏

如果要开启，请将目录中图片更换位自己的

1
2
3
4
5
6
7
8
9
10
11
# Donate
donate:  # 是否启用打赏
  enable: false
  # 微信打赏
  wechatpay:
    qrcode: images/donate/wechatpayimg.png
    title: 微信支付
  # 支付宝打赏
  alipay: 
    qrcode: images/donate/alipayimg.png 
    title: 支付宝

8.2.3 个人信息

follow: 更改为自己的网站地址
其他都是个人信息

1
2
3
4
5
6
7
8
9
10
11
# profile
profile:
  enabled: true # Whether to show profile bar
  articleSelfBlock: true # 关闭文章下方的自我介绍
  avatar: images/avatar.jpg
  gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
  author: datawz
  author_title: 一个专注于摸鱼的工具人
  author_description: 个人简介。
  location: 中国-上海
  follow: http://datawz.github.io

8.3 其他配置信息参考

主题官方文档：
https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md

个人参考文档：
https://blog.csdn.net/sinat_37781304/article/details/82729029

9. 发表博客文章

刚开始也没弄懂，怎么发布文章。后来终于搞清楚了，md文件的开头设置好分类，标签等，然后只需要将文件拷贝到myblog\source\_posts目录即可。

如果博客写多了，都放posts文件夹下面比较乱，可以在posts文件夹下面建立各个分类的子文件夹。
例如建立如下文件夹，可以和分类对应上：

但是文章的分类还是按照文章内容开头标注的分类来的,并不是按照这里的文件夹来分类的。

(1) 准备一篇md文件，然后在md文件的内容开头添加以下分类

1
2
3
4
5
6
7
8
9
10
---
title: C#基础
categories: WPF # 添加博文分类
tags: c# # 添加博文标签
---


这里是博客内容... ...


例如我这篇博文如下图：

(2) 将该文件拷贝到myblog\source\_posts\目录下。
(3) 然后执行 hexo s即可本地查看到

10. 设置支持图片

(1) 在文件myblog\themes\pure_config.yml中，打开以下配置

1
post_asset_folder: true

(2)先安装图片插件

1
npm install hexo-asset-image -- save

(3)编写md文件时特别注意，创建一个同名的文件夹。
将创作过程中的图片文件夹放到同名的文件夹下面。

(4)将md文件和文件夹一起拷贝到_posts文件夹下面

11. 测试与发布

1
2
3
4
5
6
7
# 预览
hexo s 或者hexo server

# 发布 和5.hexo同步到github相同
hexo clean
hexo generate
hexo deploy

本地测试：

浏览器中打开http://localhost:4000/

12. 评论功能(gitalk)

12.1 安装插件

1
npm i --save gitalk

12.2 注册github的webapp

国内的要么不能用，要么需要实名认证，忒麻烦了。这里使用gitalk,即github自带的webapp。
还是登录github，进入个人头像settings -> developer settings

点击注册Register a new application，然后填写表单信息

12.3 生成秘钥对

提交至下一页面，生成密钥。

生成完成后，需要记录下Client ID和Client secrets，用于在主题中配置。

12.4 配置gitalk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
comment:
  type: gitalk  # 启用哪种评论系统
  disqus:  # enter disqus shortname here
  youyan: 
    uid: 1783844 # enter youyan uid 
  livere:
    uid: # enter youyan uid 
  gitment:
    githubID: datawz
    repo: datawz.github.io
    ClientID: xxxxxxxxxxx
    ClientSecret: yyyyyyyyyyyyyyyy
    lazy: false
  gitalk: # gitalk. https://gitalk.github.io/
    owner: datawz
    admin: datawz
    repo: datawz.github.io
    ClientID: xxxxxxxxxxx
    ClientSecret: yyyyyyyyyyyyyyyy
    enableHotKey: false
    language: zh-CN

非常重要的几点：
（1）Authorization callback URL的值填写
Authorization callback URL直接填写git的网站的域名就好了

（2）gitalk中repo的配置
这个仓库直接填写仓库的名称，可以是自己新建一个仓库，也可以直接是git网站的仓库。
因为评论最终是写到issue里面的，所以无所谓哪个，但是这里填什么名称，就写到名称对应的issue里面的。

（3）issue的初始化
如果仓库没有issue记录，请一定手工创建一条记录。

（4）全部配置好后，请一定要清空网站缓存，重新登录一次访问。否则会出现诸如403等各种怪异的异常现象。

其他用户评论时，需要先登录github，然后就可以直接评论了，不需要搞啥实名认证的鬼玩意。

12.5 跨域问题

跨域问题会报以下错误

1
gitalk Error: Request failed with status code 403

网上有其他挂代理啥的方法，不太适用。这里给出一种解决办法，在评论时，需要登录github。

登录成功后，如果出现gitalk Error: Request failed with status code 403,就是跨域问题。
如果是谷歌浏览器，可以按ctrl+shift+I,打开开发者工具，在Console控制台下面可以看到CORS错误。
点击错误信息，弹出一个新的页面如下：

然后点击那个Request temporary access to the demo server按钮，此时切换回博客刷新页面，即可看到如下可以评论的地方了。

提交评论：

我用另外一个账号来评论，也是成功的。
另外一个账号登录，需要先授权。

再评论，也可以的。