Hexo 框架搭建个人博客：快速、开源且生态丰富

hwyzw · 发表于 2024-11-12 09:31:57

前言

目前市面上流行的一些博客框架：Hexo、Solo、Halo、、、等，这些都是开源的静态博客框架（无需登录注册、后台管理等）。优点是您可以非常快速地构建自己的。个人博客（也需要一定的前端知识），也是因为我之前的博客网站实在是没钱继续维护服务器了~~

我这里使用Hexo框架搭建，因为我的电脑上安装了Hexo所需的环境，而且互联网上Hexo的生态也比较丰富和完整。大家可以观看B站杨哥()的视频进行介绍。具体细节我还没有写下来。百度一下就有很多资料。

来看看我3天的努力成果（一天按照官方文档搭建，两天修改页面，解决图床问题）：

1. 准备工作

项目最终会部署到码云。无需自己购买服务器。也可以部署在这里。然而，我们的天堂有一面墙，速度实在令人堪忧！

1.安装环境：因为Hexo是基于Node.js的博客框架，就像Java依赖于JDK环境一样。

环境安装重点扩展：

2、安装Git：用于将本地项目托管到码云，所以需要自己注册一个码云账号。

下载地址：学编程的人在工作中一定会认识Git。如果你还没有学过，建议你看一下，所以这里就不详细介绍Git了。

Hexo官网：

2. Hexo安装

 <pre class="code-snippet__js" data-lang="properties"><code># 全局安装</code><code>npm install hexo-cli -g</code><code># 查看hexo版本</code><code>hexo -v</code></pre>
3. 创建本地博客网站

 <pre class="code-snippet__js" data-lang="nginx"><code># 初始化一个项目，hexoblog 是项目名</code><code>hexo init hexoblog</code></pre>
 <pre class="code-snippet__js" data-lang="properties"><code># 1、进入hexoblog项目目录</code><code>cd hexoblog</code><code>#/2、安装 hexoblog 项目的依赖包</code><code>npm install</code><code>#/3、启动 hexoblog 项目服务</code><code>hexo server</code></pre>
这时候访问：4000/就可以看到hexo默认页面以及默认生成的一篇“Hello World”的文章。

至此，Hexo项目搭建成功！

项目主文件目录介绍：

Hexo的其他配置详情请查看官网介绍：

4. 创建一篇新的博客文章

 <pre class="code-snippet__js" data-lang="cs"><code># 新建一篇名为第一篇Hexo blog文章的文章</code><code>hexo new "第一篇Hexo blog文章"</code></pre>
之后可以直接编辑新建的文章并再次启动服务即可查看效果，如下图。这里有一个问题。 Hexo框架文章中的图片仅支持外部链接的形式。有很多方法可以解决它。比如可以用码云或者七牛云部署自己的图床。

5、将项目部署到码云

1、在码云（英文名为gitee）中新建一个仓库。注意红色区域。我这里的码云用户名是

2、在项目根目录安装git部署插件

 <pre class="code-snippet__js" data-lang="sql"><code># 之后就可以使用 hexo deploy（或简写 hexo d）将项目部署到gitee远程仓库</code><code>npm install hexo-deployer-git --save</code></pre>
3.修改项目配置文件：.yml。在底部修改以下内容

 <pre class="code-snippet__js" data-lang="properties"><code># Deployment</code><code>## Docs: https://hexo.io/docs/deployment.html</code><code>deploy:</code><code> type: git</code><code> repo: 仓库URL地址</code><code> branch: master</code></pre>
4、使用命令hexo d将项目部署到gitee远程仓库。此时，本地文件夹中会出现一个文件夹。

5.启用Gitee Pages静态网页托管服务

然后您可以使用生成的 URL 访问博客。每次重新上传代码到gitee时，都需要点击下图中的更新按钮来重新启动页面服务。

访问生成的URL，部署成功！

6.修改主题

官网主题：

您可以到官方网站找到您喜欢的主题并下载。我这里就挑一个来演示一下。

1.进入下载的主题根目录下的主题目录，将里面的文件复制到您项目的主题目录中。

2、修改根目录下的配置文件.yml

3、启动项目，访问：:4000/。首先在本地检查主题是否修改成功。

4.将修改后的项目部署到远程仓库

 <pre class="code-snippet__js" data-lang="properties"><code># 生成静态网站文件</code><code>hexo g </code><code># 上传到远程仓库</code><code>hexo d</code><code> </code><code># 1、清除 hexo 的缓存</code><code>hexo clean</code><code># 2、采用一键部署</code><code>hexo g --d</code></pre>
5.访问主题样式修改部署成功！

（如果这里样式混乱，可能是浏览器缓存问题，执行Ctrl+F5强制刷新即可）

至此，Hexo + Gitee 就完成了自己个人博客的部署！

7.拓展：快速写文章

每次新建文章的时候都要执行hexo new ""命令，非常麻烦。

可以直接进入根目录//目录，创建一个.md文件进行写入，在文件顶部添加以下内容即可。写个标题就行了。其他的可以省略。

 <pre class="code-snippet__js" data-lang="makefile"><code>---</code><code>title: 文章名称</code><code>date: 2020-07-30 16:46:07(创建时间)</code><code>tags: 标签名</code><code>categories: 分类</code><code>description: 描述</code><code>comments: 是否开启评论(true or false)</code><code>---</code></pre>
之后使用hexo g --d命令推送到gitee，并更新gitee上的Gitee Pages服务。

结尾

为什么一定要有自己的个人博客？我始终相信，坚持写高质量的博客文章是提高和巩固自己能力的重要途径之一！

我现在的效果是花了很多时间修改和配置的。其实拥有这种博客对我技术的提高不会有太大帮助，因为它使用的是已经写好的框架（模板），但我只是使用默认的样式并不满意

虽然不是前端。最后留言区欢迎链接就设置好了~

Hexo 框架搭建个人博客：快速、开源且生态丰富

更多帖子推荐