中文官网地址:hexo
安装hexo
前提:
在浏览器中输入localhost:4000
即可看到博客已经在开发模式下正常运行。
配置hexo
在根目录下的_.config.ym
文件中,配置如下内容:
其余参数无需修改,保存之后,需要重新运行一下hexo server
(当然你也可以使用npm run server
来重启应用),刷新页面才能看到最新的效果。
基础命令
命令 | 使用方式 | 命令参考 | 说明 |
---|---|---|---|
init | hexo init [folder] | hexo init blog | 初始化博客项目,只有在创建的时候需要使用到 |
new | hexo new [layout] <title> | hexo new post “hello” | 新建一篇博文,在source/_posts目录下新建一个文件名为hello.md |
generate | hexo generate | hexo g | 生成静态文件 |
publish | hexo publish [layout] <filename> | hexo publish post “hello” | 发表草稿 |
deploy | hexo deploy | hexo deploy | 部署网站 |
render | hexo render <file1> [file2] … | 渲染文件 | |
migrate | hexo migrate <type> | 从其他博客系统 迁移内容 | |
clean | hexo clean | hexo clean | 清除缓存文件 (db.json ) 和已生成的静态文件 (public ) |
list | hexo list <type> | 列出网站资料 | |
version | hexo version | hexo version | 显示 Hexo 版本 |
hexo —draft | 显示 source/_drafts 文件夹中的草稿文章 |
常用命令举例:
使用git管理博客文章
你可以首先在github、gitee,或者在自建的git仓库中先创建一个git仓库。
你可以根据仓库创建完成后提示的命令提交代码。
git 基础命令
命令 | 说明 |
---|---|
git pull | 更新代码 |
git add . | 添加代码到缓存区 |
git commit -m “文章更新” | 添加说明 |
git push -u origin master | 提交代码到仓库 |
按照上述命令顺序,即可正常的提交和更新博客仓库。
安装Maupassant主题
这里我找了一个不错的主题做演示Maupassant。
为了方便管理,将下载文件中的_config.yml
改名为_config.maupassant.yml
,放到博客根目录下,后续在这里配置主题即可。为何这样操作参考官网使用代替主题配置文件。
将下载文件中的languages
、layout
、source
放到博客themes/maupassant
中,如果没有对应文件夹则创建。
接下来安装主题需要的npm包:
配置主题
在_config.maupassant.yml
文件找到对应属性
配置完成后重启项目,发现项目中没有关于我和留言页面,我们可以使用以下命令创建:
注意:时间线页面的内容在_config.maupassant.yml
的timeline
属性下填写。另外,时间线页面的front-matter
应该如下:
设置网站图标
若要设置网站Favicon,可以将favicon.ico放在Hexo根目录的source
文件夹下,建议的大小:32px*32px。
若要为网站添加苹果设备图标,请将命名为apple-touch-icon.png的图片放在同样的位置,建议的大小:114px*114px。
可以去这个网站检查图标样式favicon-checker是否适应各个浏览器。
设置文章模板
我们已经知道创建文章的命令是hexo new post "hello"
,但是该如何理解post
这个参数?
在官网中,将其描述为layout(布局),默认使用_.config.yml
中的default_layout
来代替。我更愿意将其理解为文章模板,在我们使用命令创建的文章中会发现里面已经有了一些内容,这个内容从何而来?
打开项目根目录中的scaffolds
文件夹发现,他已经有了三个默认的文件:draft.md
,post.md
,page.md
,仔细看看post.md
中的内容和我们创建的hello.md
内容其实是一样的。
所以这个文件夹放的其实就是文章模板,你可以用他来自定义你需要通用内容,比如文章的tag,category和toc等等,那么在以后创建的文章中,将自带这些内容,修改post.md
如下:
注意:category可以使用数组,tags可以直接写tag标签,类似:tags: hexo blog
,自定义链接地址permalink必须以/
结尾,类似:permalink: /hexo/install/1/
。
文章摘要
首页默认显示文章摘要而非全文,可以在文章的front-matter
中填写一项description:
来设置你想显示的摘要,或者直接在文章内容中插入<!--more-->
以隐藏后面的内容,若两者都未设置,则自动截取文章第一段作为摘要。
使用hexo new post hello
,新建一个hello.md文档, 内容如下:
备注:title为文章标题,toc为开启文章目录,description是文章摘要内容,mathjax是开启数学公式持支持。
$$ f(x)=sin(x) + 12 $$
保存运行后,就可以看到文章已经正常显示啦,已经可以正常流畅的写文章了。
部署
讲的部署这个地方,就需要用到大家之前准备好的服务器了,并已经安装好nginx或者caddy等其它反向代理web服务,如果觉得麻烦可以直接使用github pages
部署博客,具体可以参考# 将 Hexo 部署到 GitHub Pages。
hexo的部署方式有很多种,我们暂时选择一个比较简单的部署方式SFTP
,如果后续有更多人需要,我可以写一些其他的部署方式,比如drone自动部署等等。
使用ssh工具连接到服务上后,先创建用户和对应的博客目录
首先需要安装这个插件:
然后在根目录下的_config.yml
中的末尾部分,添加以下配置:
使用命令hexo g -d
,自动部署博客到服务器上。
我使用的caddy做的web的反向代理,修改一下caddy配置文件Caddyfile
,重启caddy即可正确打开网页:
至此,博客的基本配置和部署功能都已经完成,下一篇说主题的配置。