写于2022/1/31，刚好除夕夜

因为闲了太多天于是觉得要做点什么，看到服务器打折，想起来博客还托管在 GitHub Pages 上，那就好好整整自己的博客吧。

Retamev.github.io 的开发日记

主题的选择

master versionmaster versionhttps://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ffhexo versionlicense

2021 年暑假在 Github 闲逛，对 butterfly 主题一见钟情，加上时用的动态博客维护较为麻烦，便萌生了把博客搬迁到 Hexo 的想法。

于是最后选择了 Hexo + Butterfly 的方案。

什么是 Hexo ？

Hexo 是一个快速的、简单的、功能强大的博客框架。你可以通过 Markdown 语言写文章，然后 Hexo 帮你生成一个带有漂亮主题的静态页面。

什么是 Butterfly ？

Butterfly 是一个 Hexo 框架下的简单卡片式 UI 设计主题。搭配Node.js和Git(分布式版本控制系统)将主题挂载到你的博客仓库。

Hexo 的安装和后续操作

安装

借助搜索引擎的帮助安装完 Node 以及 Git 后，新建一个标签为blog的文件夹，在留白处单击鼠标右键选择 Git Bash Here 对根目录执行 Git 操作。

输入下面的指令安装 Hexo。

1
npm install -g hexo-cli

安装完成后可以通过以下指令验证安装，出现版本号即为成功。

1
hexo -v

启动

输入以下指令生成基础文件和目录

1
hexo init

输入以下指令安装运行hexo的一些必要的组件

1
npm install

运行完，当前目录下会自动创建一些目录，如下

1
2
3
4
5
6
7
.
├── _config.yml
├── package.json
├── scaffolds/
├── scripts/
├── source/
└── themes/
  • _config.yml 站点配置文件
  • package.json 应用数据。从它可以看出Hexo版本信息，以及它所默认或者说依赖的一些组件。
  • scaffolds 模版文件。当你创建一篇新的文章时，Hexo会依据模版文件进行创建，主要用在你想在每篇文章都添加一些共性的内容的情况下。
  • scripts 用于存放 JavaScript 文件
  • source 这个文件夹就是放文章的地方了，除了文章还有一些主要的资源，比如文章里的图片，文件等等东西。这个文件夹最好定期做一个备份，丢了它，整个站点就废了。
  • themes 主题文件夹。

配置

若要修改网站标题、副标题和邮箱等个人资料，就去修改站点配置文件 _config.yml ，主题支持 EnG zh-CN(简体中文) zh-TW(繁体中文) 三种语言

Profile

  1. Site 部分，也就是站点的一些参数设置：

    • title 网站的名字，也就是 HTML 的 title ，会显示在浏览器标签上，如果是博客一般就是写 Reta的博客 这样子啦。
    • subtitle 站点副标题，会显示在 title 后，可以写一句代表自己的句子（？。
    • description 站点描述，可以不填…不是什么都要填的！
    • author 作者，填上自己的标记叭。
    • language 语言，改成 zh-CN 。
    • timezone 站点时区，默认是电脑时间，不用管。

  2. URL 部分，在这里要链接到自己的 GitHub 仓库

    • url 站点网址，如果氪金买了域名就填自己的域名，如果和我一样是靠 GitHub 施舍，那就填上网站对应的仓库链接，如 https://retamev.github.io/ 。

  3. Writing 部分，在这里有一些关于你发布 Post 的设置。

    • new_post_name 新建文章默认文件名，默认值为 title.md ，比如你执行命令”hexo new hello”，就会默认在 _post 目录下创建一个 hello.md 的文件
    • future 一个开关，它会决定你的博客中会不会出现来自未来的文字…嘿嘿。

  4. Home page setting 部分

    • per_page 一页显示多少篇文章，0 为不分页，默认值为 10 。

  5. Extensions 部分，在这里可以更换主题。

    • theme 在这里填上主题的名字，但是在 ./node_modules 目录下一定要有主题文件。

    • deploy 部署设置，在 type 处填 Git ，在 repo或者repository 处填写 GitHub 生成的链接，在 branch 处填 main 。

      url

Hexo 常用指令

简写指令

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
$ hexo n "我的第一篇文章" 

#等价于 $ hexo new "我的第一篇文章" ，也等价于 $ hexo new post "我的第一篇文章"

$ hexo p 

#等价于 $ hexo publish

$ hexo g 

#等价于 $ hexo generate

$ hexo s 

#等价于 $ hexo server

$ hexo d 

#等价于 $ hexo deploy

$ hexo deploy -g 

#等价于 $ hexo deploy --generate

$ hexo generate -d 

#等价于 $ hexo generate --deploy

#注: 以下指令无简写

$ hexo clean

$ git --version

指令说明

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
$ hexo server 

# Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。

$ hexo server -s 

#以静态模式启动

$ hexo server -p 5000 

#更改访问端口 ( 默认端口为 4000，如 localhost:4000 )

$ hexo server -i IP

#自定义 IP

$ hexo clean 

#清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹

$ hexo g 

#生成静态网页 (执行 $ hexo g后会在站点根目录下生成public文件夹, hexo会将./blog/source/下面的.md后缀的文件编译为.html后缀的文件,存放在./blog/public/路径下)

$ hexo d 

#将本地数据部署到远端服务器( 如 GitHub )

$ hexo init 文件夹名称 

#初始化文件夹名称

$ npm update hexo -g

#升级

$ npm install hexo -g

#安装

$ node -v 

#查看node.js版本号

$ npm -v 

#查看npm版本号

$ git --version 

#查看git版本号

$ hexo -v 

#查看hexo版本号

$ hexo publish [layout] <title> 

#通过 publish 命令将草稿移动到 ./source/_posts 文件夹,如:$ hexo publish [layout] <title>,草稿默认是不会显示在页面中的，可在执行时加上 --draft 参数，或是把 render_drafts 参数设为 true 来预览草稿。

作者暂时睡觉了zzz