给你的游戏部署一个网站

网站框架:vuepressV2

第一步

需要准备的东西:

域名(国内有腾讯云,阿里云,国外有cloudflare)

node.js

git

vscode

github账号

vercel账号

第二步

注册并登入到你的github账号

点击左边的new,输入一个项目名字

接着在下面选择Public(公共的)

在Add.gitignore一栏搜索node.js并选择

Choose a license保持为None

然后点击Create repository创建存储库

创建好之后点击左边的Code,选择SSH

复制SSH key

第三步

在你的磁盘下面新建一个文件夹,然后右键文件夹

在右键菜单中选择Git Bash Here

输入git clone [第二步获取的SSH key]
等待下载

在下载完成之后在git输入

yarn add -D vuepress@next
echo '# Hello VuePress' > README.md
yarn vuepress dev

在所有指令都执行完后你会获得一个网址:http://localhost:8080/

显示Hello VuePress即成功

第四步

现在的网站没有主题,非常简洁

在git中输入

yarn init

等待初始化完成之后在git输入

code .

启动vscode

打开package.json

在"scripts"下面添加
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

接着在git中输入

mkdir docs
echo '# Hello VuePress' > docs/README.md

并删除package.json那层目录下的README.md

不要删除docs目录下的README.md

然后在git输入yarn docs:dev来启动网站

按Ctrl+c关闭网站服务

打开docs/.vuepress/新建一个名为config.js的文件

在其中输入

import { defaultTheme } from 'vuepress'

export default {
  theme: defaultTheme({
    // 默认主题配置
    navbar: [
      {
        text: '首页',
        link: '/',
      },
    ],
  }),
}

docs文件夹中的README.md为网站主页,配置可以参考我的

---
home: true
title: Gura
heroImage: https://i.imgtg.com/2023/04/15/XxPDU.jpg
heroText: Gura
tagline: 帮助文档
actions:
  - text: 快速开始
    link: /id/game/
    type: primary
  - text: 下载Gura
    link: /id/xiazai/
    type: primary   
  - text: 介绍
    link: /id/game/
    type: secondary
features:
- title: 游戏引擎
  details: https://www.renpy.org/
- title: 下载
  details: https://game.17smc.xyz/id/xiazai/
- title: 源码
  details: https://game.17smc.xyz/id/code/
footer: MY GAME | Copyright © 2023
---

最后

执行yarn docs:dev预览网站

第五步

现在把你的网页部署到github上

在根目录新建一个名为deploy.sh的文件,并在其中输入(第23行内容请把<USERNAME>替换为你的github名字,<REPO>替换为第二步中数据库的名字)

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
echo '你的域名' > CNAME

git init
git add -A
git commit -m 'deploy'

# 这两行请注释 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:main

cd -

在package.json的scripts底下添加

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  },

在git中输入yarn deploy

检查github仓库是否已经上传好网页文件

接着,打开vercel用github登录

选择你存放网页文件的数据库,点击Deploy,等待部署完成

然后点左侧的View Domains,按要求解析域名

打开网站,这就是你的成果

最后

学习一些markdown语法,这很简单

给你的网站写一些文档