热门标签
热门文章
- 1计算机网络抓包工具——tcpdump详解
- 2网安零基础的学习路线，认真学好，1周入门，3月精通
- 31day未公开漏洞含POC-帮管客CRM index.php接口存在SQL漏洞_1day漏洞poc
- 4ComfyUI 基础教程（十）：Efficiency工作流效率插件_efficiency-nodes-comfyui
- 5spark学习之SparkStreaming_spark任务执行进展日志隔几秒更新一次?
- 6无人机航拍WiFi图传模块，10公里实时高清航拍体验，飞睿智能带你玩转天空
- 7关于远程连接软件TeamViewer如何远程连接会话工具栏_teamviewer会话代码在哪里
- 8Java并发编程经典题目整理（2022.03.11 更新）_并发编程练习资源
- 9Flink------优化_flink 优化
- 10Hadoop、Hive、Spark 之间是什么关系？_hive任务和fspark任务的关系
当前位置: article > 正文
GitHub Pages + Hexo搭建个人博客网站，史上最全教程_hexo博客_用hexo+githubpage搭建个人网站(
作者：我家自动化 | 2024-08-07 05:15:38
赞
踩
用hexo+githubpage搭建个人网站(
创建一个项目 `hexo-blog` 并初始化
- 1
- 2
- 3
- 4
- 5
hexo init hexo-blog
cd hexo-blog
npm install
本地启动
- 1
- 2
- 3
- 4
- 5
hexo g
hexo server
浏览器访问 http://localhost:4000，页面默认主图风格如下  #### 四、更换主题 `Hexo` 默认的主题不太好看，不过官方提供了数百种主题供用户选择，可以根据个人喜好更换，官网主题点 [这里](https://bbs.csdn.net/topics/618317507) 查看。这里介绍两个主题的使用方法，`Next` 和 `Fluid`，个人比较喜欢`Fluid`，后面章节的功能也是以 `Fluid` 为基础进行讲解的。 ##### 1. NexT 主题 **安装主题**
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
cd hexo-blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
**使用 NexT 主题**
打开 \_config.yml 文件，该文件为站点配置文件
将主题修改为 next
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
theme: next
**本地启动**
- 1
- 2
- 3
- 4
- 5
hexo g -d
hexo s
##### 2. Fluid主题 以下安装步骤摘自 [Fluid官网](https://bbs.csdn.net/topics/618317507) **安装主题** 下载 [最新 release 版本](https://bbs.csdn.net/topics/618317507) 解压到 `themes` 目录，并将解压出的文件夹重命名为 `fluid`。 **指定主题** 如下修改 `Hexo` 博客目录中的 `_config.yml`：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
theme: fluid # 指定主题
language: zh-CN # 指定语言，会影响主题显示的语言，按需修改
**创建「关于页」**
首次使用主题的「关于页」需要手动创建：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
hexo new page about
创建成功后，编辑博客目录下 `/source/about/index.md`，添加 `layout` 属性。
修改后的文件示例如下：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
title: about
date: 2020-02-23 19:20:33
layout: about
这里写关于页的正文，支持 Markdown, HTML
**本地启动**
- 1
- 2
- 3
- 4
- 5
hexo g -d
hexo s
浏览器访问 http://localhost:4000，`Fluid`主题风格页面如下
#### 五、创建文章
如下修改 Hexo 博客目录中的 `_config.yml`，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
post_asset_folder: true
执行如下命令创建一篇新文章，名为《测试文章》
- 1
- 2
- 3
- 4
- 5
hexo new post 测试文章
执行完成后在`source\_posts`目录下生成了一个md文件和一个同名的资源目录(用于存放图片)
在资源目录`测试文章`中放一张图片 `test.png`
在`测试文章.md`中添加内容如下，演示了图片的三种引用方式。第一种为官方推荐用法，第二种为markdown语法，第三种和前两种图片存放位置不一样，是将图片放在`\source\images`目录下。这三种写法在md文件中图片是无法显示的，但是在页面上能正常显示。
图片的引入方式可参考官方文档 <https://hexo.io/zh-cn/docs/asset-folders.html>，有详细介绍。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
title: 测试文章
date: 2021-06-10 16:35:20
tags:
- 原创
categories: - Java
这是一篇测试文章
{% asset_img test.png 图片引用方法一 %}
**本地启动**
- 1
- 2
- 3
- 4
- 5
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账号并创建应用 进入 [官网](https://bbs.csdn.net/topics/618317507) 注册账号  需实名认证，完成后才能使用各项服务  验证邮箱  创建应用，选择`开发版`即可，免费的  进入该应用的 `设置->应用凭证`，找到 `AppID` 和 `AppKey`，记录下来后面配置要用  ##### 2. 修改Fluid配置 打开主题目录 `themes\fluid`下的 `_config.yml` 文件，修改如下配置 ###### 单篇文章阅读量计数 打开统计开关  配置 `leancloud`的 `app_id` 和 `app_key`  打开计数功能，统计来源改为 `leancloud`  页面效果  ###### 页面底部展示网站的 PV、UV 统计数  页面效果  #### 八、添加评论功能 评论功能的代码已经写好了，只不过没有开启，需要修改一些配置 打开主题目录 `themes\fluid`下的 `_config.yml` 文件，修改如下配置 启用评论插件  配置 `LeanCloud` 的 `appId` 和 `appkey`  重新部署后，查看页面效果，评论功能已开启  部署在本地时评论无法提交，会报跨域问题，发布到 `GitHub Pages` 上之后课正常提交评论 #### 九、发布到GitHub Pages ##### 方式一 安装hexo-deployer-git
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
npm install hexo-deployer-git --save
修改根目录下的 `_config.yml`，配置 `GitHub` 相关信息
- 1
- 2
- 3
- 4
- 5
deploy:
type: git
repo: https://github.com/yaorongke/yaorongke.github.io.git
branch: main
token: ghp_3KakcaPHerunNRyMerofcFd9pblU282FSbsY
其中 `token` 为 `GitHub` 的 `Personal access tokens`，获取方式如下图  部署到GitHub ### 最后 不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~ 给大家准备的学习资料包括但不限于： Python 环境、pycharm编辑器/永久激活/翻译插件 python 零基础视频教程 Python 界面开发实战教程 Python 爬虫实战教程 Python 数据分析实战教程 python 游戏开发实战教程 Python 电子书100本 Python 学习路线规划  **网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。** **[需要这份系统化学习资料的朋友，可以戳这里无偿获取](https://bbs.csdn.net/topics/618317507)** **一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！** rmark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaTM0Nzc5NTc5MA==,size_16,color_FFFFFF,t_70) **网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。** **[需要这份系统化学习资料的朋友，可以戳这里无偿获取](https://bbs.csdn.net/topics/618317507)** **一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/941039?site
推荐阅读
相关标签
