请添加图片描述
浏览器中访问,展示成功。
请添加图片描述
这里创建的网页是非常简陋的,只是为了演示下GitHub Pages的使用方式。

三、安装Hexo

我们采用Hexo来创建我们的博客网站,Hexo 是一个基于NodeJS的静态博客网站生成器,使用Hexo不需开发,只要进行一些必要的配置即可生成一个个性化的博客网站,非常方便。点击进入 官网

安装 Hexo

npm install -g hexo-cli

查看版本

hexo -v

创建一个项目 hexo-blog 并初始化

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

hexo g
hexo server

浏览器访问 http://localhost:4000,页面默认主图风格如下
请添加图片描述

四、更换主题

Hexo 默认的主题不太好看,不过官方提供了数百种主题供用户选择,可以根据个人喜好更换,官网主题点 这里 查看。这里介绍两个主题的使用方法,NextFluid,个人比较喜欢Fluid,后面章节的功能也是以 Fluid 为基础进行讲解的。

1. NexT 主题

安装主题

cd hexo-blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

使用 NexT 主题

打开 _config.yml 文件,该文件为站点配置文件
请添加图片描述
将主题修改为 next

theme: next

本地启动

hexo g -d
hexo s

2. Fluid主题

以下安装步骤摘自 Fluid官网

安装主题

下载 最新 release 版本 解压到 themes 目录,并将解压出的文件夹重命名为 fluid

指定主题

如下修改 Hexo 博客目录中的 _config.yml

theme: fluid  # 指定主题
language: zh-CN  # 指定语言,会影响主题显示的语言,按需修改

创建「关于页」

首次使用主题的「关于页」需要手动创建:

hexo new page about

创建成功后,编辑博客目录下 /source/about/index.md,添加 layout 属性。

修改后的文件示例如下:

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文,支持 Markdown, HTML

本地启动

hexo g -d
hexo s

浏览器访问 http://localhost:4000,Fluid主题风格页面如下
请添加图片描述

五、创建文章

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

post\_asset\_folder: true

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

hexo new post 测试文章

执行完成后在source\_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片)
请添加图片描述
在资源目录测试文章中放一张图片 test.png
请添加图片描述
测试文章.md中添加内容如下,演示了图片的三种引用方式。第一种为官方推荐用法,第二种为markdown语法,第三种和前两种图片存放位置不一样,是将图片放在\source\images目录下。这三种写法在md文件中图片是无法显示的,但是在页面上能正常显示。

图片的引入方式可参考官方文档 https://hexo.io/zh-cn/docs/asset-folders.html,有详细介绍。

---
title: 测试文章
date: 2021-06-10 16:35:20
tags:
- 原创
categories:
- Java
---

这是一篇测试文章

{% asset_img test.png 图片引用方法一 %}

![图片引用方法二](test.png)

![图片引用方法三](/images/test.png)

本地启动

hexo g -d
hexo s

浏览器访问 http://localhost:4000,页面如下,文章添加成功
请添加图片描述

六、个性化页面展示

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

1. 浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。
请添加图片描述

2. 博客标题

主题目录 themes\fluid_config.yml 中的 blog_title 字段。

请添加图片描述

3. 主页正中间的文字

主题目录 themes\fluid_config.yml 中的 text 字段。
请添加图片描述
修改好配置后,页面效果如下,可以看到现在显示的内容变成了我们的个人信息。
请添加图片描述

七、添加阅读量统计

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

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

进入 官网 注册账号
请添加图片描述
需实名认证,完成后才能使用各项服务
请添加图片描述
验证邮箱
请添加图片描述
创建应用,选择开发版即可,免费的
请添加图片描述
进入该应用的 设置->应用凭证,找到 AppIDAppKey,记录下来后面配置要用
请添加图片描述

2. 修改Fluid配置

打开主题目录 themes\fluid下的 _config.yml 文件,修改如下配置

单篇文章阅读量计数

打开统计开关
请添加图片描述
配置 leancloudapp_idapp_key
请添加图片描述
打开计数功能,统计来源改为 leancloud
请添加图片描述
页面效果
请添加图片描述

页面底部展示网站的 PV、UV 统计数

请添加图片描述
页面效果
请添加图片描述

八、添加评论功能

评论功能的代码已经写好了,只不过没有开启,需要修改一些配置

打开主题目录 themes\fluid下的 _config.yml 文件,修改如下配置

启用评论插件
请添加图片描述
配置 LeanCloudappIdappkey
请添加图片描述
重新部署后,查看页面效果,评论功能已开启
请添加图片描述
部署在本地时评论无法提交,会报跨域问题,发布到 GitHub Pages 上之后课正常提交评论

九、发布到GitHub Pages
方式一

最后

Python崛起并且风靡,因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低,但它的晋级路线很多,通过它你能进入机器学习、数据挖掘、大数据,CS等更加高级的领域。Python可以做网络应用,可以做科学计算,数据分析,可以做网络爬虫,可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多,你需要学好基础,再选择明确的方向。这里给大家分享一份全套的 Python 学习资料,给那些想学习 Python 的小伙伴们一点帮助!

👉Python所有方向的学习路线👈

Python所有方向的技术点做的整理,形成各个领域的知识点汇总,它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。

👉Python必备开发工具👈

工欲善其事必先利其器。学习Python常用的开发软件都在这里了,给大家节省了很多时间。

👉Python全套学习视频👈

我们在看视频学习的时候,不能光动眼动脑不动手,比较科学的学习方法是在理解之后运用它们,这时候练手项目就很适合了。

👉实战案例👈

学python就与学数学一样,是不能只看书不做题的,直接看步骤和答案会让人误以为自己全都掌握了,但是碰到生题的时候还是会一筹莫展。

因此在学习python的过程中一定要记得多动手写代码,教程只需要看一两遍即可。

👉大厂面试真题👈

我们学习Python必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有阿里大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。

需要这份系统化学习资料的朋友,可以戳这里无偿获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐