行，那咱就唠唠这个折腾个人官网的全过程。这个想法挺突然的，就感觉大一的时光嗖一下过去了，想找个地儿专门存点自己的破事。
一、念头一起，开始捣鼓
我是先琢磨怎么做才省事。寻思着要不要用现成的平台，比如啥博客、啥空间之类的。
- 试了WordPress：下了一个放自己电脑上玩，界面是好看，但感觉太复杂了，一堆插件设置看得我头晕眼花，跟我想弄的简单风格完全不搭，果断放弃。
- 瞅了瞅静态网站生成器：像啥Hexo、Hugo，概念挺但配置YAML、学命令、搞模板，学的时候血压都上来了，太费劲，不适合我这急性子。
- 心一横：整！干！老子直接手撸代码！不就是HTML、CSS、JS吗？学呗！控制感强，想改成啥样就啥样。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
二、开工！从零搭建
打开电脑，先建了一个新文件夹，名字就叫 "my_college_web"。
1. 基本框架弄起来：新建一个 * 文件，拿个 <!DOCTYPE html> 开头，然后啥 <head>、<body> 都给塞进去。就搞了一个贼简单的标题：“XXX的大学生活 S1”，用 <h1> 标签包起来。正文？还空着！
2. 手机也得看着顺眼：我知道现在都手机看，所以第二步就是硬啃响应式设计。在 <head> 里加了个 <meta name="viewport" content="width=device-width, initial-scale=1.0">，然后在 CSS 文件里开始搞名堂，用百分比宽度、Media Query（这词还是查的）。测试就是不停在手机屏上拉大缩小，手指头都快戳酸了才勉强让它在手机、平板上不垮掉。
3. 美化工作搞起来：光秃秃太难看了。开始找颜色，想要清爽点的风格，定了蓝+白做主调。导航条做了个固定在顶部的，四个选项：首页 S1学期 S2学期 瞎叨叨（对，瞎叨叨是我放杂感的地方）。Logo 实在不会画，用了个字体图标糊弄过去。
4. 内容塞进去！
- 首页：放了个巨傻的自我介绍：“一枚瞎折腾的大学生”，下面放了几张上课、社团活动的图（都压缩过，怕加载慢）。
- S1学期：做了个时间轴效果（是网上找的代码改的），把大一上学期的大事件按月份贴上去：军训被晒成狗、第一次社团招新、参加个啥破比赛打酱油... 再加点当时的配图或随手拍的烂图。
- S2学期：打算记录下学期，结构跟S1差不多，但刚开始做，内容还空着。
- 瞎叨叨：就是个简单的列表页面，每次更新在列表头加一条，点进去是详情。写完第一个小记《关于食堂的难吃我想说几句》，贴了上去。
5. 动一动？加点JS：感觉页面太死了，就想着加点小动作。给导航菜单搞了个鼠标悬停变色的效果（贼简单那种），然后在首页“了解更多”按钮上加了点击滑动到S1部分的功能，JS代码是东拼西凑改出来的。
三、搞定S2，继续堆内容
S1部分弄差不多后，寒假就开始倒腾S2学期那块儿。
- 复制改改：直接复制了S1页面的结构，把时间轴改了个S2的标题，然后把上学期的课程表、项目啥的往里填。
- 新增了个相册模块：纯粹是因为上学期手机相册快爆了。找了个轻量级的图片预览库，折腾半天才把代码嵌进去，让它能点小图看大图。每次加新照片都得手动改代码路径，烦死。
- 在首页加了动态卡片：想着首页得“活”一点，就把瞎叨叨里最新一条的标题和开头几句话，用JS自动抓取显示到首页一个小卡片上。一开始搞不定数据怎么拿，用了个蠢办法：手动把最新内容写在一个隐藏的html里，JS再去读那个节点内容。
四、收尾上线，缝缝补补
本地测试了几遍，感觉差不多了。
1. 找了个便宜的托管平台：上传文件、绑定域名（咬牙买了个一年的）。上传的那一刻心砰砰跳，怕出错打不开。
2. 上线就出丑：果然！访问巨慢。赶紧用开发者工具看，发现图片没压缩到位，有些图2、3MB大！立刻用软件重新压缩一波，所有图缩到300KB以内。
3. 手机端又出幺蛾子：有个页面在手机竖屏下排版错位，排查半天发现是某个Media Query没写全，赶紧补上。
4. 搞了个超简易计数器：纯粹满足自己好奇心，在页面角落藏了个几行JS代码，记录访问次数。现在看到数字一点点涨，心里还是有点小得意。
就这么磕磕绊绊，从想法到上线，折腾了小一个月。每次更新就是打开编辑器改代码，然后FTP传文件覆盖。这站现在就像我的线上小窝，虽然简陋，但每一行代码、每一张图、每一个字都是自己抠出来的，这波操作不亏。
