add "how to deploy docusaurus site" artical.

README.md

@@ -1,41 +1,3 @@
-# Website
+# fpac(fries port academy of sciencs website)
 
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+this project is a website, which is deploy to `www.friesport.ac.cn`. I hope you can learn something from it.

docs/docusaurus/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Docusaurus部署教程",
+  "position": 1,
+  "link": {
+    "type": "generated-index",
+    "description": "自己部署一个Docusurus站点"
+  }
+}

docs/docusaurus/deploy.md

@@ -0,0 +1,113 @@
+---
+sidebar_position: 3
+---
+
+# 部署
+
+有多种方式部署，最简单的就是直接在服务器上部署，只需要执行下述命令
+```bash
+npm run build
+npm run serve
+```
+最后映射3000端口至公网即可。可以配合cloudflare tunnel或者内网隧穿等方式实现。
+
+但是我手边没有能够24小时稳定连接网络的设备，因此我选择托管到免费的github pages。理论上可以部署到任何提供对象存储或者提供静态网站托管的服务商。
+
+## 部署到github pages
+每个仓库的网站会托管到指定域名，对于薯条港的fpac仓库来说，这个域名是[`friesport.github.io/fpac`](https://friesport.github.io/fpac)。github会从根目录的`.github/workflows`文件夹读取action配置。从官网抄作业，在这个文件夹下创建action配置文件。注意，官网使用的是yarn，这里我替换为npm，如果需要yarn包管理器的请摘抄官网的。
+```yaml title=".github\workflows\deploy.yml"
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+    # Review gh actions docs if you want to further define triggers, paths, etc
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
+
+jobs:
+  build:
+    name: Build Docusaurus
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Build website
+        run: npm run build
+
+      - name: Upload Build Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: build
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+```
+另外官网还提供了一份test-deploy的文件，不确定有没有用，反正我也修改了。
+```yaml title=".github\workflows\test-deploy.yml"
+name: Test deployment
+
+on:
+  pull_request:
+    branches:
+      - main
+    # Review gh actions docs if you want to further define triggers, paths, etc
+    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on
+
+jobs:
+  test-deploy:
+    name: Test deployment
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Test build website
+        run: npm run build
+```
+
+在github新建仓库，在本地根目录初始化git仓库，在git中关联远程和本地仓库。然后提交代码并推送。
+
+
+
+创建一个新分支gh-pages，创建后在仓库的pages中设置推送到gh-pages。
+
+可能需要修改环境保护规则，使main分支能读写github-pages环境。
+
+耐心等待action完成任务。
+
+## 参考文档
+[Docusurus部署](https://docusaurus.io/zh-CN/docs/deployment)
+

docs/docusaurus/dns.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 4
+---
+
+# 自定义域名
+施工中

docs/docusaurus/install.mdx

@@ -0,0 +1,27 @@
+---
+sidebar_position: 2
+---
+
+# Docusurus安装
+
+## 先决条件
+- 已安装node.js
+- (可选)魔法上网
+
+## 步骤
+在终端运行命令，你需要将`fpac`改为你自己的项目名。
+```bash
+npx create-docusaurus@latest fpac classic
+```
+我的命令使用经典模板，且没有使用typescript，如果你需要启用typescript，请在后面加上参数`--typescript`。其他包管理请参见参考文档。
+
+进入文件夹安装依赖后可以尝试启动服务，如果成功，应该可以在[`http://localhost:3000`](http://localhost:3000)访问。
+```bash
+cd fpac
+npm install
+npm run start
+```
+
+
+## 参考文档
+[Docusurus安装流程](https://docusaurus.io/zh-CN/docs/installation)

docs/docusaurus/intro.md

@@ -0,0 +1,18 @@
+---
+sidebar_position: 1
+---
+
+# Docusurus介绍
+
+建站方面当之无愧第一人气的是使用PHP开发的WordPress。WordPress作为一个历史悠久的CMS（内容管理系统）拥有海量的插件以及几乎所有疑难杂症的解决方式。但是WordPress的页面是动态页面，对于我的需求而言太过复杂。因此需要寻找一个更简单直接的解决方案来制作我的网站。
+
+我的需求如下：
+- 可以简单的通过编写markdown格式的文本制作网页。
+- 可以扩展其他功能。
+- 如果可能的话使用静态网页，以减少服务器方面的开销。
+
+对于这类需求，比较符合条件的是文档制作器。其中扩展性主要分为两个阵营：react和vue。react阵营较为出名的是由Meta（Facebook）开发的Docusurus，vue阵营较为出名的是vue自己的主力静态网站生成器vitepress。
+
+以前学过一点点Vue3，但是没整明白，又因为学习的课程[MIT WebLab](https://weblab.mit.edu/)使用的是react，并且发现react比vue好理解，最终选择了Docusurus。
+
+简中互联网的Docusurus的内容比较少，特此记录一下自己部署笔记。

docs/intro.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 4
 ---
 
 # Tutorial Intro

docs/tutorial-basics/markdown-features.mdx

@@ -43,18 +43,18 @@ Let's see how to [Create a page](./create-a-page.md).
 
 Regular Markdown images are supported.
 
-You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
+You can use absolute paths to reference images in the static directory (`static/img/french-fries.png`):
 
 ```md
-![Docusaurus logo](/img/docusaurus.png)
+![Docusaurus logo](/img/french-fries.png)
 ```
 
-![Docusaurus logo](/img/docusaurus.png)
+![Docusaurus logo](/img/french-fries.png)
 
 You can reference images relative to the current file as well. This is particularly useful to colocate images close to the Markdown files using them:
 
 ```md
-![Docusaurus logo](./img/docusaurus.png)
+![Docusaurus logo](./img/french-fries.png)
 ```
 
 ## Code Blocks

docusaurus.config.js

@@ -76,21 +76,21 @@ const config = {
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
       navbar: {
-        title: 'My Site',
+        title: '薯条港',
         logo: {
-          alt: 'My Site Logo',
+          alt: 'Fries Port Logo',
           src: 'img/logo.svg',
         },
         items: [
           {
             type: 'docSidebar',
             sidebarId: 'tutorialSidebar',
             position: 'left',
-            label: 'Tutorial',
+            label: '文章',
           },
-          {to: '/blog', label: 'Blog', position: 'left'},
+          {to: '/blog', label: '博客', position: 'left'},
           {
-            href: 'https://github.com/facebook/docusaurus',
+            href: 'https://github.com/friesport/fpac',
             label: 'GitHub',
             position: 'right',
           },
@@ -103,25 +103,29 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'Tutorial',
-                to: '/docs/intro',
+                label: 'docusaurus文档',
+                href: 'https://docusaurus.io/zh-CN/docs',
               },
+              {
+                label: 'MDN互联网文档',
+                href: 'https://developer.mozilla.org/zh-CN/docs/Web'
+              },
+              {
+                label: '计算机自学手册',
+                href: 'https://csdiy.wiki'
+              }
             ],
           },
           {
             title: 'Community',
             items: [
               {
-                label: 'Stack Overflow',
-                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-              },
-              {
-                label: 'Discord',
-                href: 'https://discordapp.com/invite/docusaurus',
+                label: 'matrix',
+                href: 'https://matrix.to/#/#friesport:mozilla.org',
               },
               {
-                label: 'X',
-                href: 'https://x.com/docusaurus',
+                label: 'bilibili',
+                href: 'https://space.bilibili.com/1690617042',
               },
             ],
           },
@@ -134,12 +138,13 @@ const config = {
               },
               {
                 label: 'GitHub',
-                href: 'https://github.com/facebook/docusaurus',
+                href: 'https://github.com/friesport/fpac',
               },
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+        //  
+        copyright: `Copyright © ${new Date().getFullYear()} FriesPort. ALL RIGHTS RESERVED. <br/><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">粤ICP备2022148146号</a>`,
       },
       prism: {
         theme: prismThemes.github,

src/pages/index.js

@@ -32,8 +32,9 @@ export default function Home() {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+    // ${siteConfig.title}
+      title={'首页'}
+      description="fries port is a platform for dreamer, where they can make dream come true. ">
       <HomepageHeader />
       <main>
         <HomepageFeatures />

src/pages/intro.md

@@ -0,0 +1 @@
+这里是薯条港文章频道，记录着笔记、随笔、总结。

src/pages/my-react-page.md

@@ -0,0 +1,11 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+
+export default function MyReactPage() {
+  return (
+    <Layout>
+      <h1>My React page</h1>
+      <p>This is a React page</p>
+    </Layout>
+  );
+}