Hexo + Gitee 免费部署静态博客

最新推荐文章于 2024-02-10 13:53:53 发布

玄德ь

最新推荐文章于 2024-02-10 13:53:53 发布

阅读量2.5k

点赞数 13

分类专栏： Hexo 文章标签：前端

本文链接：https://blog.csdn.net/qq_60700961/article/details/125978581

版权

Hexo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

这是一篇利用 Gitte Pages + hexo 搭建属于自己博客的教程，也是自己这个博客搭建好以后的第一篇文章，搭建的过程中也参考了各路大佬的文章，期间遇到了一些问题，所以写这一篇文章即是记录自己的路程也是为了让小白少走一些弯路。

操作系统：win10

一、环境准备

1、安装Node.js

Node.js下载官网

按需下载相应的版本，默认安装就可以了。

2、安装Git

Git下载官网

按需下载相应的版本，默认安装就可以了。

3、检测是否安装成功

 git --version  
 node -v  
 npm -v

（注：提示不是内部或外部命令，记得检查下环境变量）

设备环境：Win10

二、安装Hexo

觉得慢的话可以更换淘宝源：

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行安装命令：

 npm install -g hexo-cli

这里我个人出现了一些小问题，hexo安装到了全局的目录，但我的环境有点问题

如果你cmd

查看全局位置：npm root -g

hexo就在这里面，而hexo.cmd在npm目录下，把npm目录添加到环境变量里就解决了

主要目的是找到hexo.cmd，把它放入环境变量就ok了

我的路径：C:\Users\26254\AppData\Roaming\npm

win10环境变量：右键此电脑->点击属性->高级系统设置->环境变量->Path，新建一个变量，把路径放进去就ok了

Hexo 初始化配置

初始化命令：hexo init <文件夹>

路径可以自己选择，可以cd到想要存放的的文件夹

我的文件夹名称是blog，名称随意，等待几分钟就会出现一个文件夹

blog文件夹下的目录如下：

解释一下：

node_modules：是依赖包
public：存放的是生成的页面
scaffolds：命令生成文章等的模板
source：用命令创建的各种文章
themes：主题
_config.yml：整个博客的配置
package.json：项目所需模块项目的配置信息

本地查看效果

首先cd进入blog文件夹

然后执行命令：hexo s

默认是端口4000，也可以用hexo serer -p 3000直接指定页面显示的端口

这时就可以打开 http://localhost:4000/预览效果了

这时我们已经搭建好了本地的博客

三、将博客部署到 Gitee Pages 上

注册 Gitee 账户

创建项目代码库

安装hexo部署

安装 hexo 部署到 git page 的 deployer：npm install hexo-deployer-git –save

修改 Hexo 工程目录下的配置文件_config.yml，在文件的最下面，找到deploy字段，配置成如下形式：

切换到 Hexo 工程目录并生成 Hexo 缓存文件和静态文件

hexo g

部署到 Gitee

hexo d

在 Gitee 上开通/更新 Git Pages 服务

想要让部署的 Hexo 页面对外访问，还需要在 Gitee 上开通 Git Pages 服务。

（注：开通Pages服务需要实名认证）

点击 Git Pages

当你看到如下画面时，博客部署成功

四、在博客上发表文章

博客已经搭建好了，既然有了博客就得写点文章了

找到你的路径项目 \blog\source_posts 中

这里就是我们的文章啦

用编辑器编写文章

md 全称 Markdown， Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后保存文件到 \Hexo\source_posts 文件夹下即可

个人推荐Typora，用起来很舒服

Typora下载链接提取码：xuan

文章标题，标签，分类，封面图片，摘要等，可以在 Front-matter 里面配置（Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，官方文档：Front-matter | Hexo ），举个例子：

 ---
 layout: 页面布局（配合主题文档使用）
 title: 文章名称
 date: 文章日期
 comments: 文章是否开启评论
 photos: 文章封面图（仅部分主题支持）
 tags: 
   - 文章标签一
   - 文章标签二
 categories: 文章分类
 description: 文章描述，即要在首页显示的摘要（仅部分主题支持）
 ---
 
 这里是摘要
 
 <!-- more -->
 
 这里是正文
 
 注意：description 和 <!-- more --> 方式显示摘要二选一即可，部分主题不支持description，每个配置英文冒号后面要空一格，不同主题配置有所差异，具体要参考主题文档

当我们用编辑器写好文章后，可以使用以下命令将其推送到服务器上

记住推送了之后要在gitee page中进行更新哦

 hexo clean - 清除缓存文件
 hexo g     - 生成缓存文件
 hexo d     - 推送到gitte

五、更换主题

现在博客也搭建好了，但感觉不太美观怎么办？那我们就来为自己的博客更换喜欢的主题

从这里选自己喜欢的主题吧：Hexo官方主题专栏

NexT主题安装

NexT扩展性强，所以这里讲一下NexT主题的引用

首先复制下面代码：

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

然后切换到Hexo站点根目录

执行代码

现在就可以在Hexo站点根目录下的themes看到next主题文件夹啦

引用NexT主题

安装是安装好了，剩下的就是引用了

在Hexo站点根目录下的_config.yml文件找到下面代码

theme就是引用的主题了，把它修改为你想使用的主题

别忘了推送到gitte上

 hexo clean - 清除缓存文件
 hexo g     - 生成缓存文件
 hexo d     - 推送到gitte