折腾日记

【本周随笔】

这1周前所未有的勤奋，早上8点不到就在电脑前捣鼓博客甚至持续到晚上12点，看了千八百份相关资料，大概错了千八百次。我打算搞多个网站，一个存放笔记，一个是个人博客。备用网站域名都可以用二级域名。 爽歪歪。只要GitHub和vecel不倒闭.

一些血泪史：

建站方法一般都有多种。我看了很多教程，没有基础很容易混乱。怎么A这么说，B那么说啊，然后就傻掉了，到底哪种，好像都看不懂啊。 比如单就安装hugo软件就有手动下载，最简单的是改电脑系统的path环境变量，但是不知道路径要怎么放？为啥这样放？也有指令下载，指令还分很多种 cmd git npm cnpm ,总之mmb的看不懂就对了。

最大的阻碍是死活理不清建站的逻辑和思路。 有些教程先建 GitHub 仓库。有些先建本地站,有些从仓库导入 vercel ，有些从 vercel 建站到仓库,再克隆到本地，有些根本就不用vercel，总之吧，建站的过程和顺序可以不一样，貌似是很白痴的血泪教训 。

不懂背后的逻辑和思路，战战兢兢就很怕出错，一步一步100%照着来，非常僵化和机械，后来我才逐渐理解教程只是博主的个人偏好或者是个人经验，可以变通。可以综合多篇，理清逻辑，调整成自己最能理解的和执行的步骤。理解了本地站点文件和Github仓库文件和vercel文件同步一样。你可以用命令行克隆也好，也可以手动复制。三者之间哪个先哪个后都可以，你可以先仓库建站导入vercel, 也可以在vercel建站生成到Github,你也可以本地建站同步到Github.不管是什么办法确保网站预览的最终效果三者连接上并且同步。奖励建立好之后。有改错字什么的。可以不用打开本地设备，在GitHub网站上修改，vercel会自动部署网站上，nice。

第一：

前期找到一篇齐全详细并你能看懂的教程，照着步骤来。我看的是小球飞鱼^[1]，很多完全零基础的女生网友都是因为这篇成功建站。我也是因为她这篇直接动手了。一定要点开她的友情链接，就能发现宝藏网友,个个十八般武艺，能文善武。

她，读书观影学语言玩游戏折腾网站记录日常样样不落，看她折腾网站魔改网站的血泪心路，每个步骤遇到的难点，怎么思考和解决，完全没有技术和前端知识她也能搞出视觉和互动都很有个人特色的网站。太厉害了。她有三个网站 小球飞藏^[2] 小球飞记^[3]小球飞槎^[4]。

可以再看另外这3篇辅助Missing^[5] randomwaves^[6] Lenhoon^[7] 虽然是讲hexo,但建站的原理和逻辑时相同的。

我的要求很低，不需要很复杂的，不太撞车，小改就行，魔改好费脑子（说得好像费了就懂一样)。所以选主题很重要，有同主题的修改分享也很重要。主题也就是网站的皮肤，hugo提供了一给网站框架+Github存放你的网站代码+vercel托管虚拟服务平台，你的代码仓库中自动拉取代码 然后进行项目打包和部署。 建站过程不理解的地方也要继续，错了就知道什么意思了，继续错就炸掉重来。经过1+1008次失败。我就是这样的弱鸡，日升日暮，第一天过去了,还没成功。😭

比如一些令人劝退的词？下载个hugo二进制文件?? 渲染到 github ??渲染是什么？？？二进制是什么？？密钥？？ 感叹一句：有些中文技术教程写的就是给懂的人看的。懂得人还需要看吗

我后来瞎理解二进制英文名是bin,就是藏在电脑系统深处那些乱七八糟看不懂又打不开的文件软件。所以有些教程^[8]把hugo.exe丢在路径C:\bin,然后打开安装的git,测试是否安装成功，就把这个C:\bin关掉就好 了。（和等下要建立的站点文件没什么关系，不要混放在一块。） 去年就我尝试过hexo建站。第一步就卡住了，有些教程是hexo命令行，有些是直接来个cmd 就蒙圈。加上突然忘记 cmd 怎么打开的，然后又得去搜索。不细说在什么前提下打开某个工具，也不强调在哪个文件夹下执行。对小白来说，寸步难行。希望有动态指令截图，官方就有啊 快速入门 hugo^[9]，按照hugo 说明，本地建站和换主题很快就弄好。换主题也有多种方法，选择你最能理解的。难点是指令执行时你在的位置不对，存放的路径错了，或者手动下载易放错文件夹，总的说就是路径出错。或者config配置的主题代码和文件的命名不一致，一定要去看主题官方说明，怎么更改配置。选主题可以在hugo官网主题库^[10]

第一天我就是不理解整个站点根目录下的存放是怎样的，也不理解hugo.exe是什么就一起放到站点文件里，主题文件也放错位置了，所以第一天没成功。 第三天有点头绪了，开始搜索视频教程了，操作性强的东西还是视频直观。视频少的可怜，要么也一上来就操作步骤，完全不解释逻辑和思路。后来在油管印度小哥的hugo+vercel瞬间就理解了不一定按照小球飞鱼所说的步骤来，没有自带cc字幕，就是看懂了操作。懂了的人10分钟能建站完全可以的。当然网络要顺畅，因为经常弹出连不上仓库。

第二 ：

善用官方说明，找到省时省力的主题：功能齐全适合自己审美在线主题，不需要大刀阔斧小动小改就能拥有个性化的blog。后期的小修改需要一些前端知识，看得懂英文代码，代码文件中善用cltrl+f, ，另外可以到Github 的主题或作者本人的 issues 看网友的留言，总有你同款问题。甚至很多抛出个人blog，顺藤摸瓜找到同款主题了。blog主们一般都会分享搭建过程和后续美化文章。然后根据自己的审美修改就好了。

第三：

后期发布文章都是存放到content的posts文件夹下，md 格式，找一款 心水的md 编辑器。比如电脑端就用vscode，其他时候利用 forestry，只要有网登陆网页版就可以编辑发布更新到你的网站上了，太好了？ 就是很卡。 如果你也想建立自己手动个人网站，直接参考小球飞鱼的说明和理解来就好，步骤很详细，写的很好了，我说的就是看了她的教程和我在其他地方的不一样产生了很多不必要的困惑。最后感谢这些博主们。前人种树后人乘凉。 。

补充版 小白版。

我发现对小白来说 最简单的建站是开箱即用。即复制别人正在用的博客。

前提知识 电脑环境设置 以及了解你要搭建的博客是什么技术搭建的。

比如hugo +github+vercel.搭建的

那前提就得 安装hugo+ git+ vscode+ GitHub面板。 以及注册GitHub +vercel网站。

先别问为什么 先安装。后面运用就知道是什么东西了。

除了hugo 需要额外设置（ 不说明额外设置是什么 此处就可以搜hugo 查看官网文章文档安装。

其他的都是傻瓜式安装。

首次 使用GitHub需要通过git设置密钥。 相当赋予了电脑拥有打开GitHub权限。

在设置密钥后。二者互通。 此随时可以访问上传/修改/同步/。

（ 一脸懵逼 此处需要搜git 和github 是什么以及怎么使用。

对 对小白来说 博主如果不对每个新出现的概念和名词大白话解释 。这种处处都有隐藏的知识点/ 处处踩雷。又不知道从何处招收着手。真的很想摇摇脑子。。博主你写的什么东西。和怀疑自己的智商。

具体步骤

1. 注册GitHub账号
2. 看中他人的博客-打开博主的GitHub博客仓库- fork一份给自己 此处就是用到GitHub怎么使用的问题
3. 通过GitHub登陆vercel-导入该仓库到vercel。

到这步你网站已经成功打起来搭建起来了。 域名是vercel 提供的。 只不过网站内容还是原博的。

这个步骤注意点是原博如果博客框架是hugo 本地得安装hugo 如果是hexo 就得下载个hexo 所以找的博客得知道用的是什么主题什么框架。

黑话就是什么技术搭建的需要什么环境运行。

再查看官网说明文档。一般就需要记住2个命令。本地预览和新建文件 比如打开git 输入 hugo server 是本地预览。

补充1

GitHub面板 和vscode都自带 git 功能。但本地还是需要安装git的软件

安装git软件后 在博客站点根目录右键打开会有git bash here。为什么需要到根目录。如果不在根目录下桌面打开git需要 执行cd 直到进入到你的博客根目录。。所以不懂的git的人 偷懒就到根目录右键。

4. 下载GitHub面板-登陆github账号-克隆刚刚的fork的仓库到本地。也可以在GitHub仓库里修改 但是线上修改太费劲 所以需要复制一份到本地修改再同步到仓库。

同步就需要GitHub面板工具 。 GitHub面板的作用其实是通过视图工具实现文件和代码的管理以及同步（也就是涉及到git的使用。比如上传push和下载pull。通过GitHub面板就不需要接触代码和git命令。 我刚开始完全不知道是什么东西。后来才渐渐有点门路 。大概原理是 git是去中心化的管理历史代码工具。可以理解成 一个正在执行的项目 每个人可以拉/下载/复制一份到本地修改。 多人协作互不影响有条有序。最后各自修改的成果汇合到一块/推送/上传到仓库。过程哪里修改了什么时候修改谁修改了 最重要的是出错了还能退回历史记录。无限退回。yyds.

5. 最后找到md文件存放路径-替换原博文章 (记得要修改原博的front matter。

这个方法是最简单。

比较矛盾的是 如果不经过试错或者执行过官方方法就不能理解上述的偷懒取巧的方法。哎。。所以内化知识化繁为简什么的都是高手。对新手来说是浮云。

需要注意前提是原博网站没有借用第三方服务。比如如果原博设置了的ing论系统 那么你没有改成自己的数据库同步就会报错。只能整个就废掉了

如果你还想了解，可以看下面几篇： Hugo与Hexo的异同^[11] 静态网站构建手册^[12] Hugo中文文档^[13]Hugo详细笔记^[14]常用的Git命令^[15]Hugo Documentation^[16]