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

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

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 -

执行部署脚本

将脚本添加执行权限并运行：

chmod +x deploy.sh./deploy.sh

启用 GitHub Pages

进入仓库设置，启用 GitHub Pages 功能，并选择主支作为发布分支。

测试访问

最终，你可以通过以下链接访问个人主页：

https://yk2012.github.io

如图所示，可以看到完整部署后的页面效果。

4. 最终部署

通过以上步骤，你已经成功搭建并部署了个人主页。接下来可以根据实际需求，添加更多功能或内容。记得定期更新，以保持页面的生机和活力。

如果需要优化页面，建议参考更多优秀站点的设计，提升访客体验。

转载地址：http://qqtpz.baihongyu.com/

你可能感兴趣的文章