利用 Github 免费创建个人网站、项目网站

ALKAOUA
3,517 阅读2分钟

要想部署一个属于自己的个人网站或者项目网站，流程参考 一个网站部署的详细流程！步骤齐全！少走坑路 - 腾讯云，其中包括域名注册、域名备案、域名解析、购买服务器等等，这些流程真的很长很麻烦，而且服务器费用还高

有时候只是想把网站部署出去给少数人使用，想省事也不想承担相应成本，可以借助 github 平台来完成，本文介绍如何创建：

  • 个人网站（https://<username>.github.io/）
  • 项目网站（https://<username>.github.io/<project-name>/）

创建个人网站

  1. 创建仓库

仓库名设置为：<username>.github.io（username：github 官网的用户名）

image.png

例如我的个人主页的仓库地址：github.com/ALKAOUA720/…

  1. 快速搭建工程（这里使用vite构建工具+react框架）
image.png
  1. 修改构建产物的输出路径（这里以 vite 举例）

修改 vite 的构建选项：build.outDir 为 docs（注意：这里必须是叫 docs，要跟 github 官方对应）

image.png

代码如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: "docs", // 输出构建产物到docs目录
  },
});
  1. 打开github，打开配置页：settings - pages

image.png

配置 Build and deployment 的 source 为 Deploy from a branch 和 branch 为 [主分支] 的 /docs 目录

image.png

image.png
  1. 本地开发环境执行 build 命令生成构建产物
image.png

（注意：这里要检查一下 .gitignore 文件要不包含 docs 目录）

  1. 本地提交并推送到远程仓库后，打开github，打开actions页

可以看到页面自动开启部署流程，部署完成后：

image.png

  1. 部署完成后，可以看到 Github Pages 已经自动生成我的个人网站了，可以直接访问 alkaoua720.github.io/

image.png

image.png

创建项目网站

以我的个人 Github 项目为例：

github.com/ALKAOUA720/… （一个采用 React + umi 框架的前端 Web 项目）

image.png

大体步骤和创建个人网站的流程一样

  1. 修改构建产物输出目录为 docs
image.png
  1. 本地执行 npm run build 后生成的构建产物：
image.png
  1. 提交推送到远程仓库后还是到 settings - pages 路径下，关注 build and deployment 区域

image.png

  1. 后续每次推送后 github 都会自动执行构建流程

image.png

  1. 回到 settings - pages 下可以看到这个项目的网站链接已经生成，部署记录也可以看到，点击访问项目网站 alkaoua720.github.io/common-ui-r…

image.png

生成网站的二维码

借助 草料二维码生成器 可以给你的个人网站、项目网站生成二维码，方便移动端扫码访问：

  1. 点击“网址” - “网址静态码”

image.png

  1. 输入网址链接后点击“生成二维码”：

image.png

成功为我的项目网站 alkaoua720.github.io/common-ui-r… 生成一个二维码

  1. 可以调整二维码尺寸（单位：px）

image.png

image.png

  1. 还可以对二维码进行美化

image.png

最终效果：

image.png

二维码永久有效

avatar
文章
阅读
粉丝