从零开始搭建与部署静态个人主页
如标题所言,本文的目的是分享此网站从创建到部署的流程中所使用的技术以及解决方案,为有同样意愿的朋友提供一条简单直观的复现路径。同时,本文也是对自己所学习但没怎么搞懂的技术的二次审视,方便对自己的工作流进行优化。我本人并非来自于计算机科学专业,但在高中和大学的学习中或多或少的有接触到一些编程的基础。所以如果我可以做到,那任何人应该都可以做到。 搭建个人网站所要实现的技术难度并不高。如果是以成功部署为目的,那么你并不需要完全理解每一个步骤背后的原理是什么,但中途遇到的报错会需要你了解编程语言所做的事情是什么,从而找到问题的根源。 在遇到困难时,我建议善用语言模型来为你提供实时的帮助,它们所拥有的知识可帮助解决许多问题。当然,提问的方式以及判断回答是否可靠的技能也同样重要。这一点,我们会在未来的另一篇文章中一起探讨。 开发平台与工具 我使用运行在MacOS上的VS Code进行代码的编写,所以这里会分享的代码都是能运行在MacOS的Terminal中的。如果你使用的是其它的平台(如Windows)那么少部分代码也许需要修改成你的平台所兼容的语法。 我的个人网站本质上是整合了现有的解决方案并把它们拼凑在一起。能够实现的核心技术是hugo和其平台中的主题PaperMod,并最终用Github和Vercel进行部署。 网站的搭建过程中,我有让Google的语言模型Gemini 2.5来帮助我进行网站的构造。最终遇到的技术问题,也使用了OpenAI的ChatGPT帮助我进行了排错。如果没有它们的帮助,我想这个过程会艰难很多很多吧。 构建个人网站 首先,你需要在Terminal中记录你的Github所关联用户名与邮箱,这样未来就可以把本地写好的内容push到云端以准备部署。 git config --global user.name “你的用户名“ git config --global user.email "your_email@example.com" 接下来需要做的,是安装Hugo。你可以选择进入官网跟着官方的引导一起做,也可以选择在MacOS的Terminal中实现的方式。这里我会介绍第二种方式。 在确保你的环境中存在Homebrew后,请在Terminal中输入: brew install hugo Hugo安装完成后,你需要在设备上建立一个网站的项目。同样输入下列代码: hugo new site my-blog #这里Hugo会建立的文件夹名为“my-blog” cd my-blog #进入文件夹 此时文件夹也会在你的计算机的本地被创建。在MacOS里,默认的创建位置是用户文件夹下。 Hugo 本身只负责生成内容,外观则由主题决定。你可以在 Hugo Themes 官网上寻找喜欢的主题。这里以我的网站也同样使用的PaperMod为例: git init git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod git submodule update --init --recursive 在配置文件 hugo.toml中,可以启用这个主题: baseURL = "https://<你的网址>.io/" #先不管这个 languageCode = "zh-cn" title = "我的博客" theme = "PaperMod" # 告诉 Hugo 使用这个主题 buildFuture = true #允许markdown创建日期在未来,可以避免一些报错的排查 接下来,就可以使用Hugo去写第一篇文章了。