从零开始搭建个人主页：林傲の主页建站全教程

AI文章 2026-07-10 01:31 38 次浏览

前言

拥有一个个人主页，就像是互联网上的一间属于自己的小屋。无论你想展示作品、写博客，还是单纯放一份在线简历，一个完全由自己掌控的网站都是最好的名片。这篇教程将以「林傲の主页」为例，带你从零开始，一步步完成建站全过程。即使你没有任何编程基础，只要跟着步骤操作，也能在一天内让网站上线。

第一步：规划你的主页

在动手之前，先想清楚你的主页需要哪些内容。林傲の主页主要包含以下几个部分：

个人简介与头像
技术文章 / 博客
项目作品集
社交链接

明确内容结构之后，才能更方便地选择建站工具和设计版式。建议先用纸笔画出大致的页面布局，避免后期反复修改。

第二步：选择建站方式

对于个人主页，常见的建站方式有三种：

全手动编写 HTML/CSS/JS：完全自定义，但维护成本高，适合想深入学习前端的人。
使用内容管理系统（如 WordPress）：功能强大，但需要服务器和数据库，略显笨重。
静态网站生成器（如 Hugo、Jekyll、Hexo）：轻量、快速、免费部署，适合个人博客和主页。

林傲の主页选用了 Hugo，因为它构建速度快，主题丰富，且能一键部署到 GitHub Pages 或 Netlify。下面就以 Hugo 为例进行讲解。

第三步：安装 Hugo 并创建站点

首先，在你的电脑上安装 Hugo。macOS 用户可以使用 Homebrew：

brew install hugo

Windows 用户可以从 Hugo 官方 GitHub 发布页下载可执行文件，并将其所在目录加入系统 PATH。

安装完成后，打开终端（或命令提示符），输入以下命令创建新站点：

hugo new site my-homepage
cd my-homepage

此时 Hugo 会生成一个包含 archetypes、content、themes 等目录的骨架项目。

第四步：选择并安装主题

Hugo 社区提供了数百个免费主题。你可以在 Hugo Themes 上挑选一个适合个人主页的样式。林傲の主页选择了一款简洁的两栏主题，支持博客和项目展示。

安装主题通常只需要将主题仓库克隆到 themes/ 目录下，然后在站点配置文件 config.toml 中指定主题名称：

git init
git submodule add https://github.com/example/hugo-theme.git themes/my-theme
echo 'theme = "my-theme"' >> config.toml

之后，你可以根据主题文档修改 config.toml 中的站点标题、描述、导航菜单等基础信息。

第五步：编写内容

Hugo 的内容文件使用 Markdown 格式，存放在 content/ 目录下。创建你的第一篇博客文章：

hugo new posts/my-first-post.md

这会在 content/posts/ 下生成一个包含 front matter 的 Markdown 文件。你可以用任意文本编辑器打开它，在 +++ 或 --- 之间修改标题、日期等信息，然后在下方用 Markdown 语法书写正文。

对于“关于我”页面，可以手动创建 content/about.md，并设置 layout: "about"（如果主题支持）。项目展示可以通过 content/projects/ 下的 Markdown 文件实现，具体结构参考主题文档。

在本地预览网站效果：

hugo server -D

浏览器打开 http://localhost:1313 即可实时查看修改。

第六步：购买域名（可选但推荐）

为了让你的主页拥有独立的网址，而不是 username.github.io，建议购买一个专属域名。像 linao.me 这样的短域名既好记又显得专业。你可以在 Namecheap、Cloudflare 或阿里云等平台选购，一般一年只需几十元。

购买后，将域名的 DNS 记录指向你即将使用的托管服务商（例如 Netlify 或 Vercel）提供的地址，稍后部署时会有具体指引。

第七步：部署上线

静态网站可以免费托管在多个平台上，这里推荐使用 Netlify，因为它支持自动构建、自定义域名和免费 HTTPS。

将你的 Hugo 站点代码推送到一个 GitHub / GitLab 仓库。
登录 Netlify，点击 “New site from Git”，连接你的仓库。
在构建设置中填入：Build command: hugo，Publish directory: public。
点击 Deploy，几分钟后网站即可通过临时域名访问。
在 Netlify 的 “Domain settings” 中添加你购买的域名，并按照提示配置 DNS 解析。

之后，每当你向 Git 仓库推送新的内容，Netlify 都会自动重新构建并发布网站，完全无需手动操作。

第八步：持续维护与优化

网站上线只是开始，持续的维护能让它保持活力：

定期更新博客文章，记录学习与思考。
为网站添加简单的访问统计（如使用 Umami 或 Plausible）。
优化图片大小和加载速度。
根据反馈微调页面布局与内容。

林傲の主页正是通过这样的方式，从一个空白项目逐渐成长为一个内容充实、设计清爽的个人站点。希望这篇教程能帮助你顺利迈出建站第一步。

建站的过程本身就是一种学习，不必追求一步到位。先让网站跑起来，再慢慢打磨，这才是最务实的路径。

建站 Hugo

林傲