记录我这次的建站过程

起因是最近闲下来，又把建站的事情拾起来了，想着作为搞计算机的，也能作为自己的电子名片。

之前是用hexo+fluid搭过一次网页，说实话并不符合我对UI设计的审美，于是在同学的推荐下尝试用Astro + Theme.Pure来重建一下自己的网页

Astro本质还是改前端源文件，因此可操作性比hexo高很多，我也在AI的帮助下完成了些UI设计的工作。我很长一段时间没搞前端了，如果您有相关的专业知识，欢迎评论详细说明。

Get Started#

第一步： 将Theme.Pure clone到本地#

git clone https://github.com/cworld1/astro-theme-pure.git

第二步：删除 .git 目录， 并重新 init，推送至个人仓库#

cd astro-theme-pure
rm -rf .git
git init
git add .
git commit -m "Initial commit"
git remote add origin {your_repo_url}
git branch -M main
git push -u origin main

第三步： 安装依赖项#

请保证你已经安装了Node.js和npm

npm install

这一步文件比较多 要等一会儿，你也可以配置npm的镜像源来加速这个过程

此时你就可以运行以下代码来启动开发服务器

npm run dev

此时你就可以在浏览器中访问 http://localhost:4321 ↗ 来查看你的网页了

第四步： 删除docs目录#

由于我们是在本地开发，因此不需要docs目录。可以直接删除它。 然后在配置文件中删除docs相关的内容：

export const theme: ThemeUserConfig = {
   // ...
   header: {
      menu: [
         { title: 'Blog', link: '/blog' },
         { title: 'Docs', link: '/docs' },  
         { title: 'Projects', link: '/projects' },
         // ...
      ],
   },
}

const docs = defineCollection({ 
	// ...
}) 
export const collections = { blog, docs } 
export const collections = { blog } 

注：官方文档中建议删除 packages 目录，packages/pure 里头是 astro-pure 的依赖包，在安装依赖项的时候已经装到 node_modules 里面了。

但是我的习惯是保留 packages 目录，并做以下处理：

打开 packages 目录，将 pure 重命名为 astro-pure。这是为了与 node_modules 里头的名字一致。 将 packages 目录移动到 src 里头 基于这个方式进行后续操作，将会使得我们后面的自定义个人博客内容的流程变得简单。

测试部署#

不急着对网页做修改，先看看能不能部署成功。测试一下能不能成功部署到你的个人服务器或者vercel上，你也可以部署你的CI/CD流程

客制化流程#

以下是你可能需要修改的文件

基础站点配置#

• 修改站点信息： src/site.config.ts
  • title 、 author 、 description 、 favicon 、 logo.src 与 logo.alt
  • locale （语言、日期格式）
  • header.menu （导航菜单项与链接）
  • footer.links 、 footer.credits 、 footer.social （底部链接与社交账号）
  • content.blogPageSize （博客列表分页大小）
  • content.share （分享网络： weibo 、 x 、 bluesky ）
  • integ.pagefind （搜索开关）、 integ.quote （页脚随机语录）、 integ.typography （文章排版）
  • integ.mediumZoom （图片放大效果）
  • integ.waline （评论系统： enable 、 server 、 additionalConfigs ）
• 配置站点域名与适配器： astro.config.ts
  • 更新 site 为你的真实域名（影响 Canonical、RSS、Sitemap 等）
  • 如需子路径部署（例如 GitHub Pages），设置 base
  • 根据部署选择适配器与输出模式（当前为 Vercel serverless， output: ‘server’ ）

页面内容#

• 首页： src/pages/index.astro
  • 头像 src/assets/avatar.png 、作者展示、技能模块与最新文章卡片
  • 可传入 highlightColor 高亮渐变色（例如 PageLayout meta={{ title: ‘Home’ }} highlightColor=‘#659EB9’ ）
• 关于页： src/pages/about/index.astro
  • 替换示例文字（含 Lorem ipsum ）、个人简介、工具与环境列表、社交网络
• 项目页： src/pages/projects/index.astro
  • 替换项目卡片数据（名称、简介、链接）
• 友情链接页： src/pages/links/index.astro 与 public/links.json
  • 在 links.json 填充你的友链数据；页面会读取并展示
  • 友链“公告/申请信息”由 src/site.config.ts 内的 integ.links.applyTip 控制
• 归档/标签/搜索页： src/pages/archives 、 src/pages/tags 、 src/pages/search
  • 正常使用即可；如不需要可从 header.menu 移除导航项

博客内容#

• 文章与内容集合： src/content/blog/
  • 每篇文章一个目录，内有 index.md 或 index.mdx 与 thumbnail.jpg
  • 可直接增删改，或通过命令行新建文章： npm run new （对应 astro-pure new ）
• 博文详情布局与公共布局： src/layouts/BlogPost.astro 、 src/layouts/BaseLayout.astro
  • 如需细调文章页结构、Meta 或公共页骨架（头部/底部）

开始一篇Blog的编写#

我们给出了2种创建Blog的方法

方法1 指令创建#

npm run new <title>

可以在Astro项目的 src/content/blog/ 目录下创建新的博客文章。

• 指令：astro-pure new [options]
• 参数，默认都是否：
  • -l, —lang <en|zh>：文章语言
  • -d, —draft：是否是草稿
  • -m, —mdx：使用 .mdx 格式
  • -f, —folder：是否在单独文件夹下创建文章 （无法在文件夹内新建文章）
• -h, —help：显示帮助信息
• 默认路径：src/content/blog/
• 文件命名：
  • 默认直接生成 slug.md
  • 如果加 -f，会生成一个目录 slug/，里面放 index.md
• 内容模板：YAML Frontmatter（包含 title、description、publishDate、draft、lang、tags 等）。

方法2 手动创建#

在 /src/content/blog 文件夹下直接新建 title 文件夹以及 /title/index.md 文件即可