搭建个人主页的完整步骤指南

搭建个人主页不仅能够展示自己的技术成果，还能成为以后分享和记录的平台。本文将一步步指引你从初始搭建到最终部署的整个过程。

1. 初始化项目

首先，创建一个新文件夹，负责存储你的个人主页项目。在项目根目录中，使用包管理器初始化。

npm init -yes

安装必要的本地依赖库，推荐使用 vuepress 这个开源工具。

cnpm install -D vuepress

接下来，创建项目文档，建议命名为 docs/README.md。在文件中记录项目简介和说明。

# Hello YK这是 YK 的个人主页项目，欢迎访问。

在 package.json 文件中，添加编译脚本。建议的设置如下：

{  "scripts": {    "docs:dev": "vuepress dev docs",    "docs:build": "vuepress build docs"  }}

启动本地服务器，访问项目页面。

npm run docs:dev

这样就能在浏览器中看到初始页面，接下来是页面的结构设计。

2. 页面整体架构搭建

根据官方文档，添加必要的配置文件。我们建议在目录中添加以下文件：

1. 安装博客主题

为了让你的页面更生动，可以安装一个博客主题。推荐使用 @vuepress/theme-blog。

cnpm install -D @vuepress/theme-blog

2. 目录结构

调整目录结构，方便后续内容管理。建议目录设置如下：

your_project/├── docs/       # 文档目录│   ├── README.md│   └── README.md├── _blogs/    # 博客目录│     └── "your-name".md├── _writing/  # 随笔目录│     └── "your-name".md└── _tag/     # 标签目录    └── "tags".md

3. 配置项目

在 .vuepress/config.js 中，设置站点信息。这里展示一个典型配置示例：

module.exports = {  title: "Hello YK",  // 网站标题  dest: "dist",      // 生成目录  description: "YK 的个人主页",  // 网站描述  theme: "@vuepress/blog",  themeConfig: {    nav: [  // 侧边导航栏配置      { text: "主页", link: "/" },      { text: "博客", link: "/blog/" },      { text: "随笔", link: "/writing/" },      { text: "标签", link: "/tag/" }    ],    directories: [  // 目录配置      {        id: "blog",        dirname: "_blogs",        path: "/blog/",        title: "我的博客"      },      {        id: "writing",        dirname: "_writing",        path: "/writing/",        title: "我的随笔"      }    ],    siderbar: "auto",  // sidebar 自动获取    footer: {      contact: [        { type: "github", link: "https://github.com/yk2012" }      ],      copyright: [        { text: "YK菌", link: "https://gitee.com/ykang2020" },        { text: "© 2021 YK | ", link: "https://gitee.com/ykang2020" }      ]    }  }};

4. 编辑博文

新文章撰写遵循 Markdown 格式。举例：

---title: 我的第一篇文章data: 2021-04-22author: YK菌location: HeFeitags:   - JavaScript  - DOMsummary: 总结文章内容---# 这是第一篇文章

在编辑窗口中输入内容即可，页面将自动生成网页展示。

3. 部署上线

在 GitHub 上建立项目

创建一个新的 GitHub 仓库，命名为 yk2012.github.io。将项目克隆到仓库根目录。

git clone https://github.com/yk2012/yk2012.github.io.git

生成部署脚本

创建或更新 deploy.sh 文件，如下：

#!/usr/bin/env shset -enpm run docs:buildcd distgit initgit add -Agit commit -m 'deploy'git push -f git@github.com:yk2012/yk2012.github.io.git mastercd -