GitHub Pages + Hexo + NexT + Typora + WhatsNote打造完美个人知识共享博客

GitHub Pages + Hexo + NexT + Typora + WhatsNote打造完美个人知识共享博客

一、目标

搭建完美的个人知识共享博客。

我的知识共享博客:https://whatsnote.andnext.club/

二、理念

完美的个人知识共享博客的一些特征。

特征 说明
自主 整个博客系统是自主可控的,可以随意增加功能,修改外观,……完全由自己控制。
管理 分类——为文章指定多级分类
标签——为文章设置多个标签
搜索——可以搜索文章内容
编辑 易于编辑且兼具格式化的文档格式——markdown。
并且支持多种文章元素——富文本、表格、公式、代码、……
共享 支持RSS、友情链接、社交账号、留言、SEO、……

综合以上特征,理想的实现方案。

  • GitHub Pages
  • Hexo
  • NexT
  • Typora
  • WhatsNote

三、准备工作

1. 工具

工具 说明 地址
Hexo 博客框架 https://hexo.io
NexT 博客主题 http://theme-next.iissnan.com/
Typora 桌面端编辑器 https://www.typora.io/
WhatsNote 手机端编辑器 http://andnext.club/whatsnote
HandShaker 手机与Mac的传输工具 https://www.smartisan.com/apps/#/handshaker
GitHub Pages 博客服务器 https://github.com/

2. 过程

搭建博客的过程大概分为以下几个阶段。

阶段 工具 说明
搭建本地博客 Hexo 在桌面端搭建仅供个人访问的博客,通过localhost进行访问。
安装主题 NexT 为Hexo安装Next主题
编辑文章 Typora 创建Hexo文章,并使用Typora进行编辑
发布到GitHub Pages GitHub Pages 将本地博客内容发布到服务器
配置主题 NexT 配置Next主题,开启高级功能
手机端编辑 WhatsNote、HandShaker 使用WhatsNote在手机端编辑内容,并通过HandShaker传输到桌面端。

四、实现过程

1. 搭建本地博客

请阅读官方安装手册:https://hexo.io/zh-cn/docs/

2. 安装主题

请阅读官方安装手册:http://theme-next.iissnan.com/getting-started.html

3. 编辑文章

首先,请确保对markdown文档格式有一定了解,您可以参考以下文章。

https://baike.baidu.com/item/markdown/3245829?fr=aladdin

https://baijiahao.baidu.com/s?id=1611928732267286939&wfr=spider&for=pc

其次,选择一款顺手的桌面端编辑器,个人推荐Typora。

https://www.typora.io/

4. 发布到GitHub Pages

GitHub Pages提供了免费的服务器及域名,是第一个服务器最好的选择。

你需要完成几个工作。

  1. 注册GitHub账号(免费,请放心使用)
  2. 创建GitHub Pages(免费,请放心使用)
  3. 创建SSH Keys

具体的操作方法,你可以在以下文章中找到线索。

https://www.jianshu.com/p/f82c76b90336

https://blog.csdn.net/KNIGH_YUN/article/details/79774344

https://www.cnblogs.com/jackyroc/p/7681938.html

5. 配置主题

完成前面4个步骤后,已经可以实现最简单的博客系统,一切都是初始的设置,看起来非常简单。

在这个步骤中,我们对主题进行配置,以开启更多高级功能。

关于NexT的配置,请参考官方手册:http://theme-next.iissnan.com/theme-settings.html

6. 手机端编辑

通过在手机端进行编辑,我们可以不受时间和地点的限制,随意地进行创作。

手机端的markdown编辑器众多,个人推荐使用WhatsNote

WhatsNote针对Hexo做了优化支持,导出的markdown文档,自动添加了hexo的Front-matter,包括

  • uuid:唯一ID
  • title:标题
  • categories:分类
  • tags:标签
  • date:时间

编辑完成后,通过HandShaker可以将手机上的文档传输到桌面端。

关于WhatsNote和HandShaker的使用方式,请参考官方手册。

WhatsNote: http://andnext.club/whatsnote/

HandShaker: https://www.smartisan.com/apps/#/handshaker

五、一些例子

「神马笔记」开发者博客:http://andnext.club/

「济沧海 x 远沧溟」的个人博客:https://whatsnote.andnext.club/

「WngShhng」的个人博客:https://shouheng88.github.io/

……

六、帮助和反馈

  • 微信号:『jicanghai37927
  • 微信名:济沧海 x 远沧溟
  • 微信二维码:
img
img

七、Finally

~我觉山高~潭空水冷~月明星淡~