Code Monkey home page Code Monkey logo

react-blog's Introduction

React Blog

LICENSE 996.icu

For chinese , you can visit this 中文

One-click installation & 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!

This ReadMe file contains the following:

  1. How to install and deploy a blog
  2. How to configure front-end page information
  3. How to configure sensitive back-end information

Table of Contents

Background

React Blog was originally built on the basis of project alvin0216/react-blog which was created by 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.

In 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.

Install

If you want to deploy on the Centos server, you can directly use our one-click installation deployment script:

$ sh install.sh

If you want to install and configure yourself, use node,npm,yarn,forever for this project. Please make sure You have performed the correct installation locally.

$ npm install --global yarn
$ npm install --global forever

Usage

If you use the one-click installation script mentioned above, please pay attention to whether the port is occupied when starting later:

$ yum install lsof
$ lsof -i:80
$ lsof -i:6060

If there is port occupation, please end the process or change the port

Then execute the following instructions for production deployment

$ cd src
$ yarn build
$ nohup serve -s build -l 80 &
$
$ cd server
$ forever start app.js

Or for development environment deployment

$ cd src
$ nohup yarn dev
$
$ cd server
$ forever start app.js

Features and Personal Configuration

Features

  • Front Desk: Homepage + List Page + Search Page + Category Page + Tab Page
  • Backstage: article management + user management
  • Responsive, article anchor navigation, back to top, markdown code highlighting, mathjax support
  • Users: users on the site, users authorized to log in by a third-party github
  • Users can comment and reply, as well as the status of mail notification reply
  • md file import and export function! You can directly upload the md file to generate an article
  • Separation of private and public articles
  • One-click comment without registration
  • Homepage background
  • Top of article
  • Gossip
  • Get the mailbox secret dynamically
  • Password transmission encryption
  • Background chart
  • Share Link for the admain to manage the visiablity of the private article
  • Smart Recommendation (Related Recommendation)

Personalized Configuration

Personalized configuration is configured through src/config.js

import React from 'react'
import { Icon } from 'antd'
import SvgIcon from '@/components/SvgIcon'

import Href from '@/components/Href'
import MyInfo from '@/views/web/about/MyInfo'
import {GithubFill} from 'utils/antdIcon'
// API_BASE_URL
export const API_BASE_URL = 'http://120.79.229.207:6060'
// export const API_BASE_URL = 'http://127.0.0.1:6060'
// project config
export const HEADER_BLOG_NAME = '菜园子' // header title 

// === sidebar
export const SIDEBAR = {
    avatar: require('@/assets/images/avatar.jpeg'), // sidebar image
    title: '种菜的小朋友', // title
    subTitle: 'Carpe diem', // subtitle
    // personal website
    homepages: {
    github: {
        link: 'https://github.com/faultaddr',
        icon: <GithubFill className='homepage-icon' /> 
    },
    juejin: {
        link: 'https://juejin.im/user/96412755827687',
        icon: <SvgIcon type='iconjuejin' className='homepage-icon' />
    }
    },
    //frindslink in sidebar
    friendslink: {
    lizi: {
        link: 'http://blog.liziyang.co/',
        img: 'http://blog.liziyang.co/images/pikachu.jpg',
    },
    wizchen: {
        link: 'http://blog.wizchen.com',
        img: 'https://cdn.jsdelivr.net/gh/wizcheu/content1@main/img/header.gif'
    }
    }
}

// === discuss avatar
export const DISCUSS_AVATAR = SIDEBAR.avatar // your default avatar in comment line
/**
 * github config
 */
export const GITHUB = {
    enable: true, // github 第三方授权开关
    client_id: '87a4f88b943adaafd44a', // Setting > Developer setting > OAuth applications => client_id
    url: 'https://github.com/login/oauth/authorize' // github auth page
}

export const ABOUT = {
    avatar: SIDEBAR.avatar,
    describe: SIDEBAR.subTitle,
    discuss: true, // open the comment function on 'about me' page 
    renderMyInfo: <MyInfo /> // 我的介绍 自定义组件 => src/views/web/about/MyInfo.jsx
}

// 公告 announcement
export const ANNOUNCEMENT = {
    enable: true, // 是否开启
    content: (
    <>
        个人笔记网站,请访问
        <Href href='https://www.yuque.com/zhongcaidexiaopengyou/kb'> panyunyi's note</Href>
    </>
    )
}

Personalized Information Configuration

Personal information is configured through src/view/web/about/index.jsx

import React from 'react'

// components
import { Divider, Rate, Icon, Avatar } from 'antd'
import Href from '@/components/Href'
import SvgIcon from '@/components/SvgIcon'
// rate is the star
// label is your skills
const skills = [
  {
    label: '具备扎实的Java功底,熟练了解各种特性',
    rate: '5'
  },
  {
    label: '具备扎实的Python功底,熟练了解各类特性',
    rate: '5'
  },
  {
    label: '具备扎实的 Javascript 基础,熟练使用 ES6+ 语法。',
    rate: 4
  },
  {
    label: '具备不那么扎实的 C++ 基础,没熟练了解各类特性',
    rate: 3
  },
  {
    label: 'Android 顶级玩家',
    rate: 5
  },
  {
    label: '熟悉 React 并理解其原理,熟悉 Vue 框架及其用法。',
    rate: 5
  },
  {
    label: '熟悉 Flask/Django 并理解其原理,熟悉各类用法。',
    rate: 5
  },
  {
    label: 'Spring 全家桶爱好者,后端中级开发者,netty/kafka/hadoop/Storm/Spark',
    rate: '3'
  },
  {
    label: '3D 轻量级玩家,openGL小菜,3D shape segmentation & 3D scene segmentation',
    rate: '3'
  },
  {
    label: '熟练使用 Webpack 打包工具,熟悉常用工程化和模块化方案。',
    rate: 4
  },
  {
    label: '熟悉 Koa、Mysql,针对需求可以做到简单的数据库设计、接口的开发与设计!',
    rate: 3
  },
  {
    label: '熟悉 HTTP 协议,缓存、性能优化、安全等,了解浏览器原理。',
    rate: 4
  },
  {
    label: '熟悉常用的算法与数据结构',
    rate: 3
  }
]

const MyInfo = () => {
  return (
    <>

      <Divider orientation='center'>关于我</Divider>

      <ul className='about-list'>
        <li>Name:潘云逸</li>
        <li>Bachelor: **财经大学(CUFE)CS</li>
        <li>Master: 南京大学(NJU)CS</li>
        <li>
          Contact me:
          <Icon type='qq' /> 779087031
          <Divider type='vertical' />
          <SvgIcon type='iconemail' style={{ marginRight: 5, transform: 'translateY(2px)' }} />
          <a href='mailto:[email protected]'>[email protected]</a>
        </li>
        <li>Work Base:ShangHai</li>
        <li>
          friends link:
          <Href href='http://blog.liziyang.co/'>栗子栗子</Href>
          <Divider type='vertical' />
        </li>
        <li>
          skills
          <ul>
            {skills.map((item, i) => (
              <li key={i}>
                {item.label}
                <Rate defaultValue={item.rate} disabled />
              </li>
            ))}
          </ul>
        </li>
        <li>
          others
          <ul>
            <li>常用开发工具: idea、pycharm、vim、vscode、webstorm、git</li>
            <li>熟悉的 UI 框架: antd、element-ui</li>
            <li>具备良好的编码风格和习惯,团队规范意识,乐于分享</li>
          </ul>
        </li>
        <li>
          publication
          <ul>
            <li>ICPR 2020: Two Stage Scene Segmentation Base on Self-attention Mechanism</li>
            <li> 安徽大学学报: 图核综述 </li>
            <li> 专利: 一种基于机器学习的CME事件跟踪方法 </li>
            <li> 译著: 计算机视觉基础 </li>
          </ul>
        </li>
      </ul>
    </>
  )
}

export default MyInfo

Background sensitive information configuration

Sensitive 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.

const devMode = process.env.NODE_ENV === 'development'
const config = {
  PORT: 6060, // start port
  ADMIN_GITHUB_LOGIN_NAME: 'faultaddr', // your github name
  GITHUB: {
    client_id: '87a4f88b943adaafd44a',
    client_secret: '9494809fc485d93084452fbf8b21ba2a829bfb82',
    access_token_url: 'https://github.com/login/oauth/access_token',
    fetch_user_url: 'https://api.github.com/user', // 用于 oauth2
    fetch_user: 'https://api.github.com/user' // fetch user url https://api.github.com/users/gershonv
  },
  EMAIL_NOTICE: {
    // mail notification
    // detail: https://nodemailer.com/
    enable: true, // switcher
    transporterConfig: {
      host: 'smtp.qq.com',
      port: 465,
      secure: true, // true for 465, false for other ports
      auth: {
        user: '[email protected]', // generated ethereal user
        pass: 'f2bbfe7cf1bcb8253a65c06701fbbbbf8c910be44ecc1a430497d4879db0d71d' // generated ethereal password 
      }
    },
    subject: 'panyunyi的博客 - 您的评论获得新的回复!', // subject for the notification mail
    // main content of the mail
    text: '您的评论获得新的回复!',
    WEB_HOST: 'http://www.panyunyi.cn' // email callback url
  },
  TOKEN: {
    secret: 'root', // secret is very important!
    expiresIn: '720h' // token exist time
  },
  DATABASE: {
    database: 'test',
    user: 'root',
    password: '123456Root!',
    options: {
      host: 'localhost', //  host ip
      dialect: 'mysql', // sql dilect
      pool: {
        max: 5,
        min: 0,
        acquire: 30000,
        idle: 10000
      },
      define: {
        timestamps: false, // timestamps is set to 'off' default
        freezeTableName: true // table name not add s in default
      },
      timezone: '+08:00'
    }
  }
}

// production env configuration
if (!devMode) {
  console.log('env production....')

  // ==== configure database
  config.DATABASE = {
    ...config.DATABASE,
    database: '', // database name
    user: '', // user name
    password: '' // password
  }

  // configure github auth
  config.GITHUB.client_id = ''
  config.GITHUB.client_secret = ''

  // ==== configure token secret key
  config.TOKEN.secret = ''

  // ==== configure mailbox

  // config.EMAIL_NOTICE.enable = true
  config.EMAIL_NOTICE.transporterConfig.auth = {
    user: '[email protected]', // generated ethereal user
    pass: 'f2bbfe7cf1bcb8253a65c06701fbbbbf8c910be44ecc1a430497d4879db0d71d' // generated ethereal password 
  }
  config.EMAIL_NOTICE.WEB_HOST = 'https://panyunyi.cn'
}

module.exports = config

Maintainers

@faultaddr

Star History

Star History Chart

Contributing

Feel free to dive in! open an issue or submit PRs.

React-blog follows the Contributor Covenant Code of Conduct.

License

MIT © Yunyi Pan

react-blog's People

Contributors

faultaddr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react-blog's Issues

Github Contribution Disappear

Describe the bug
github contribution panel has disappeared, double check why?

To Reproduce
Steps to reproduce the behavior:

  1. open the index page

Expected behavior
show the contribution panel not the 404 toast

使用useRoutes 渲染出来的react-canvas-nest 就渲染不出来?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Information desensitization

Now, the configuration information is related with my own blog, In order to avoid leaking my own info && prevent someone who just want to test on my production env.

remove sensitive information ASAP !!!

Add Traffic statistics

Traffic statistics

now, traffic statistics is not avaliable in first page and web content, it's only exists in back-end panel for admin users.

Expected result

show in first page, and add some plot.

doc sorted issues

doc sorted issues

Description:

when I open the page of doc Archive, I found that there are some problems with the page rank.

Preview Pics:

image

donate support

Features to be added

  • donate support
    if you find the website or some page is useful for you, maybe u can buy me a cup of coffee.

Optimize install scripts

The install scripts has missing some install commands.

yum install wget
yum install vim

The Last but not least:

Change the Centos to Alibaba Linux or RedHat. Because Centos now is out of date and no longer maintained.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.