【配置】Win10使用Hexo和Pages服务搭建个人博客

1 博客

博客(blog或weblog)正式名称是网络日志。一个典型的博客结合了文字、图像、链接以及其它主题相关的媒体,同时能够让读者以互动的方式留下建议和意见。博客的内容包括专注在特定课题上的评论或新闻,以及个人性的日记等。

博客主要就是为了学习和记录。写作是一种产出,能够输出表达、巩固所学,同时满足分享欲和表达欲。

喜欢写Blog的人,会经历三个阶段。 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。 第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

引自阮一峰

1.1 免费博客网站

第一阶段是最常见的,也是入门需求最低的。选择一个可以免费发布博客的网站,注册登录后即可开始创作。早期的有天涯新浪等,近期的有简书知乎豆瓣等、面向开发者的有博客园CSDN思否掘金等。

优点:

  • 免费
  • 开箱即用(Out of the box)
  • 不用考虑内容推广

缺点:

  • 依赖平台,审核机制、敏感词过滤、限制发布内容等
  • 个性化界面定制差(博客园除外)
  • 弹窗、广告
  • 需要登录

1.2 服务器上搭建独立博客

第二阶段,在个人服务器上搭建网站。如果是建站小白,或者懒得折腾,可以使用开源的博客系统简化步骤。目前主流的有WordPressHaloTypecho等。

以WordPress为例,这是当前应用最广泛的CMS(Content Management System,内容管理系统),它基于PHP和MySQL数据库,配置方便,作为开源项目,有着优质的社区和丰富的插件。

优点:

  • 完全的可定制化
  • 内容和规模不受限制

缺点:

  • 需要购买服务器和域名
  • 需要考虑内容推广,网站备案、收录以及SEO优化等
  • 需要建站相关知识
  • 维护完全靠个人

1.3 免费静态网页托管服务

第三阶段,使用GitHubGiteeCODING等提供的Pages免费静态网页托管服务。

GitHub Pages直接从GitHub上的代码仓库中获取HTML、CSS和JavaScript文件,可以选择通过构建过程运行这些文件,并发布网站。用户可以使用GitHub Pages来展示开源项目,搭建博客,或者分享简历等。

你可以直接使用HTML+CSS+JS编写博客,但是这样做,排版费时费力,对前端技术也有一定要求。目前流行使用Markdown来写文档,例如GitHub项目中的README.md

Markdown是一种轻量级标记语言,使用纯文本格式来编写文档,可与HTML混编,语法简洁,让创作者节约排版耗时,更多地关注内容本身。拓展的Markdown语法还支持代码高亮、MathJax数学公式等。

Markdown的使用,需要配合解析器。将Markdown转为HTML文件的最简单的方法,就是使用Markdeep,它是一个纯JS项目,只需在将编写好的Markdown文件的.md后缀改成.html,并且在文章里引用markdeep.min.js,就可以在浏览器中访问了。

但博客不只有一篇文章,想要分类、标签、评论之类的功能,更普遍的,可以选择使用开源博客框架,例如HexoGhostJekyll等。

博客框架,也可以叫做静态网站生成器。框架处理博客文章,生成HTML、CSS、JS文件,配合Pages服务或者部署nginx服务器等,即可在浏览器中访问。静态网站没有服务端处理或者数据库交互,利于使用CDN(Content Delivery Network内容分发网络)进行扩展加速,缓存上比动态网页的效率高。

JekyllHexoGhost
语言RubyJSGo
优势1.强大的GitHub Pages支持
2.主题为gems方便分发
1.相当快速
2.在GitHub Pages部署简单
3.中文支持、中文社区
1.速度非常快,对构建速度做了优化
2.预置Go模版和模式
3.无需依赖(不用安装Go,因为它是编译好的二进制)
4.功能强大的内容模型
劣势1.当网站内容不断增加后,
构建速度会明显变慢。
1.没有英文1.没有内置默认主题
2.主题使用Go模版,所以需要熟悉Go
3.缺少扩展性和插件(因为Go是编译型语言)
功能1.Liquid模版引擎
2.Sass预处理CSS
1.EJS模版引擎
2.对于HTML+CSS+JS非常友好
1.国际化
2.支持动态API

优点:

  • 免费
  • 可定制程度高

缺点:

  • 只支持静态网页
  • 更新网页需要重新生成整个网站
  • 需要考虑内容推广,网站备案、收录以及SEO优化等

2 配置

配置Hexo前需要自行安装的环境:

2.1 GitHub Pages配置

使用GitHub Pages服务搭建自己的静态博客前,首先需要GitHub账号,没有的话请先注册。登录之后,点击New,创建一个代码仓库(repository),除非是手头上正好有个闲置的域名,否则更推荐将仓库名设置为username.github.io,这样可以通过GitHub提供的https://username.github.io来访问。

创建仓库

创建完成之后可以写一个HTML简单测试一下,点击Add file,选择Create new file,填写文件名和内容,然后点击Commit new file提交。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
Hello World.
</body>
</html>
编写html
提交html

提交后稍等几分钟,待GitHub缓存更新后,就可以在浏览器中访问了。

查看测试网页

2.2 Git和SSH配置

参考【配置】Win10配置Git和SSH

2.3 Hexo配置

基本配置过程可以参考Hexo官方文档

npm是Node.js的包管理工具,用来安装、管理和分享JavaScript包,同时会自动处理多个包之间的依赖。打开命令行,执行npm install -g npm更新npm。

1
2
3
4
5
6
# 查看npm版本
npm -v
# 更新npm
npm install -g npm
# 更新npm至指定版本
npm install -g npm@8.7.0
更新npm

安装Hexo

1
2
# 安装Hexo
npm install -g hexo-cli
安装Hexo

cd到想要创建的博客目录,初始化Hexo

1
2
# 初始化Hexo
hexo init
初始化Hexo

初始化之后,目录下会增加如下内容,详细解释可以参考Hexo文档

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├─.github/ # GitHub配置
├─node_modules/ # 包管理目录
├─scaffolds/ # 模板目录
├─source/ # 文章目录
│ └─_posts/
│ hello-world.md
└─themes/ # 主题目录
.gitignore # 忽略文件
_config.landscape.yml # 主题配置文件
_config.yml # 全局配置文件
package.json # 包配置文件
package-lock.json

将编写好的Markdown博客,放在source/_posts/目录下,Hexo默认有一篇欢迎博客hello-world.md,里面有简单介绍和快速入门。执行命令,测试Hexo本地配置。

1
2
3
4
# 生成博客
hexo generate
# 启动服务
hexo server
hexo运行

打开链接http://localhost:4000/,查看博客。

本地测试

在博客目录下运行命令行,安装hexo-deployer-git插件。

1
2
# 安装hexo-deployer-git插件
npm install hexo-deployer-git --save
hexo_deployer_git

看到提示有高危漏洞 ,我也不明白怎么处理 ,按照提示输入npm audit fix --force修复。

回到GitHub博客项目,点击Code,选择SSH,点击链接右侧图标,将链接复制到剪贴板。

github路径

打开博客根目录下的_config.yml,在deploy下填写配置,将链接粘贴到repository字段。

1
2
3
4
deploy:
type: git
repository: git@github.com:GH1656409967/GH1656409967.github.io.git
branch: main

注意,2020年10月1日起,在Github平台上所有新创建的源代码仓库的默认分支被命名为"main",不再是原先的"master"。

测试Hexo远程部署。如果之前SSH设置了密码,则需要输入密码,看到Deploy done,说明部署成功。

1
2
# 远程部署(上传到GitHub)
hexo deploy
hexo_deploy

打开GitHub博客项目,可以看到代码文件已经更新了。再打开https://username.github.io/,博客内容也同步更新了,与本地http://localhost:4000/访问页面一样。

github项目更新
查看博客网页

3 总结

至此,一个基础的独立博客已经搭建完成了, 在Linux和Mac上的配置,也应该类似。Hexo有丰富的插件和社区资源,能提供更多个性化定制,想要添加更多的功能可以参考我的文章【配置】Hexo及NexT主题的配置

由于博客源文件是Markdown格式,后续的博客的迁移也不麻烦。在购买了云服务器后,也可以使用nginx等服务替换GitHub Pages服务。

最后,请保证将Pages服务仅用于博客/门户/开源项目网站/开源项目静态效果演示用途,请勿用于违规内容,包括但不仅限于:

  • 发布诱导分享/诱导关注/诱导下载/诱导跳转内容
  • 发布欺诈/谣言/骚扰信息/广告信息/垃圾信息/特殊识别码、口令类信息
  • 发布低俗内容/“宗教性捐献”及相关信息
  • 发布侵害他人权利/违法经营及可疑服务类内容
  • 发布其它违反国家法律法规的内容