博客
关于我
【个人博客项目】手把手带你用VuePress搭建并在git上部署一个自己的个人博客主页v0.1
阅读量:567 次
发布时间:2019-03-09

本文共 2535 字,大约阅读时间需要 8 分钟。

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

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

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/

你可能感兴趣的文章
mysql 让所有IP访问数据库
查看>>
mysql 记录的增删改查
查看>>
MySQL 设置数据库的隔离级别
查看>>
MySQL 证明为什么用limit时,offset很大会影响性能
查看>>
Mysql 语句操作索引SQL语句
查看>>
MySQL 误操作后数据恢复(update,delete忘加where条件)
查看>>
MySQL 调优/优化的 101 个建议!
查看>>
mysql 转义字符用法_MySql 转义字符的使用说明
查看>>
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 通过查看mysql 配置参数、状态来优化你的mysql
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>
mysql 锁机制 mvcc_Mysql性能优化-事务、锁和MVCC
查看>>
MySQL 错误
查看>>
mysql 随机数 rand使用
查看>>
MySQL 面试题汇总
查看>>
MySQL 面试,必须掌握的 8 大核心点
查看>>
MySQL 高可用性之keepalived+mysql双主
查看>>
MySQL 高性能优化规范建议
查看>>