Github Pages + Vue 快速搭建个人网站

yizhiyang
810 阅读2分钟

一、前言

  • 我们在 github 上看项目的时候，总会遇到 github.io的网站，怀着好奇的心理，查找了一些资料，便有了这篇文章
  • github.io是每个Github账号可以免费拥有的一个域名，这个域名上部署的页面，称之为Github Pages，用户有高度自主权去DIY自己的个人网站
  • 通常，用户会将其用来作为自己的博客网站，存放一些博客、收藏、简历等

二、创建存储库

1. 原理

  • 用户/组织页面（User/Organization Pages）
    • 用户或组织可以在其 GitHub 账户下创建一个特殊的仓库，仓库的名称必须是 username.github.io 或 organizationname.github.io
      • username ：是用户的GitHub用户名，
      • organizationname ：是组织的名称
    • 仓库中的内容将被自动托管到 http://username.github.io 或 http://organizationname.github.io。
  • 比如我的就是：yizhiyang31.github.io/

2. 多个Github Pages

  • 如果你想在同一个 GitHub 用户下搭建多个站点，你需要在 username.github.io 后面添加不同的路径来区分这些站点。
  • 例如，如果你的用户名是 yizhiyang31，那么你可以按照以下方式命名多个站点：
    • Personal Blog: yizhiyang31.github.io/blog
    • Project Documentation: yizhiyang31.github.io/docs
    • Portfolio Website: yizhiyang31.github.io/portfolio
    • Photography Portfolio: yizhiyang31.github.io/photography
  • 每个站点对应的 URL 结构就是基于这样的命名方式。请注意，这种方法下，每个站点都是在同一个仓库中的不同分支或文件夹下托管的。

2. 创建存储库

  • 这里有一点必须注意，存储库名称必须为用户名.github.io image.png

    image.png

三、上传网站文件

1. 本地创建文件

  • 将yizhiyang31.github.io 克隆到本地 
    git clone https://github.com/yizhiyang31/yizhiyang31.github.io.git
  • 创建文件，并且写一下简单的样式 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="display: flex; flex-direction: column; align-items: center;">
    <h1>yizhiyang的个人博客</h1>
    <img src="./image/img.jpg" alt="" height="300px">
  </div>
</body>
</html>
    image.png

2. 将代码推送

  • 打开git，推送代码 
    git add .
git commit -m "test"
git branch -M main
git push -u origin main

3. 刷新

image.png

4. 站点地址

  • 站点 image.png

    image.png

5. 访问

四、vue项目部署到 Github Pages

  • 写好的vue项目进行打包，将打包好的dist文件下面的内容放在yizhiyang31.github.io文件夹下面

    npm run build
    image.png

  • 将代码推送到GitHub上

    image.png

  • 预览 image.png

五、 总结

  • 我还是在思考能不能放后端代码，运行起来，百度了是不可以

  • Github Pages只能存放静态页面，不能运行后台代码，不能动态生成文件，也不能有数据库。 image.png

  • 所以只能做自己的博客网站，存放一些博客、收藏、简历等。

avatar
文章
阅读
粉丝