前言
10 分钟、0 成本这两个词毫不夸张。对于许多想写博客的小伙伴来说。在哪里写博客一直是一个难题,有的人选择 CSDN,有的人选择知乎、有的人选择简书,还有的人选择自己搭建博客系统。
PS:作为一名程序员,当然要用个性化的博客系统才有意思嘛。
所以对比了许多博客系统之后我选择了 Hexo.
想直接看怎么搭建的小伙伴,请跳至「二、开始!」阅读。
一、为什么选择 Hexo
1.1 Hexo 的优势
Hexo 官网对 Hexo 的一句话概括为:
A fast, simple & powerful blog framework
这句话概括了 Hexo 的优点:
- 快速搭建
- 简洁、方便
- 功能强大
在我个人使用 Hexo 的过程中,能够感觉到 Hexo 特别适合个人博客的编写。特别针对是程序员群体,使用 Markdown 标记语言,让写作者无需太关心排版和格式。如果配上 Git 版本管理和 GitHub Pages 的发布。那更是无需充钱,也能更强!
1.2 对比 WordPress
拿我自己的真实使用经历来说,在使用 Hexo 之前,很长时间我一直使用的 WordPress。WordPress 就像博客界的老大哥,生态强大,系统强大,支持的东西很多。但正因为这样,使得 WordPress 变得重了起来。在使用时部署成本和管理成本较高。这里我自己总结了一下对比的表格:
项目WordPressHexo部署成本高极低使用成本低中费用高低学习成本中高管理成本高低
注:这里没有列出具体的对比项,仅是综合成了一个项目方便对比。比如 WordPress 部署成本包括:服务器、域名(备案)、数据库、PHP 环境、性能要求等。
总结一下,在个人博客的场景:
- 如果没有一点儿程序基础。建议使用 WordPress.
- 如果有程序基础,建议使用 Hexo.
1.3 对比其他博客系统
其他的博客系统因为没有使用过,所以不敢妄言。在非静态博客上,WordPress 可以作为代表进行对比(参考上方)。静态博客上,Jekyll 给我个人的感觉各方面都不如 Hexo。
二、开始!
终于开始了~这里可以恰个表,看一下你的操作步骤加起来使用了多久?
2.1 准备工作
以下软件是需要准备的:
- nodejs/npm - 官网地址
- Git
如果不知道如何安装/使用请百度。 Windows 系统的控制台可以使用 GitBash.
2.2 安装 Hexo
- 打开
控制台
- 输入
npm install hexo-cli -g
输入后效果如下:
![cfd9fdd2af3776056d3b6ec3f4df21c7.png](https://i-blog.csdnimg.cn/blog_migrate/5a9e0d76a0f68b821deac63bf5dd6f45.png)
- CD 到你的博客目录。比如我要在桌面创建一个目录,则 CD 到桌面。
- 输入
hexo init my_blog
这一步可能比较耗时,因为是从网上下载最新的 hexo 博客项目到本地。
执行效果如下:
![30974b1e213fbbcd80d59528d01db0fe.png](https://i-blog.csdnimg.cn/blog_migrate/5b95bf263edf1ea0972dd6529b8fd41b.jpeg)
- 输入
cd my_blog
- 输入
npm install
- 输入
hexo server
执行结果如下:
![6c1bdd6927ddb0400ab35bff61fab6e5.png](https://i-blog.csdnimg.cn/blog_migrate/8a59431f9bdfbee440e47c0e54dd5bc9.png)
打开浏览器 访问 http://localhost:4000/ 即可看到博客的样子了。
![f6088f84d03ea0bf28d3f6b365bbdc3a.png](https://i-blog.csdnimg.cn/blog_migrate/e8971b6b0a7469d2a20e4039ca41d8a1.jpeg)
到这里,一个基础的博客系统就搭建完成了。这里使用的是默认主题 landscape.如果你觉得这个主题还 OK 的话,就可以开始你的写作啦。
这里简单介绍一下博客目录:
├── _config.yml 博客配置文件
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds 模板
│ ├── draft.md 新草稿的模板
│ ├── page.md 新页面的模板
│ └── post.md 新文章的模板
├── source
│ └── _posts 文章目录
│ └── hello-world.md 自动生成的文章,可删除.
└── themes 主题目录
└── landscape 默认主题(landscape)
├── _config.yml 主题的配置文件
在 Hexo 中,任何的页面、文章,我们都可以用 Markdown 文件来书写。所以在上图中,文章和页面的模板都是.md
文件,创建时,都会以模板文件的格式创建。
2.3 写博客
- 输入
hexo n "第一篇博客"
输入后会在 source/_posts
目录下创建一篇新的第一篇博客.md
文件。编辑它就可以开始写作啦。
生成的文件格式如下:
title: 第一篇博客
date: 2020-04-12 17:16:10
tags:
---
我们可以为这篇文章添加分类和标签,格式如下:
title: 第一篇博客
date: 2020-04-12 17:16:10
tags: [标签1,标签2]
categories: 分类名
---
在---
之后的就是文章的正文了。文章的内容就写在这里。
关于写作相关的指令,深入的使用方式请参考官方文档链接,在「四、参考资料」中。
关于编辑器的选型:
- Visual Studio Code (推荐) 清爽的写作环境,安装 Markdown 插件后支持可视化编辑。
- IDEA/WebStorm/... 习惯使用
jetbrains
系列软件的可以使用。同样需要安装 Markdown 插件后支持可视化编辑。 - Sublime Text
编辑器选型可以看自己的爱好。用任何文本编辑器都可以。Hexo 也提供可视化博客管理插件。详情可查看:https://github.com/jaredly/hexo-admin
2.4 发布到 Github Pages
Github Pages 是一个由 Github 提供给开源项目的免费静态网页部署服务。只需要你将静态网页文件提交到仓库,按照格式配置,即可使用。
成功部署后的域名为 ***.github.io
参考:https://csgajcr.github.io/
操作步骤如下:
- 拥有一个 Github 账号
- 新建一个仓库,仓库名字为 [你的账号名].http://github.io
比如我的账号名叫 csgajcr 那么我的仓库名称就需要叫 csgajcr.github.io
- 安装 Hexo git 部署插件
控制台执行命令 npm install hexo-deployer-git --save
注:在 Hexo 中,部署可以直接使用插件来部署,很方便。除了 git 之外也支持其他多种部署方式。请参考: https:// hexo.io/docs/one-comman d-deployment
- 配置博客配置文件
打开 _config.yml
.
将文件最后面 deploy
的配置修改为:
deploy:
- type: git
repository: git@github.com:csgajcr/csgajcr.github.io.git #
- 发布
控制台执行命令 hexo clean && hexo d -g
发布成功后,就可以在你的 git 仓库下看到生成的静态文件啦。
此时访问 [你的账号名].http://github.io 即可查看你的博客了。
如果 Github Pages 未生效,到仓库设置中查看 Github Pages 选项是否正常。 正常的截图如下:
![bcd39f06dc0564c720af360c2676dca6.png](https://i-blog.csdnimg.cn/blog_migrate/537fda1b11d832d6fbf8735eca9a2596.jpeg)
注:这里多说一句,部署的原理是将hexo clean && hexo d -g
命令生成的文件提交到Github
仓库(生成的文件在public
目录下)。所以在排查一些问题的时候,可以查看生成的public
文件夹下的网页文件是否正常。
三、常用功能
3.1 更换主题
如果你是一个专注写作,不在意博客主题的人,那么也许这里你可以选择跳过。默认的 landscape
主题美观度和支持度上都算不错。
如果你是一个有个性的人,那么你可以花几个小时的时间来选择和配置一款你自己喜欢的主题。
如果你是一个喜欢折腾的人,那么你可以花几天的时间,来定制化你的主题,并为你的主题增添很多独有的色彩。
主题的文件在 themes
目录下:
在一个初始的项目下,里面会自带一个 landscape
的文件夹,这便是主题的文件了。
那么如何更换主题呢?
- 选择一款你中意的主题,在这里选择。 https://hexo.io/themes/
- 这里我们随便拿一个举例,比如
A-Ayer
![b31ac9ca2f6e6826cde93ac40cb8da8d.png](https://i-blog.csdnimg.cn/blog_migrate/bb88a702b584684407bf6cda41193d54.jpeg)
这里点进去,就是预览主题。在预览主题的最下方,会有主题的 Github
链接。
![6cbf6be700d7c7ade4dfd3b55cd70991.png](https://i-blog.csdnimg.cn/blog_migrate/2fb07ea16dd8809a173f8a3d0aa1021e.png)
当然这是先预览再看主题安装的方式,如果你不想预览,你也可以直接在
Github
上搜索你想使用的主题。
一般来说在主题的 Github 仓库的 README 文件中有相应主题的配置教程。例如 A-Ayer
的主题配置教程如下:
![6c6dc99214de191cdda5834edd88d664.png](https://i-blog.csdnimg.cn/blog_migrate/5588f99102fe86b8e66c4571bd30664d.jpeg)
每种不同的主题,安装方式都大致相同,参数配置可能会有所区别。这里就是大家主要花时间需要去折腾的地方了。
3.2 配置文件解析
详细全面的项目配置文件解析请参考 「四、参考资料」 中 Hexo 博客配置文件详解. https://hexo.io/zh-cn/docs/configuration.html
博客的整体配置文件路径(source/_config.yaml
),下面介绍的栏目都在此配置文件中修改。
- 网站标题 - title 顾名思义,修改后会影响博客的标题。例如:
title: Jcr's Blog
- 网站描述 - description 修改后会影响博客的描述信息。例如
description: 'Jcr - An Android developer '
- 网站部署链接 - url 部署链接会影响项目资源的生成,请设置自己实际的部署域名。例如:
url: http://blog.jcr.pub
root: /
其中 root 为博客所部署的
path
信息,如果设置不对,可能会导致网页的部分资源访问不到。
3.3 添加页面
在 Hexo
中,页面也是一个 markdown
文件。我们新建页面和新建文章有一点点区别。
新建页面的命令为:hexo new page [页面名称]
。以新建关于页面的操作步骤举例:
- 执行
hexo new page about
执行成功后控制台会提示:
INFO Created: ~/Desktop/my_blog/source/about/index.md
一般的主题都会附带关于页面的配置(即为主题配置文件中包含about: /about/
),所以关于页面的新建就完成啦。
3.4 分类、标签和模板
我们挨个介绍吧。
模板
模板是指的我们新建文章或页面后,自动生成的 MD
文件里的内容。比如你的博客开头都是以某种格式的,就可以去模板里修改,修改后生成的新文章都会根据模板来创建。
分类、标签
文章的分类标签是在文章的信息定义处指定,例如:
title: Typescript学习记录
date: 2020-04-13 19:46:25
categories: javascript
tags: [javascript,前端,Web,typescript]
分类只能指定一个,标签可以多个。通过这种方式设置的标签和分类将会在博客的标签
页和分类
页中自动生成。
分类、标签的另一种配置方式:
title: Hexo - 10分钟0成本搭建博客系统
categories:
- 博客
tags:
- 博客
- Hexo
- 教程
date: 2020-04-07 17:00:00
3.5 其他
发布注意事项
每次发布之前,必须要执行 hexo clean
,否则将会导致一些奇怪的问题发生。如果你觉得每次发布都要执行两条命令很麻烦,可以整合一下。
修改 package.json
文件,在 script
一栏中,增加 release
这条指令:
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server",
"release": "hexo clean && hexo d -g"
},
之后再执行
npm run release
即可完成发布
四、参考资料
- Hexo 主题列表
https://hexo.io/themes/
- Hexo 插件列表
https://hexo.io/plugins/
- Hexo 博客配置文件详解
https://hexo.io/zh-cn/docs/configuration.html
- Hexo 命令大全
https://hexo.io/zh-cn/docs/commands
- Hexo 模板的使用
https://hexo.io/zh-cn/docs/templates
- Hexo 写作
https://hexo.io/zh-cn/docs/writing