本站搭建过程

1. 安装Git和NodeJS

在Windows上使用Git，可以从Git官网直接 [链接](https://nodejs.org/en/download/)，然后按默认选项安装即可。安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！

在Git中绑定Github账号，打开“Git Bash”，在命令框中依次输入两行命令：

由于 Hexo 是基于 Node.js 驱动的一款博客框架，所以安装NodeJS

安装链接链接

安装之后可以输入以下命令查看是否安装成功

2、创建仓库

在Github上创建一个新的代码仓库用于保存我们的网页。

点击your repositories，进入仓库页面。

填写仓库名，格式必须为<用户名>.github.io，然后点击Create repository。

新文件的名字必须为index.html，内容先随便写一个简单的，内容示例如下，填写之后点击commit new file 提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yaorongke</title>
</head>
<body>
    <h1>big_freeze_mouse的个人主页</h1>
    <h1>Hello ~</h1>
</body>
</html>

GitHub Pages中找到我的主页的地址为 https://icemouse094.github.io/

3、安装Hexo

准备好了就可使用 npm 开始安装 Hexo 了，在命令行输入执行如下命令：

1	`npm install -g hexo-cli`

如果出现报错如图所示

可能是网络问题导致，可删除代理输入下行代码可删除代理

1	`npm config delete proxy`

输入代码

hexo -v

查看是否安装成功

安装好后输入代码创建一个hexo-blog

1
2
3

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

1 2	`hexo g hexo server`

浏览器访问 http://localhost:4000，页面默认主图风格如下

4、更换主题

Fluid主题

下载[链接](https://github.com/fluid-dev/hexo-theme-fluid/releases)解压到 themes目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 hexo 博客目录中的 _config.ymi：

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

创建「关于页」

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

1	`hexo new page about`

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

修改后的文件示例如下：

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

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

本地启动

1 2	`hexo g -d hexo s`

浏览器访问 http://localhost:4000，fluid主题风格页面如下

5、创建文章

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

1	`post_asset_folder: true`

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

1	`hexo new post 巨龙是个蛋`

打开’巨龙是个蛋.md’编辑

并且找到D:\IT tools\hexo-blog\themes\fluid\source\img目录下放入图片

本地启动

1 2	`hexo g -d hexo s`

浏览器访问 http://localhost:4000，页面如下，文章添加成功

六、个性化页面展示

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

1. 浏览器tab页名称

修改根目录下 _config.yml中的 title 字段。 ![](https://cdn.nlark.com/yuque/0/2024/png/49235244/1730253575896-91c51c43-ad97-4ad9-b044-b8dfa7d2e890.png)

2. 博客标题

主题目录 themes/fluid 下 _config.yml 中的 blog_title 字段。

3. 主页正中间的文字

主题目录 themes/fluid 下 _config.yml 中的 text 字段。

修改好配置后，页面效果如下，可以看到现在显示的内容变成了我们的个人信息

4、页面顶部大图

主题配置中，每个页面都有名为 banner.img的属性，可以使用本地图片的相对路径，也可以为外站链接，比如：

指向本地图片：

1	`banner_img: /img/bg/example.jpg # 对应存放在 /source/img/bg/example.jpg`

再修改对应的_config.yml即可

效果如下

5、关于页

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

1	`$ hexo new page about`

创建成功后修改 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

在关于页介绍自己的基础信息，可以在主题配置中设置：

效果如下

七、发布到GitHub Pages

安装hexo-deployer-git

1	`npm install hexo-deployer-git --save`

修改根目录下的 _config.yml，配置 Github 相关信息

deploy:
  type: git
  repo: https://github.com/icemouse094/icemouse094.github.io.git
  branch: main
  token:

其中 token 为 Github 的 personal access tokens获取方式如下图

部署到GitHub

1	`hexo g -d`

浏览器访问https://icemouse094.github.io/ 部署成功

The construction of website

#搭建过程

本站搭建过程

http://example.com/2024/11/04/本站搭建过程/

作者

big_freeze_mouse

发布于

2024年11月4日

许可协议

BaseCTF(WEB方向) 上一篇

巨龙是个蛋下一篇