cirry

cirry

我的原生博客地址:https://cirry.cn

hexo(1)下载和部署

中文官网地址:hexo

安装 hexo#

前提:

  1. 自有服务器
  2. 域名
  3. 安装nodejs
  4. 安装git

在浏览器中输入localhost:4000即可看到博客已经在开发模式下正常运行。

配置 hexo#

在根目录下的_.config.ym文件中,配置如下内容:

其余参数无需修改,保存之后,需要重新运行一下hexo server(当然你也可以使用npm run server 来重启应用),刷新页面才能看到最新的效果。

基础命令#

命令使用方式命令参考说明
inithexo init [folder]hexo init blog初始化博客项目,只有在创建的时候需要使用到
newhexo new [layout] <title>hexo new post "hello"新建一篇博文,在 source/_posts 目录下新建一个文件名为 hello.md
generatehexo generatehexo g生成静态文件
publishhexo publish [layout] <filename>hexo publish post "hello"发表草稿
deployhexo deployhexo deploy部署网站
renderhexo render <file1> [file2] ...渲染文件
migratehexo migrate <type>从其他博客系统 迁移内容
cleanhexo cleanhexo clean清除缓存文件 (db.json) 和已生成的静态文件 (public)
listhexo list <type>列出网站资料
versionhexo versionhexo 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,放到博客根目录下,后续在这里配置主题即可。为何这样操作参考官网使用代替主题配置文件

将下载文件中的languageslayoutsource 放到博客themes/maupassant中,如果没有对应文件夹则创建。

接下来安装主题需要的 npm 包:

配置主题#

_config.maupassant.yml文件找到对应属性

配置完成后重启项目,发现项目中没有关于我和留言页面,我们可以使用以下命令创建:

注意:时间线页面的内容在_config.maupassant.ymltimeline属性下填写。另外,时间线页面的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.mdpost.mdpage.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)+12f(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 即可正确打开网页:

至此,博客的基本配置和部署功能都已经完成,下一篇说主题的配置。

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。