Build your blog

• 前言
• 博客技术选型
• 搭建
  • 1.新建github的repository。
  • 2.安装hexo。
    • 2.1 安装hexo
      • hexo 目录结构，原理。
    • 2.2 hexo 安装主题
    • 2.3 hexo 常用命令
    • 2.4-1. 主题的功能，插件定制。
    • 2.4-2.定制 修改 主题 （增加新的功能 样式等）
    • 2.5.自定义开发hexo theme。
  • 3.push到repository。
  • 4.域名访问。
  • 5.利用github action自动发布。
  • 总结

前言

一直想要构建一个属于自己的博客，可以作为自己生活工作的输出和记录。但是碍于各种麻烦(买服务器，构建，运维)(当然主要就是懒)，最终只停留在想想阶段。 后来意识到输出的重要性，才认真的考虑构建自己的博客。

博客技术选型

博客主要有动态网站，静态网站。

• 动态网站，比如Wordpress，自己写的动态网站博客(jsp php等)。这个就是比较麻烦，要服务器，要自己构建，自己维护。（所以一直没有去实施） 但是这种比较灵活，可玩性比较高，可以根据自己的需求处理。
• 静态博客，就是服务器只托管静态的html页面，并没有动态的能力。其实很早之前网上就有这样的博客了，只是以前一直不知道这就是静态博客。 不过了解之后，发现这个可玩性也很高，可定制自己的博客样式，而且可以结合github，免去服务器的维护。
• 博客就应该简单，不需要太多的乱七八糟的动态交互。 因此很适合做静态网站的形式。

了解一番，静态博客可选择： github.io／GitHubpage + hexo/Jekyll/hugo. 最后选择了hexo，主要因为它是nodejs写的，而我也想学nodejs，因此就选hexo。

原理，利用hexo/Jekyll/hugo等静态网站生成器，将md文件生成的静态的html页面，push到github上。github托管你的静态网站，github会提供一个博客域名给你，你就可以访问域名使用了。

静态博客框架原理
静态博客框架/静态博客生成器 利用模版语言如ejs/njk等，将md文档渲染成html。

搭建

具体搭建方法见 链接。 以下记录，就是记录流程和一些关键概念。

1.新建github的repository。

githubpage用途
github上新建githubpage。repository名为 githubusername.github.io. 新建这个仓库后，通过域名githubusername.github.io就可以访问这个仓库下的静态资源。

注意名字只能是githubusername.github.io，其他名字的仓库，github不会托管的，也就是说github只给每个用户一个githubpage。

相当于github帮你托管了一个静态网站，并给你提供了网站域名githubusername.github.io， 你通过这个域名就可以访问静态网站了。

2.安装hexo。

hexo 快速、简洁且高效的博客框架, 静态博客生成器。 官方文档

2.1 安装hexo

其基于nodejs，因此先安装nodejs。
hexo原理，其实就是样式和内容分离。渲染。
0.读取总配置文件。根目录下的 _config.yml.
1.渲染。source文件夹 和 theme文件夹。 两次渲染。1.第一次先将source下各自文件夹中的md文件渲染成article对象。2.根据种配置文件中theme将article对象根据theme文件夹下相应的lauout的ejs的进行渲染成html，输出到public。article对象用哪个layout的ejs进行渲染，用的是 md所在的文件夹名称 就是 theme下layout对应名称的xx.ejs。 theme的渲染配置在各自theme文件下的_config.yml.
配置文件中也是定义一些变量。
模版语言：ejs njk

hexo 目录结构，原理。

目录结构， 配置文件， 原理。

目录结构

• 链接

配置文件

• 根目录下的_config.yml 链接
• theme目录下的配置文件。
• 关于.yml文件 YAML 语言教程

原理

• 链接

2.2 hexo 安装主题

有很多主题可供选择。这里我尝试了两种，hexo-theme-matery, next. 最后选用了next，因为最符合简约 有效的风格。 hexo-theme-matery 虽然很炫，但是太杂了，不适合技术博客的风格。
安装主题，选择你喜欢的主题。

1. 找到你喜欢theme的github, git clone 到hexo根目录下的theme目录下。
2. 修改根目录下的_config.yml中的theme配置。 修改为theme目录下的主题目录名。

2.3 hexo 常用命令

（要在init生成的目录下执行hexo命令）
hexo init XXX
hexo g / hexo generate 生成静态页面。在public目录下。
hexo s / hexo server 启动本地http服务器， 访问localhost:4000
hexo clean clean生成的文件。
hexo new “xxx” 生成文章，到_posts下。
hexo new page “xxx” 生成文章，到source下。
hexo new draft “xxx”

除了hexo new post|page xx。也可以在相应的目录下手动生成md。

hexo d / hexo deploy 会将public下生成的文件puosh到_config.yml配置文件设定的github仓库上。

关于.yml配置文件 注意两个地方。根目录下的_config.yml, theme目录下各个主题的_config.yml

我安装的hexo 和 next主题 版本 如下：

hexo -v

NexT version 8.10.1
Documentation: https://theme-next.js.org
========================================
hexo: 5.4.1
hexo-cli: 4.3.0
os: darwin 16.7.0 10.12.6

node: 15.3.0
v8: 8.6.395.17-node.22
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 88
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

2.4-1. 主题的功能，插件定制。

我想要的博客功能： 简洁，不需要花哨， 搜索， 归档， tag， 分类。

1. 归档，分类，tag。
2. 搜索。 npm install hexo-generator-searchdb
3. RSS。 npm install hexo-generator-feed –save
4. 字数统计,阅读时长等。npm install hexo-word-counter
5. 访客统计。 不蒜子。
6. 评论功能。 gitalk， valine。 评论回复时 邮件提醒。
7. 留言板。gitalk， valine。
   • gitalk 文章与issue对应 是根据文章的url来决定的。文章的url作为issue的id。gitalk issue初始化问题(利用sitemap.xml去自动化初始化)。
     leancloud 账号 国内版(13490**),国际版(13490**)。 国际版有提供二级域名。

     1.设置valine评论。 valine + leancloud. https://ioliu.cn/2017/add-valine-comments-to-your-blog/
     2.设置valine评论的邮件提醒。 valine admin. https://github.com/zhaojun1998/Valine-Admin
        注意：leancloud的休眠策略。防止休眠：1.leancloud定时任务。2.github action 发请求。
     https://blog.csdn.net/Aoman_Hao/article/details/105323917
     https://github.com/zhaojun1998/Valine-Admin
     https://blog.csdn.net/weixin_49687704/article/details/119790377

8. 阅读进度。修改next中参数就行。
9. 文章加密。
   - 简单的前端设置密码。(绕过，到githubio上还是可以看。比如hexo-theme-matery就是这么加密的)。pass。
   - 对整篇文章内容加密，解密前只显示加密的密文。(hexo-blog-encrypt)
10. 说说，备忘录。
11. 相册。
12. tag的词云。 hexo-tag-cloud。
13. 添加CC协议。
14. 将githubpage放到giteepage。 github太慢。
15. 添加音乐播放器。 aplayer, metingjs。 hexo-tag-aplayer（hexo-tag-aplayer 是 APlayer播放器的 Hexo 标签插件。也支持metinjs。） hexo-tag-aplayer 只在md文件中使用。其他可以在支持html标签的页面中使用。
    - 使用 <iframe>
    - 使用aplayer。
    - 使用aplayer + metingjs.
    （以上三种可以在md文件，也可以在像sidebar.njk这样的njk文件中使用。）
    - 使用hexo-tag-aplayer.(hexo的标签插件只能在md文件中使用。为什么无法用在njk文件？ 好像也不能用在ejs文件中)
    - 放在sidebar; 放在某篇文章; 页面跳转继续播放全局可播放; 底部磁吸模式;
    • 放在sidebar里只能<iframe>,aplayer原生,或者metings。因为hexo标签插件在njk文件不起作用。
    • 关于全局播放。 使用pjax技术。 即不刷新请求，同时改变url。(ajax + pushstate)。 next很简单，直接开启pjax:true

2.4-2.定制 修改 主题 （增加新的功能 样式等）

当官方／第三方 主题 功能 样式都无法满足自己的需求，就要自己去魔改了。

2.5.自定义开发hexo theme。

真正厉害的就是自己开发hexo的主题。

3.push到repository。

当我们完成文章创作之后，就可以发布到githubpage上了。
1. 修改根目录下的_config.yml的deploy配置。

4.域名访问。

1.  yourgithubusername.github.io
2.  如果你自己有域名的话，可以将你的域名cname到yourgithubusername.github.io。
    1.  在域名服务商处将自己的域名cname到yourgithubusername.github.io
    2.  在github网站上 githubpage 的 repository 中的settings->githubpage->domain 修改为你的域名。 （修改cname后，要记得修改 评论模块的安全域名设置（gitalk leancloud））
    3. 问题：既然域名服务商已经添加了域名解析cname，为什么还要在github上添加cname? github上的cname作用是什么?  如果没有设置github上的cname，就不成功。  我原先也是这么想的，其实就是相当于域名cname到githubpage上就可以了。但是我试过不行。仅仅在域名服务商那边设置cname还不行，还要在github上设置cname才行的。 所以我不知道github上设置cname是什么作用？ 是为了验证？ 另外，两个域名互相cname会怎样？？

5.利用github action自动发布。

0.源文件仓库。 私人。
1.gihubpahe仓库。 公开。
2.在源文件仓库中设置githubaction。 方式1.使用hexo d 一键部署 发布到gihubpahe仓库。 方式2.编写hexo的action直接来将生成的静态文件push到gihubpahe仓库。
方式1将token放在源文件中不是很好。
hexo 的_config.yml中设置token提交：
deploy:
type: git
repo: https://xxxtoken@github.com/ruozhiertong/ruozhiertong.github.io.git
branch: main
然后直接 hexo d.
改进，通过hexo指令向其传递变量，然后再action中向hexo传变量。 比如类似 hexo d –github_token xxxtoken. 然后再github action中去设置xxxtoken。

  方式2，可以直接使用github action中设置东东。 

为了保证源文件的私有性，所以设置了步骤0的私有仓库。 每次编写md文件后，push到步骤0的仓库。 步骤0仓库的action会生成静态文件push到步骤1的仓库，从而实现源文件和公开博客的分离。

总结

建博客：

• 在github上创建githubpage的repository。
• 安装hexo，创建hexo工程，安装主题，安装相应的功能，修改配置文件参数。

创作：

• hexo new xxx 创建文章
• xxx.md 的内容创作。 编辑相应的categories，tags等。
• hexo g && hexo s 本地生成和浏览
• hexo d 部署到githubpahe。
• 访问 yourgithubusername.github.io