🤢

本文最后更新于 2024年12月6日 下午

Next.js

Next.js 是一个灵活的React 框架，它为您提供构建块来创建快速的Web 应用程序。

具体介绍详见官方文档

🧶开始

配置环境

安装Node.js

创建Next.js应用

1
$ npx create-next-app@latest

就会在当前目录下自动生成一个Next.js应用

🔨创建站点

在上一步操作中，我们已经完成了站点的初始化，可以执行

1
$ npm run dev

以在http://localhost:3000上查看效果

至于个性化，本来就想咕

何况我对JS一窍不通🕊️

🎓写作

啊啊啊写JS！放过我QWQ

🏸部署

还是经典操作

1
2
3
4
5
$ git init
$ git add .
$ git commit -m '<COMMIT_MESSAGE>'
$ git remote add origin https://github.com/<YOURNAME>/<PROJECT_NAME>.git
$ git push -u origin main

执行后打开Vercel，绑定你的GitHub账户后部署刚创建好的仓库，模板选Next.js，一路确定

等部署成功的烟花撒完，在控制台中找到项目域名就可以查看网站了

对于二级域名的个性化，可在控制台中自行查找

上述过程比较㵘，不懂之处请参照官方文档操作

🎉

Gatsby

本地安装错误 n 次，暂🕊️

口胡一下

还是一些经典操作，初始化的时候瞎选就行（理论上学过英语就能看懂）

1
$ npm install -g gatsby-cli

然后执行

1
$ gatsby new

会有下面的东西

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 以下内容摘自官方文档(https://gatsbyjs.com/docs/tutorial/part-1/)
What would you like to call your site?
✔ · My First Gatsby Site #站点名称
What would you like to name the folder where your site will be created?
✔ Desktop/ my-first-gatsby-site #工作目录名
✔ Will you be using JavaScript or TypeScript?
❯ JavaScript #配置文件语言(建议JS)
  TypeScript
✔ Will you be using a CMS?
> No (or I'll add it later) #是否使用CMS
  –
  Contentful
  DatoCMS
  Netlify CMS
  Sanity
  Shopify
  WordPress
✔ Would you like to install a styling system? 
> No (or I'll add it later) #安装排版系统
  –
  Emotion
  PostCSS
  Sass
  styled-components
  Theme UI
  vanilla-extract
✔ Would you like to install additional features with other plugins?
>( ) Add the Google Analytics tracking script #插件
 ( ) Add responsive images
 ( ) Add an automatic sitemap
 ( ) Generate a manifest file
 ( ) Add Markdown and MDX support
 ( ) Add Markdown support (without MDX)
  ─────
  Done
Thanks! Here's what we'll now do:
    🛠  Create a new Gatsby site in the folder my-first-gatsby-site
? Shall we do this? (Y/n) › Yes

接着就是安装了，挂了不知道多少次

以下内容仅停留在理论层面

请参阅官方文档QwQ

Nuxt

Vue？

再见

为什么这么靠前

咕咕咕🕊️

官方文档

💡安装

1
$ yarn create nuxt-app <project-name>

👀写作

去***的Vue

👑部署

1
$ yarn generate

然后又是经典操作

然而需要注意的是，我们需要在nuxt.config.js中加入下面几行

1
2
3
4
generate: {
    dir: 'docs',
    subFolders: false
}

并设置GitHub Pages使用/docs部署页面

🎉

GitBook

在官网上注册账号，按提示搞就行

似乎对国内网络不太友好

UmiJS

JS啊，那没事了

🕶️安装

1
$ yarn create umi

具体选项参阅官方文档

使用

1
$ yarn dev

进行预览

🍸写作

不会

🍴部署

似乎有点麻烦

安装插件

1
$ yarn install gh-pages --dev

修改.unirc.ts

添加以下内容

1
2
3
outputPath: 'build',
publicPath: 'https://<YOURNAME>.gitee.io/<PROJECT_NAME>/',
history: { type: 'hash' },

修改package.json

1
2
3
4
5
6
7
8
9
10
"scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage",
    // 下面新增发布命令
    "deploy": "gh-pages -d build",
  },

发布

1
2
$ yarn build
$ yarn deploy

🎉

Eleventy(11ty)

搞不明白（QwQ

💎安装

1
2
$ npm install
$ npm install --save-dev @11ty/eleventy

☘️模板

可以在Markdown前通过Front Matter引入模板

新建_includes文件夹

1
2
3
4
5
6
7
8
9
10
11
12
// default.njk
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }} | My Site</title>
</head>
<body>
   {{ content | safe }}
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
// blog.njk
---
layout: default
---
 
<h1>{{ title }}</h1>
<div>
  Published on {{ date }}
</div>
 
<article>
  {{ content | safe }}
</article>

🚩部署

新建名为.nojekyll的空文件

新建.gitignore并写入/node_modules

新建/.github/workflows/deploy.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
name: Eleventy Build
on: [push]

jobs:
  build_deploy:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@master
      - name: Build
        uses: TartanLlama/actions-eleventy@master
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: _site 
          publish_branch: gh-pages
          github_token: ${{ secrets.GITHUB_TOKEN }}

并选择从gh-pages分支部署

🎉

Zola

📡安装

1
2
$ choco install zola
$ zola init my-blog

📍写作

参考官方文档

当然也有一些主题🕊️

1
2
$ zola serve #本地预览
$ zola build #构建静态文件

🛫部署

把build目录下所有文件用经典操作扔到GitHub上就行

🎉

Fresh

🍥安装

1
2
3
4
$ choco install deno
$ deno run -A -r https://fresh.deno.dev my-project
$ cd my-project
$ deno task start #本地预览

⚡部署

——写作？

——不会TypeScript！

送到GitHub上，然后在Deno Deploy中选择对应仓库、分支，入口点选main.ts，设置名称后点Link即可

更多内容，还是那句话，看官方文档（QwQ

🎉

Brunch

官方文档

🍴安装

1
2
$ npm install -g brunch
$ brunch new . -s es6

🍖写作

写HTML

1
2
$ brunch watch --server #本地预览
$ brunch build #生成静态文件

🥂部署

把/public扔到GitHub上，不难吧

越来越水

技术教程
#杂谈
🤢
https://qwerx29.github.io/posts/a3de8d5f.html
发布于
2022年9月6日
更新于
2024年12月6日
许可协议