许多年前，在COVID口罩时期的广州芳村，1号线露天段旁边一个社区的小房间里，一个男孩在电脑上新建了一个index.html文件。照着朋友们推荐给他的网上教学，他在里面输入了数行代码，上传至github。他的个人网站从此踏上发展的旅途。

这个男孩也正在给您叙述他重新打造个人网站的计划与思考。后来他的个人网站也经历了多次的更新换代，至今重做了第三版。在这篇文章发布的时候，第三版个人网站仍在待完善的状态。

一、个人网站整体计划

1. 整体结构

个人网站的整体结构可以分为以下几个部分：

tyex.ink

主页 www.~（自己排版, Bootstrap）

简单介绍

跳转窗口

博客 blog.~（Butterfly, Hexo）

预设文章

自撰文章

云盘 drive.~（Directory Lister, PHP）

个人作品

分享第三方资料

2. 制作主页

进入www.tyex.ink就是一个全屏的欢迎页，上面有Navbar，向下看可以看到一些介绍文字和个人相片，然后有几个跳转窗口。

3. 制作博客

用基于Hexo的Butterfly主题，写好配置预设文章，也先自撰一些文章，比如现在这篇。

4. 制作云盘

用PHP的Directory Lister，把和彩云可展示的文件列表展示出来，方便访客下载。写一个PHP静态转换器用于每次部署至Github.

二、一些从中引发的思考与启示

1. 使用单独的个人网站主页

我身边有相当一部分伙伴直接使用博客首页界面作为个人网站主页，我的上一版个人网站亦是如此。但这一版个人网站我有这样的需求：既需要有博客，又需要有个人云盘，而它们关系平级。因此我采用了一种解决方式：设计一个单独的个人网站主页，同时作为博客和云盘的入口。这也带来了额外的好处：主页可以作为加入ECMSC入口，排版更加自由。

2. 博客和Jekyll断舍离，改用Hexo

上一版个人网站的博客就是采用Jekyll搭建的，但方式较为简单粗暴：直接手动从Github克隆主题。这一版个人网站一开始也是计划用Jekyll重新搭建，结果是我折腾了两天才发现Windows是不支持Jekyll在本地部署运行的，这意味着每次浏览都需要上传至Github。因此我决定与Jekyll断舍离，改用Hexo。

Hexo给我带来了许多Jekyll没有的便利：它的创建以及部署只需要几个命令行即可完成。Hexo也有十分优质的主题，比如Butterfly，我也有同学正在用，这让我在改用Hexo后毫不犹豫地选择了它。

3. 需熟悉命令行的使用

我接触代码这么多年，但在制作第三版个人网站之前，对命令行几乎没有任何了解。而这次制作第三版个人网站地过程，我大胆让自己使用命令行，一边使用，一边领悟命令行的用法。现在有些命令行在反复的使用下让我熟记，其中包括cd表示切换目录、软件或环境名 -v或version查看环境或软件的变量或版本、install 软件或环境名安装软件或环境，以及一些hexo、git命令。

4. Vercel部署域名

Vercel有免费快速的域名解析服务，也能够正常显示Butterfly主题页面。因此我习惯在Github托管代码之后，使用Vercel部署个人网站域名。

三、建设个人网站目前剩下的工作

目前个人主页的界面设计基本完成，博客也成功进行初步部署，还需要继续完善博客的预设文章和功能，处理以前的文章，以及搭建云盘。

1. 完善博客的预设文章

博客首页右上角所跳转的“友链”、“关于”都是待完善的预设文章，待编辑。

2. 完善博客的功能

博客有一些功能，如访客的评论，需要研究如何加入，如果很难弄可以暂时不做。

3. 处理以前的文章

以前Jekyll时期的文章虽然已经转移，但仍需要处理，比如给它们加上封面，调整代码的格式等。

4. 搭建云盘

云盘目前已确定使用基于PHP的Directory Lister主题和和彩云的存储服务，但还需要研究如何实现，目前已经构想了相关方案。下面是构想的步骤：

第一步：下载Directory Lister主题，安装PHP环境，注册和彩云账号

写这篇文章的时候刚下载了Directory Lister的最新版本，但还没有安装PHP环境，也没注册和彩云账号，因此需要先安装PHP环境并注册和彩云账号。

第二步：配置Directory Lister并在本地部署

配置Directory Lister主题，将它部署至本地，并配置好和彩云的连接。

又由于PHP不能在Github上直接运行（Github Pages只能储存并展示静态页面），但理论上有两种方案可以解决，放在第三步讲。

第三步（方案一）：使用生成器在本地生成静态页，再上传Github

目前还不知有没有PHP生成器生成静态页，如果没有，就要自己写一个。下面是一个用AI生成的生成器Demo。

<?php
// 生成静态页面的 PHP 脚本
$pages = [
    'index.php',
    'about.php',
    'contact.php'
];

foreach ($pages as $page) {
    $url = 'http://your-local-server/' . $page; // 本地开发环境 URL
    $content = file_get_contents($url);
    $filename = 'path/to/static/' . basename($page, '.php') . '.html';
    file_put_contents($filename, $content);
}

echo "Static pages generated successfully.";
?>