使用Hexo+Github+腾讯云+Netlify搭建个人博客

  备案注销     |      2023-09-25
使用Hexo+Github+腾讯云+Netlify搭建个人博客

安装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/主题/