博客
关于我
【个人博客项目】手把手带你用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/

你可能感兴趣的文章
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>
mysqli
查看>>
MySQLIntegrityConstraintViolationException异常处理
查看>>
mysqlreport分析工具详解
查看>>
MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
查看>>
Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
查看>>
mysql_real_connect 参数注意
查看>>
mysql_secure_installation初始化数据库报Access denied
查看>>
MySQL_西安11月销售昨日未上架的产品_20161212
查看>>
Mysql——深入浅出InnoDB底层原理
查看>>
MySQL“被动”性能优化汇总
查看>>
MySQL、HBase 和 Elasticsearch:特点与区别详解
查看>>
MySQL、Redis高频面试题汇总
查看>>
MYSQL、SQL Server、Oracle数据库排序空值null问题及其解决办法
查看>>
mysql一个字段为空时使用另一个字段排序
查看>>