(二)Hexo + GitHub Pages 搭建个人博客网站,最全最新教程来了亲测有效

目录

写文章

 个性化页面展示

1. 浏览器tab页名称

2. 博客标题

3. 主页正中间的文字

​编辑 添加阅读量统计

1. 申请LeanCloud账号并创建应用

2. 修改Fluid配置

 添加评论功能

发布到GitHub Pages

 方式一

方式二

请先看该专栏​​​​​​​的(一)

写文章

如下修改 hexo-blog 目录中的 _config.yml,打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

post_asset_folder: true

执行如下命令创建一篇新文章,名为《文章1》

hexo new post 文章1

默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

Hexo 有三种默认布局:post、page 和 draft。在创建这三种不同类型的文件时,它们将会被保存到不同的路径;而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

执行完成后在source\_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片)

在资源目录测试文章中放一张图片 动画唯美.jpeg

 

 在测试文章.md中添加内容如下,演示了图片的三种引用方式。第一种为官方推荐用法,第二种为markdown语法,我换了图片存放位置,是将图片放在sourceimages目录下。这两种写法在md文件中图片是无法显示的,但是在页面上能正常显示。

第一种方式图片的引入方式可参考官方文档 资源文件夹 | Hexo,有详细介绍。

第二种方式图片的引入方式可参考官方文档Markdown 图片语法 | Markdown 官方教程

测试一下子~{% asset_img 动画唯美.jpeg 图片引用方法一 %}![图片引用方法二](/images/test.jpeg "唯美")

本地启动

hexo g -dhexo s

浏览器访问 http://localhost:4000,页面如下,文章添加成功,下面是我的效果图:

 个性化页面展示

页面的标题等位置显示默认的文字,可以改下显示一些个性化的信息。

1. 浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。

2. 博客标题

主题目录 themesfluid 下 _config.yml 中的 blog_title 字段。

【温馨小贴士】可以用Ctrl+f,去搜索关键字

3. 主页正中间的文字

主题目录 themesfluid 下 _config.yml 中的 text 字段。

 添加阅读量统计

 Fluid 主题写好了统计阅读量的代码,但是缺少相应配置所以没有开启,需要借助三方服务来统计阅读量,这里是有 Leancloud 的免费服务来进行统计。

1. 申请LeanCloud账号并创建应用

进入 官网 注册账号

有国内和国际版,可以自己进行选择,leancloud分国内版 网页


比丘资源网 » (二)Hexo + GitHub Pages 搭建个人博客网站,最全最新教程来了亲测有效

发表回复

提供最优质的资源集合

立即查看 了解详情