年轻人的第一个 Hexo 个人博客
想做个人博客?
我想大部分人只是兴趣使然,毕竟亲手做一件东西总会有满满的成就感,而搭建一个网站听起来也非常有吸引力不是吗?
当然,作为一个新手,如果要从头开始,先学习前端知识,再从零开始构建一个网站的话,那未免流程也太长了吧~
而且,我想很多人,就像我一样,只有一时的热情,如果不很快得到反馈就会颓丧不已,当然这种心态是要改正的
所以,不妨尝试一点简单的东西吧,比如 Hexo
P.S. 如果想搭建个人博客的话,除了 Hexo 之外,还有很多其他的选择,例如 Hugo 或者是 Wordpress 等。
除了这种静态网站生成器,也可以选择一些在线的博客平台,例如 CSDN、掘金或者是简书等。
国外的话,可以选择 Medium 或者是 Dev.to 等。
安装
安装前提
安装 Hexo 相当简单,只需要先安装下列应用程序即可:
- Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
- Git
下载与安装 Node.js
Hexo 是基于 Node.js 开发的 ,所以要安装 Node.js ,没毛病吧?
打开Node.js下载页面
下载并安装即可,你可以参照这个教程
安装完成后,可以打开 cmd,输入 npm -v 来试一下,
下载与安装 Git
安装完成后,可以打开 cmd,输入 git -v 来试一试,
设置环境变量
顺带提一句,所设置环境变量的地址应是Node.js的安装地址
如果在安装的过程中一路默认,那么大概率这个地址是 " C:\Program Files\nodejs "
安装 Hexo
找一个你觉得合适的地方新建一个文件夹,
名字随意,比如 loli
之类的 ,但是不建议用中文
1 | npm install -g hexo-cli |
成功的话大概会这样
启动 Hexo
继续输入命令
1 | hexo init blog |
有必要说明的是,以后可以直接在刚才 Hexo 生成的 blog 文件夹中打开 CMD ,然后输入 hexo -g 和 hexo -s 即可
在浏览器地址栏输入 http://localhost:4000
即可看到你的博客
这就是你的博客啦
写文章
生成一个 .md 文件
在 CMD 中输入如下内容
1 | hexo new myPost |
需要说明的是 myPost 可以随便写,但是不建议用中文!
大概 CMD 里会差不多这样显示
D:\blog\blog>hexo new myPost
INFO Validating config
INFO Created: D:\blog\blog\source_posts\myPost.md
注意 Created: 后面的地址,这就是刚才新建的文章的地址
这个 myPost.md 就是我们新建的文章。
markdown语法?
Markdown是一种轻量级标记语言,通常用于编写文档,包括博客文章、笔记、文档、网页内容等。它的设计目标是简单、易读、易写,允许作者专注于内容而不是格式,然后可以将文本文件转换成HTML或其他格式。
你可以在这个 Markdown语法教程 中学习 Markdown 语法
编辑文章
打开刚才新建的文章,你会看到类似如下内容
1 | --- |
这就是文章的头部,你可以在这里设置文章的标题、日期、标签等等
在这个头部下面,就是文章的内容了,你可以在这里写文章,尽情运用 Markdown 语法吧!
从 markdown 到 html
当我们在终端中执行 hexo generate
或者是 hexo g
命令的时候,Hexo 会将我们的 markdown 文件转换成 html 文件。
如果你仔细观察文件夹,你会发现在 blog\public\posts
文件夹中多了一个 html 文件,这就是我们刚才新建的文章的 html 文件。
里面的内容由 Hexo 自动生成,我们不需要手动修改。
看一下效果
这个时候,如果安装了 hexo-browsersync
插件的话,这个插件会自动热重载,也就是说,你只需要在浏览器中刷新一下,就可以看到,你刚才写的文章已经在博客中显示了。
点击文章标题,就可以看到文章的内容了,就像浏览任何其它博客一样。
安装主题
其实默认的主题也蛮好看的~
不过大多数人都会换一个主题,毕竟这样才能体现出个性嘛~
挑选喜欢的主题
正如同手机会有主题商店,Hexo 也有主题商店,你可以在Hexo主题商店中挑选喜欢的主题
安装喜欢的主题
以我喜欢的主题 Butterfly 为例,
当你在 Hexo 主题商店中找到喜欢的主题后,你可以点击主题的链接,进入主题的 GitHub 页面
一般来说,你只需要跟随 GitHub 页面中的说明,就可以安装主题了
最后的效果,自然就是和 主题商店 中的预览一样了