{"id":14989548,"url":"https://github.com/faultaddr/react-blog","last_synced_at":"2025-08-20T01:31:07.009Z","repository":{"id":37380346,"uuid":"306458969","full_name":"faultaddr/react-blog","owner":"faultaddr","description":"react blog build with react hooks + koa2 + sequelize + mysql for personal usage.","archived":false,"fork":false,"pushed_at":"2023-08-11T03:20:16.000Z","size":3206,"stargazers_count":152,"open_issues_count":6,"forks_count":35,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-12-09T06:23:22.671Z","etag":null,"topics":["antd","blog","bycrypt","create-react-app","jwt","koa","koa2","mysql","react","react-hooks","react-router-v4","redux"],"latest_commit_sha":null,"homepage":"http://www.panyunyi.cn","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/faultaddr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-22T21:08:08.000Z","updated_at":"2024-11-06T13:21:53.000Z","dependencies_parsed_at":"2024-09-15T16:05:10.356Z","dependency_job_id":"26f450f4-81be-4245-9002-e1354d77d82d","html_url":"https://github.com/faultaddr/react-blog","commit_stats":{"total_commits":132,"total_committers":4,"mean_commits":33.0,"dds":0.5681818181818181,"last_synced_commit":"a48f4eb5cfb3a8a90fa6961c155d4486b548bb29"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faultaddr%2Freact-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faultaddr%2Freact-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faultaddr%2Freact-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faultaddr%2Freact-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/faultaddr","download_url":"https://codeload.github.com/faultaddr/react-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230382858,"owners_count":18216854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","blog","bycrypt","create-react-app","jwt","koa","koa2","mysql","react","react-hooks","react-router-v4","redux"],"created_at":"2024-09-24T14:18:32.911Z","updated_at":"2024-12-19T05:07:07.733Z","avatar_url":"https://github.com/faultaddr.png","language":"JavaScript","readme":"# React Blog \n\n\n[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE)\n[![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu)\n\n\nFor chinese , you can visit this [中文](https://github.com/faultaddr/react-blog/blob/main/README.zh-CN.md)\n\nOne-click installation \u0026 deployment of the React blog, freeing your hands so that you only need to change the configuration file to have a perfect personal technical blog!\n\nThis ReadMe file contains the following:\n\n1. How to install and deploy a blog\n2. How to configure front-end page information\n3. How to configure sensitive back-end information\n\n\n## Table of Contents\n\n- [Background](#Background)\n- [Install](#Install)\n- [Usage](#Usage)\n- [Features and Personalized Configuration](#Features-and-Personal-Configuration)\n     - [Features](#Features)\n     - [Personalized Configuration](#Personalized-Configuration)\n     - [Personalized Information Configuration](#Personalized-Information-Configuration)\n     - [Background sensitive information configuration](#Background-sensitive-information-configuration)\n- [Maintainer](#Maintainer)\n- [Contributing](#Contributing)\n- [License](License)\n\n## Background\n\n`React Blog` was originally built on the basis of project [alvin0216/react-blog](https://github.com/alvin0216/react-blog) which was created by [alvin0216](https://github.com/alvin0216) , In order to fix some known issues and add more personalized elements, Last but no Least, I have added various security guarantees of the website, making it more cool and easier to use.\n\n\nIn order to build a personal website, you first need to rent a cloud server (centos is generally used instead in this article), and use Alibaba Cloud/Tencent Cloud/AWS to host the website. Or you can use Ngrok to do intranet penetration and deploy the website on your PC.\n\n\n## Install\n\nIf you want to deploy on the Centos server, you can directly use our one-click installation deployment script:\n```sh\n$ sh install.sh\n```\nIf you want to install and configure yourself, use [node](http://nodejs.org),[npm](https://npmjs.com),[yarn](),[forever]() for this project. Please make sure You have performed the correct installation locally.\n\n```sh\n$ npm install --global yarn\n$ npm install --global forever\n```\n\n\n## Usage\n\nIf you use the one-click installation script mentioned above, please pay attention to whether the port is occupied when starting later:\n\n```sh\n$ yum install lsof\n$ lsof -i:80\n$ lsof -i:6060\n```\nIf there is port occupation, please end the process or change the port\n\nThen execute the following instructions for production deployment\n\n```sh\n$ cd src\n$ yarn build\n$ nohup serve -s build -l 80 \u0026\n$\n$ cd server\n$ forever start app.js\n```\n\nOr for development environment deployment\n\n```sh\n$ cd src\n$ nohup yarn dev\n$\n$ cd server\n$ forever start app.js\n```\n\n\n\n## Features and Personal Configuration\n\n### Features\n\n- [x] Front Desk: Homepage + List Page + Search Page + Category Page + Tab Page\n- [x] Backstage: article management + user management\n- [x] Responsive, article anchor navigation, back to top, `markdown` code highlighting, `mathjax` support\n- [x] Users: users on the site, users authorized to log in by a third-party `github`\n- [x] Users can comment and reply, as well as the status of **mail notification** reply\n- [x] `md` file import and export function! You can directly upload the `md` file to generate an article\n- [x] Separation of private and public articles\n- [x] One-click comment without registration\n- [x] Homepage background\n- [x] Top of article\n- [x] Gossip\n- [x] Get the mailbox secret dynamically\n- [x] Password transmission encryption\n- [x] Background chart\n- [x] Share Link for the admain to manage the visiablity of the private article\n- [ ] Smart Recommendation (Related Recommendation)\n\n### Personalized Configuration\n\nPersonalized configuration is configured through ```src/config.js```\n\n```js\nimport React from 'react'\nimport { Icon } from 'antd'\nimport SvgIcon from '@/components/SvgIcon'\n\nimport Href from '@/components/Href'\nimport MyInfo from '@/views/web/about/MyInfo'\nimport {GithubFill} from 'utils/antdIcon'\n// API_BASE_URL\nexport const API_BASE_URL = 'http://120.79.229.207:6060'\n// export const API_BASE_URL = 'http://127.0.0.1:6060'\n// project config\nexport const HEADER_BLOG_NAME = '菜园子' // header title \n\n// === sidebar\nexport const SIDEBAR = {\n    avatar: require('@/assets/images/avatar.jpeg'), // sidebar image\n    title: '种菜的小朋友', // title\n    subTitle: 'Carpe diem', // subtitle\n    // personal website\n    homepages: {\n    github: {\n        link: 'https://github.com/faultaddr',\n        icon: \u003cGithubFill className='homepage-icon' /\u003e \n    },\n    juejin: {\n        link: 'https://juejin.im/user/96412755827687',\n        icon: \u003cSvgIcon type='iconjuejin' className='homepage-icon' /\u003e\n    }\n    },\n    //frindslink in sidebar\n    friendslink: {\n    lizi: {\n        link: 'http://blog.liziyang.co/',\n        img: 'http://blog.liziyang.co/images/pikachu.jpg',\n    },\n    wizchen: {\n        link: 'http://blog.wizchen.com',\n        img: 'https://cdn.jsdelivr.net/gh/wizcheu/content1@main/img/header.gif'\n    }\n    }\n}\n\n// === discuss avatar\nexport const DISCUSS_AVATAR = SIDEBAR.avatar // your default avatar in comment line\n/**\n * github config\n */\nexport const GITHUB = {\n    enable: true, // github 第三方授权开关\n    client_id: '87a4f88b943adaafd44a', // Setting \u003e Developer setting \u003e OAuth applications =\u003e client_id\n    url: 'https://github.com/login/oauth/authorize' // github auth page\n}\n\nexport const ABOUT = {\n    avatar: SIDEBAR.avatar,\n    describe: SIDEBAR.subTitle,\n    discuss: true, // open the comment function on 'about me' page \n    renderMyInfo: \u003cMyInfo /\u003e // 我的介绍 自定义组件 =\u003e src/views/web/about/MyInfo.jsx\n}\n\n// 公告 announcement\nexport const ANNOUNCEMENT = {\n    enable: true, // 是否开启\n    content: (\n    \u003c\u003e\n        个人笔记网站，请访问\n        \u003cHref href='https://www.yuque.com/zhongcaidexiaopengyou/kb'\u003e panyunyi's note\u003c/Href\u003e\n    \u003c/\u003e\n    )\n}\n```\n### Personalized Information Configuration\n\nPersonal information is configured through ```src/view/web/about/index.jsx```\n```js\nimport React from 'react'\n\n// components\nimport { Divider, Rate, Icon, Avatar } from 'antd'\nimport Href from '@/components/Href'\nimport SvgIcon from '@/components/SvgIcon'\n// rate is the star\n// label is your skills\nconst skills = [\n  {\n    label: '具备扎实的Java功底，熟练了解各种特性',\n    rate: '5'\n  },\n  {\n    label: '具备扎实的Python功底，熟练了解各类特性',\n    rate: '5'\n  },\n  {\n    label: '具备扎实的 Javascript 基础，熟练使用 ES6+ 语法。',\n    rate: 4\n  },\n  {\n    label: '具备不那么扎实的 C++ 基础，没熟练了解各类特性',\n    rate: 3\n  },\n  {\n    label: 'Android 顶级玩家',\n    rate: 5\n  },\n  {\n    label: '熟悉 React 并理解其原理，熟悉 Vue 框架及其用法。',\n    rate: 5\n  },\n  {\n    label: '熟悉 Flask/Django 并理解其原理，熟悉各类用法。',\n    rate: 5\n  },\n  {\n    label: 'Spring 全家桶爱好者，后端中级开发者,netty/kafka/hadoop/Storm/Spark',\n    rate: '3'\n  },\n  {\n    label: '3D 轻量级玩家，openGL小菜,3D shape segmentation \u0026 3D scene segmentation',\n    rate: '3'\n  },\n  {\n    label: '熟练使用 Webpack 打包工具，熟悉常用工程化和模块化方案。',\n    rate: 4\n  },\n  {\n    label: '熟悉 Koa、Mysql，针对需求可以做到简单的数据库设计、接口的开发与设计！',\n    rate: 3\n  },\n  {\n    label: '熟悉 HTTP 协议，缓存、性能优化、安全等，了解浏览器原理。',\n    rate: 4\n  },\n  {\n    label: '熟悉常用的算法与数据结构',\n    rate: 3\n  }\n]\n\nconst MyInfo = () =\u003e {\n  return (\n    \u003c\u003e\n\n      \u003cDivider orientation='center'\u003e关于我\u003c/Divider\u003e\n\n      \u003cul className='about-list'\u003e\n        \u003cli\u003eName：潘云逸\u003c/li\u003e\n        \u003cli\u003eBachelor： 中央财经大学（CUFE）CS\u003c/li\u003e\n        \u003cli\u003eMaster： 南京大学（NJU）CS\u003c/li\u003e\n        \u003cli\u003e\n          Contact me：\n          \u003cIcon type='qq' /\u003e 779087031\n          \u003cDivider type='vertical' /\u003e\n          \u003cSvgIcon type='iconemail' style={{ marginRight: 5, transform: 'translateY(2px)' }} /\u003e\n          \u003ca href='mailto:cuferpan@gmail.com'\u003ecuferpan@gmail.com\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003eWork Base：ShangHai\u003c/li\u003e\n        \u003cli\u003e\n          friends link：\n          \u003cHref href='http://blog.liziyang.co/'\u003e栗子栗子\u003c/Href\u003e\n          \u003cDivider type='vertical' /\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          skills\n          \u003cul\u003e\n            {skills.map((item, i) =\u003e (\n              \u003cli key={i}\u003e\n                {item.label}\n                \u003cRate defaultValue={item.rate} disabled /\u003e\n              \u003c/li\u003e\n            ))}\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          others\n          \u003cul\u003e\n            \u003cli\u003e常用开发工具： idea、pycharm、vim、vscode、webstorm、git\u003c/li\u003e\n            \u003cli\u003e熟悉的 UI 框架： antd、element-ui\u003c/li\u003e\n            \u003cli\u003e具备良好的编码风格和习惯，团队规范意识，乐于分享\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          publication\n          \u003cul\u003e\n            \u003cli\u003eICPR 2020: Two Stage Scene Segmentation Base on Self-attention Mechanism\u003c/li\u003e\n            \u003cli\u003e 安徽大学学报： 图核综述 \u003c/li\u003e\n            \u003cli\u003e 专利： 一种基于机器学习的CME事件跟踪方法 \u003c/li\u003e\n            \u003cli\u003e 译著： 计算机视觉基础 \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default MyInfo\n```\n### Background sensitive information configuration\n\n\nSensitive information in the background is configured through ``server\\config\\index.js``, including the startup port of the background, the configuration of the database, and the configuration of the email notification of comments.\n\n```js\nconst devMode = process.env.NODE_ENV === 'development'\nconst config = {\n  PORT: 6060, // start port\n  ADMIN_GITHUB_LOGIN_NAME: 'faultaddr', // your github name\n  GITHUB: {\n    client_id: '87a4f88b943adaafd44a',\n    client_secret: '9494809fc485d93084452fbf8b21ba2a829bfb82',\n    access_token_url: 'https://github.com/login/oauth/access_token',\n    fetch_user_url: 'https://api.github.com/user', // 用于 oauth2\n    fetch_user: 'https://api.github.com/user' // fetch user url https://api.github.com/users/gershonv\n  },\n  EMAIL_NOTICE: {\n    // mail notification\n    // detail: https://nodemailer.com/\n    enable: true, // switcher\n    transporterConfig: {\n      host: 'smtp.qq.com',\n      port: 465,\n      secure: true, // true for 465, false for other ports\n      auth: {\n        user: '779087031@qq.com', // generated ethereal user\n        pass: 'f2bbfe7cf1bcb8253a65c06701fbbbbf8c910be44ecc1a430497d4879db0d71d' // generated ethereal password \n      }\n    },\n    subject: 'panyunyi的博客 - 您的评论获得新的回复！', // subject for the notification mail\n    // main content of the mail\n    text: '您的评论获得新的回复！',\n    WEB_HOST: 'http://www.panyunyi.cn' // email callback url\n  },\n  TOKEN: {\n    secret: 'root', // secret is very important!\n    expiresIn: '720h' // token exist time\n  },\n  DATABASE: {\n    database: 'test',\n    user: 'root',\n    password: '123456Root!',\n    options: {\n      host: 'localhost', //  host ip\n      dialect: 'mysql', // sql dilect\n      pool: {\n        max: 5,\n        min: 0,\n        acquire: 30000,\n        idle: 10000\n      },\n      define: {\n        timestamps: false, // timestamps is set to 'off' default\n        freezeTableName: true // table name not add s in default\n      },\n      timezone: '+08:00'\n    }\n  }\n}\n\n// production env configuration\nif (!devMode) {\n  console.log('env production....')\n\n  // ==== configure database\n  config.DATABASE = {\n    ...config.DATABASE,\n    database: '', // database name\n    user: '', // user name\n    password: '' // password\n  }\n\n  // configure github auth\n  config.GITHUB.client_id = ''\n  config.GITHUB.client_secret = ''\n\n  // ==== configure token secret key\n  config.TOKEN.secret = ''\n\n  // ==== configure mailbox\n\n  // config.EMAIL_NOTICE.enable = true\n  config.EMAIL_NOTICE.transporterConfig.auth = {\n    user: '779087031@qq.com', // generated ethereal user\n    pass: 'f2bbfe7cf1bcb8253a65c06701fbbbbf8c910be44ecc1a430497d4879db0d71d' // generated ethereal password \n  }\n  config.EMAIL_NOTICE.WEB_HOST = 'https://panyunyi.cn'\n}\n\nmodule.exports = config\n\n```\n\n## Maintainers\n\n[@faultaddr](https://github.com/faultaddr)。\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=faultaddr/react-blog\u0026type=Date)](https://star-history.com/#bytebase/star-history\u0026Date)\n\n## Contributing\n\nFeel free to dive in! [open an issue](https://github.com/faultaddr/react-blog/issues/new) or submit PRs.\n\n\nReact-blog follows the  [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.\n\n\n## License\n\n[MIT](LICENSE) © Yunyi Pan\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaultaddr%2Freact-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaultaddr%2Freact-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaultaddr%2Freact-blog/lists"}