0.0.1

Author: marsk6

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

.github/workflows/publish.yaml

@@ -0,0 +1,26 @@
+name: GitHub Actions Build and Deploy Demo
+on:
+  push:
+    branches:
+      - master
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+      - name: Cache
+        uses: actions/setup-node@v3
+        with:
+          cache: 'npm'
+      - name: build
+        run:  |
+          yarn
+          yarn build
+      - name: Build and Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: out
+          token: ${{ secrets.ACCESS_TOKEN }}

.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.keystone

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.yarnpkg.com/

.nvmrc

@@ -0,0 +1,25 @@
+os: linux
+language: node_js
+node_js:
+  - 14
+branches:
+  only:
+    - master
+cache:
+  directories:
+    - node_modules
+    - .next
+before_script:
+  - yarn
+  - yarn build
+script:
+  - yarn gen
+deploy:
+  provider: pages
+  skip_cleanup: true
+  token: $GH_TOKEN
+  keep_history: true
+  on:
+    branch: master
+  local_dir: out
+  target_branch: gh-pages

.travis.yml

@@ -1,35 +1,11 @@
-# A statically generated blog example using Next.js, Markdown, and TypeScript
+# Marsk's Blog
+my blog built with react, nextjs, keystone
 
-This is the existing [blog-starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) plus TypeScript.
-
-This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using Markdown files as the data source.
-
-The blog posts are stored in `/_posts` as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.
-
-To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) and [`remark-html`](https://github.com/remarkjs/remark-html) to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by [`gray-matter`](https://github.com/jonschlinkert/gray-matter) and also sent in props to the page.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/blog-starter-typescript)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript&project-name=blog-starter-typescript&repository-name=blog-starter-typescript)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
-
-```bash
-npx create-next-app --example blog-starter-typescript blog-starter-typescript-app
-# or
-yarn create next-app --example blog-starter-typescript blog-starter-typescript-app
-# or
-pnpm create next-app -- --example blog-starter-typescript blog-starter-typescript-app
+# Dev
+```shell
+yarn keystone:dev
+yarn next:dev
 ```
+- localhost:4000
+- admin: localhost:3000
 
-Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-# Notes
-
-`blog-starter-typescript` uses [Tailwind CSS](https://tailwindcss.com) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3).

README.md

@@ -0,0 +1,83 @@
+---
+created_date: 2021-10-15 20:12
+updated_date: 2023-03-07 16:39
+tags:
+  - react-native
+
+title: Expo 简介
+slug: expo-intro
+brief: expo 是什么？expo 集成了 React Native 生态，用于快速开发和部署 React Native 应用，开发者只需懂 React Native
+---
+
+# Expo 简介
+
+> Expo 是一个用于 React 应用的框架和平台。其 Expo SDK 提供了 React Native 和 Native 的组件或工具，帮助开发者仅使用 JavaScript/TypeScript，在 iOS、Android 和 Web 应用上开发、构建、部署和快速迭代。 -- https://docs.expo.dev/
+
+## 背景
+
+开发、构建、发布基于 React Native 的 App 时，可能要修改 Native 的代码或 App 配置，这就需要安装 Xcode 或 Android Studio，配置环境，以及熟悉 iOS 或 Android 开发。这对开发者来说存在相当大的成本。
+
+Expo 已经帮你集成了这些，你只需专注 JavaScript/TypeScript 的代码开发，你可以从 Expo SDK 引入 React Native 或 Native 的组件，另外可以下载 Expo Go App，便于在真机上调试代码、预览效果。
+
+## 开发
+
+#### 初始化项目
+
+```shell
+npm install --global expo-cli
+# 创建新项目
+expo init my-project
+```
+
+#### 目录结构
+
+```shell
+├── App.tsx
+├── app.json # app 配置如图标、名称、版本等等
+├── assets
+├── babel.config.js
+├── node_modules
+├── package.json
+├── tsconfig.json
+└── yarn.lock
+```
+
+#### 修改默认入口
+
+```json
+// app.json
+{
+  "expo": {
+    "description": "",
+    "entryPoint": "./index.ts"
+  }
+}
+```
+
+```javascript
+// index.ts
+import { registerRootComponent } from 'expo';
+import App from '@src/App';
+
+registerRootComponent(App);
+```
+
+#### 安装功能模块
+
+```shell
+expo install expo-camera
+```
+
+有 `yarn.lock` 时，`expo install` 使用 yarn 安装
+
+有 `package-lock.json` 时， `expo install` 使用 npm 安装
+
+## 发布
+
+Expo 也是个沙盒平台，可以在 Expo Go App 访问开发者发布的代码，例如 React Native 官方文档里样例 demo
+
+![](https://cdn.jsdelivr.net/gh/marsk6/image-center@master/expo-intro-1.png)
+
+最后，Expo 的一套集成工具让前端开发者无需过多关注 Native 的配置，大大降低了开发成本，使 App 可以快速迭代。
+
+> 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！