我的网页的制作思路

我的网页的制作思路

  我使用Hexo框架与github pages来进行个人网页的开发。Hexo使用Markdown解析文章，在几秒内即可利用生成静态网页，即把用户的markdown文件，按照指定的主题解析成静态网页。每一个 github 仓库都拥有 pages 服务，通过简单的设置就可以通过项目的 index.html作为入口来展示项目。github pages并不支持动态语言，Hexo使用html组成网页，自己的本地文件夹source作为数据库存在，以markdown格式存储文章，可以到达快速构建个人博客网页的需求。同时theme文件夹作为主题文件夹，以.yml类型来控制页面的主题布局。

  Theme和source文件夹处于同级，每一次运行Hexo g命令时，Hexo就会遍历 source 目录，建立索引，并根据theme文件夹的主题生成页面到静态public文件夹。Hexo的模板引擎是默认使用ejs编写的，最终生成的文件是一个html 页面。最终生成的静态文件可以在Hexo d命令后，由 git pages识别将其内容复制到临时目录，以git方式push到github的指定项目的指定分支，最终由git进行显示。

  以上为Hexo的原理。了解了Hexo的原理后，就可以通过github来构建属于自己的博客网页，而不需要再去处理大量的后端工作。首先创建一个github仓库，并在本地初始化Hexo项目，然后将静态的博客挂在到github pages。接下来就需要在Vercel进行部署并自定义域名。Vercel是一个代码托管平台，能够托管静态的html界面，这样就不需要购买服务器了。在腾讯云购买了域名zhaodawei.icu后，在Vercel进行绑定域名，在域名解析记录中添加Vercel提供的记录即可。

  完成后，一个最基础的个人博客网页就完成了。为了使网页更加美观，继续安装butterfly主题，对网页进行美化之后只需要在本地对将要发表的文章存在source文件夹中，再上传github就可以更新文章了。

  但是现在的图片等资源都是保存在本地的，因此可以利用Cloudflare来创建一个图床来保存图片等资源。首先另外创建一个github仓库并与本地的文件夹连接，这样可以方便的把本地资源上传到仓库中，然后在Cloudflare中创建一个项目并关联刚刚创建的github仓库，就可以利用Cloudflare项目来当图床使用，十分方便。

  到这里，个人网页就基本完成了，剩下的就是对网页进行细致的美化工作，我所进行的美化工作包括但不限于：对右侧滚动条的美化、对背景图的替换、对鼠标指针的美化、对鼠标点击特效的美化、对背景特效的美化、对页脚添加脚标以及美化、添加留言板并美化、增加分类页面并美化等等。种种的美化工作使得我的网页变得更加美观，同时我在网页的左下角加上了一个live2d的人物形象，这个live2d形象可以随着鼠标指针的移动而转动，使得网页更加生动。

  最终我的个人网页完成了，通过不断地查找资料，一步步地尝试和改错，我制作出了满意的个人网页。在学习和查找资料的过程中，我学习到了很多课本之外的知识，同时也对很多新技术有了进一步的认知。