1. 组件安装
1.1 安装git
1.2 安装node.js
1.3 安装Hexo
git和nodejs全部安装好
1 | # 安装hexo |
2.博客安装
1 | # 初始化blog文件,这里myblog文件夹一定要不存在 |
安装完,在myblog文件夹中存在以下目录文件:
1 | node_modules: 依赖包 |
3 本地调试
1 | # 启动本地服务 |
然后在浏览器查看http://localhost:4000/
4. github配置
5. hexo同步到github
可以将以下三行写在一个脚本里面,每次执行这个脚本即可。
1 | hexo clean |
6. 更换主题
1 | # 首次拉取 |
注意:拷贝文件夹非常重要,否则会出现分类、标签、项目等页面都是error
7.安装插件
1 | npm install hexo-wordcount --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 | # Site |
8.2.2 关闭打赏
如果要开启,请将目录中图片更换位自己的
1 | # Donate |
8.2.3 个人信息
follow: 更改为自己的网站地址
其他都是个人信息
1 | # profile |
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) 将该文件拷贝到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 | # 预览 |
本地测试:
浏览器中打开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 | comment: |
非常重要的几点:
(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
按钮,此时切换回博客刷新页面,即可看到如下可以评论的地方了。
提交评论:
我用另外一个账号来评论,也是成功的。
另外一个账号登录,需要先授权。
再评论,也可以的。