:
安装Hexo
要使用Hexo,必须先安装Git 和Node.js。本文在Ubuntu20环境下操作。以下操作也可以作为其他系统的参考。
安装Git
sudo apt-get install git-core copy
安装Node.js
建议安装最新版本。不同的Hexo 版本依赖于不同版本的Node.js。下面是版本对比表。
建议在这里安装最新稳定版本的Node.js。
Node.js官方下载地址:
https://nodejs.org/en/download/
这里进行的是二进制安装,也可以使用源码来编译安装。
下载二进制文件包,如图所示。
请按照以下步骤进行安装。
tar xvf node-v16.15.1-linux-x64.tar.xzmkdir /datamv node-v16.14.2-linux-x64 /data/nodejsln -s /data/nodejs/bin/* /usr/bin/npm 安装yarncho 'PATH=$PATH:/data/nodejs/bin' /etc/profilesource /etc/profile 复制:
安装Hexo
npm install -g hexo-cli 复制:
创建博客
新建博客目录
hexo init 博客复制并安装节点依赖
cd blognpm install 复制本地启动博客服务器
如果复制hexo server时出现如下错误信息,可以更改端口号。
在blog目录下的_config.yml文件中添加以下代码,即可更改hexo-server运行时的端口号:
server: port: 4001 #端口号可选,默认是4000 compress: true header: true 复制修改后的效果:
现在用浏览器访问http://localhost:4001就可以看到最初的博客了。
写博客文章
创建博客文章
hexo new '我的第一个博客' 复制运行上述命令将创建一个名为“我的第一个博客”的博客文章。
可以看到文章保存在source/_posts目录下。并且文章以markdown的形式保存。
事实上,你也可以在source/_posts目录下手动创建一个新的markdown文件。当我们编译blog目录时,这些markdown文件就会生成对应的网页文件。
当我们使用命令创建新博客时,实际上是使用默认模板来创建新的markdown 文件。该模板保存在scaffolds目录中。
其中post.md 是博客文章的模板。常见的模板如下所示。
帖子模板
---标题:{{标题}}日期:{{日期}}类别:标签:描述:照片:- ---复制标题:文章标题
date:文章的创建时间
categories:文章类别,该类别会被统计到网站上
Tags:文章的标签
描述:文章的摘要
照片:文章封面
注意,每一篇文章都需要有这样的开头。描述和照片可以省略。
一个简单的例子:
---标题:什么是Costmap? #文章页面显示名称一般为中文date: 2022-05-02 15:30:16 #文章生成时间,一般不改变,当然也可以任意修改categories: ROS2 #分类标签: [ROS2, Costmap] # 文章标签,可以为空,多个标签请使用格式,注意:后面有一个空格# 描述:详细介绍costmap --- 复制显示摘要
在文章中添加以下内容
!--more--复制注意,摘要显示和文章描述仅显示选择一个。如果要显示文章描述,请在文章开头添加描述。如果要显示摘要,则不能在文章开头添加描述。否则,仅显示描述。然后将!--more-- 添加到文章中。之前!--more-- 是总结。效果如下:
如果想在摘要中显示图片,可以在图片链接后面加上!--more--。更合适的图片尺寸是1600x900。
更改博客主题
由于博客文章是用Markdown 编写的,因此我们可以任意更改帖子呈现的主题。
这里使用NexT作为演示。
将NexT 主题下载到主题目录。
cd themegit clone https://github.com/theme-next/hexo-theme-next 复制然后在_config.yml 文件中配置要使用的主题。
主题:hexo-theme-next 复制主题也是可配置的。详细配置和使用说明请参考官方文档。
NexT 使用文档:
http://主题-next.iissnan.com/getting-started.html
设置头像
编辑主题/hexo-theme-next/_config.yml:
头像:头像网址复制添加标签页面
新建页面:hexo新建页面标签复制设置页面(编辑source/tags/index.md): --- type: 'tags' comments: false --- 复制修改菜单(编辑themes/hexo-theme-next/_config.md): --- 复制修改菜单(编辑themes/hexo-theme-next/_config.md) yml): 菜单: 标签: /tags 复制添加分类页面
新建页面:hexo新建页面类别复制设置页面(编辑source/categories/index.md): --- type: 'categories' comments: false --- 复制修改菜单(编辑themes/hexo-theme-next/_config.md): yml): 菜单: 标签: /类别复制添加 about 页面
新建页面:hexo新建页面about复制设置页面(编辑source/about/index.md) 修改菜单(编辑themes/hexo-theme-next/_config.yml):menu: about: /about copy给博客安装搜索插件
要使用本地搜索,请按照以下步骤进行配置:
安装hexo-generator-searchdb插件: npm install hexo-generator-searchdb --save copy edit _config.yml: search: path: search.xml field: post format: html limit: 10000 copy edit theme/hexo-theme-next /_config.yml: # 本地搜索local_search:enable: true copy给博客文章设置永久链接
Hexo默认的文章链接生成规则是根据年、月、日、标题生成的。一旦文章标题或发表时间被修改,URL就会发生变化,之前的文章地址也将无法访问。而且URL层次很深,不利于搜索引擎共享和索引。
如果文章标题中有中文,转码后网址会很长,例如:https://www.shoufei.xyz/2022/06/12/%E4%B8%8B%E8%BD%BDturtlebot4%E6%BA% 90%E7%A0%81%E6%9D%A5%E5%AD%A6%E4%B9%A0/。
我们可以使用hexo-abbrlink插件为每篇文章生成唯一的字符串。该字符串ID不受文章标题和发布时间影响,例如:https://www.shoufei.xyz/p/ae5fa866。
安装插件,点击访问插件源地址hexo-abbrlink 。
在blog目录下运行以下命令安装插件
npm install hexo-abbrlink --save 复制配置修改博客根目录配置文件_config.yml的永久链接:
# permalink:year/:month/:day/:title/permalink: p/:abbrlink.html # p 是自定义前缀abbrlink: alg: crc32 #algorithm: crc16(default) and crc32 rep: hex #ary : dec (默认)和十六进制复制不同的算法和基数以生成不同的字符串ID:
crc16 hexhttps://post.zz173.com/posts/66c8.htmlcrc16 dechttps://post.zz173.com/posts/65535.htmlcrc32 hexhttps://post.zz173.com/posts/8ddf18fb.htmlcrc32 dechttps://post.zz173.com/posts/169009095 8.html复制验证先清理Local文件hexo clean,然后重新生成hexo g,启动博客hexo s。该插件将内容添加到每篇文章的开头:
abbrlink: df27ccfb 复制这个字符串是这篇文章的唯一标识,无论标题修改还是文章发布都不会改变。
参考:
https://zhuanlan.zhihu.com/p/134492757
:
部署博客
到目前为止我已经学会了两种部署博客网站的方法。一种是使用Github Pages来托管博客站点,另一种是通过Netlify来托管。
:
使用Github Pages
安装部署插件
cnpm install --save hexo-deployer-git copy 在github上新建一个仓库,用于存放网页内容。注意,设置的仓库名称必须是用户名+github.io的形式。
然后修改_config.yaml中的配置,添加目标仓库的地址。
运行hexo d后,publish目录下的内容会被推送到设置的远程仓库中。
注意,每一次推送都是全覆盖。
注意,其中repo地址需要使用ssh仓库地址。
注意,回购协议必须保持公开。
这时,访问用户名+github.io就可以看到你的博客了。
常用命令
以下命令的顺序是一个部署过程。
hexo new 'postName' #新建文章hexo new page 'pageName' #新建页面hexo clean #清除hexo生成的内容,建议生成前先清除,以免出现异常hexogenerate #生成静态页面公开目录hexo server #打开预览访问端口(默认端口4000,‘ctrl + c’关闭服务器) hexo deploy #将博客内容部署到GitHub 复制可以简写为:
hexo n==hexo newhexo g==hexogeneratehexo s==hexo服务器hexo d==hexo部署复制参考:
https://hexo.io/zh-cn/docs/github-pages
:
使用Netlify
Netlify 是一个提供网络托管的综合平台。集持续集成(CI)、CDN自定义域名、HTTPS、持续部署(CD)等多项功能于一体。
首先,在Github上新建一个仓库,不过这次仓库的名称没有要求。然后使用git工具将blog目录下的文件推送到仓库。
注意,无需使用hexo g生成博客页面。这一步我们将在Netlify 上完成。所以推送的不应该这个东西包含了运行hexo g命令生成的文件。
然后,在Netlify 上创建一个帐户:注册。最好直接使用Github账号。
并添加好维护博客内容的仓库。
设置编译命令
设置部署的分支
修改默认域名
Netlify默认会为我们的博客生成一个域名,但是这个域名比较复杂。我们可以自定义这个域名。
绑定自己的域名
首先,您需要购买一个属于自己的域名。可以购买域名的网站如下:
https://wanwang.aliyun.com/domain/
https://dnspod.cloud.tencent.com/
https://www.godaddy.com/zh-sg
用于个人博客的域名不需要备案。
在netlify网站上添加自定义域名
修改**域名**,设置域名重定向
由于是在腾讯云上购买的域名,因此登录https://www.dnspod.cn/后,可以在我的域名一栏看到购买的域名。
如果在其他平台购买的域名也可以直接在这里添加
添加记录
此处添加Netlify上设置的网站域名。我的是shoufei.netlify.app。默认是字母加数字,这里我自定义了。添加域名映射后,您就可以使用自己的域名访问博客站点了。
申请SSL证书
点击右侧SSL图标免费申请
网站不安全标志
添加SSL证书后
参考:
https://zhuanlan.zhihu.com/p/77651304
提交网站给搜索引擎
https://www.sousuoyinqingtijiao.com/
将您自己的网站提交到本网站的各个搜索引擎。
:
参考
https://uchuhimo.me/2017/04/11/genesis/
http://ibruce.info/2013/11/22/hexo-your-blog/
Hexo官方手册:
https://hexo.io/docs/
Hexo 主题:
https://hexo.io/主题/