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

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

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-22
author: YK菌
location: HeFei
tags: 
  - JavaScript
  - DOM
summary: 总结文章内容
---
# 这是第一篇文章

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

3. 部署上线

在 GitHub 上建立项目

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

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

生成部署脚本

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

#!/usr/bin/env sh
set -e
npm run docs:build
cd dist
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:yk2012/yk2012.github.io.git master
cd -

执行部署脚本

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

chmod +x deploy.sh
./deploy.sh

启用 GitHub Pages

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

测试访问

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

https://yk2012.github.io

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

4. 最终部署

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

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

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

你可能感兴趣的文章