React-blog builds its own blog

Write ahead: Tired of wordpress, Hexo, and various other blogging frameworks, it’s time to get out of the box and start a blog of your own!

My blog is www.panyunyi.cn

The blog’s Github address is github.com/panyunyi97/…

Welcome to Star & PR

I used dumb blogs like wordpress and Hexo before trying to build a blog that was completely my own and controllable. However, this kind of customized blog can not completely meet my needs, I hope my own blog in my hands completely controllable, a bit can be controlled by me, so as to appear at ease and comfortable. As a developer, your blog is your Resume, not only informative, but also beautiful and controllable, so I suggest you build your own blog!

Before launching, I was ambitious and tried to build it from scratch, but it turned out to be too expensive and time-consuming, so I decided to steal github and find a React Blog that suited my aesthetic. Luckily, I found one that worked.

With this original blog, I started my own custom blog.

First, let me show you the final results:

And the functions achieved at a glance:

Realize the function

Technology stack

Front end (configuration based on create-React-app ject)
- The react v16.9.0hooks + redux + react-router4
- marked highlight.js
- webpackPackaging optimization
- axiosencapsulation
Backend (self-built backend project)
- koa2 + koa-router
- sequelize + mysql
- jwt + bcrypt
- nodemailer
- koa-send archiver

The project structure

. │ ├ ─ config// Build the configuration├ ─ public/ / HTML entrance├ ─ scripts// Project script└ ─ server/ / the back end├ ─ config// Project configuration github, email, database, token-secret, etc├ ─ controllers// Business control layer├ ─ middlewares/ / middleware├ ─ models// Database model├ ─ the router/ / routing├ ─ utils/ / toolkit├ ─ app. Js// back end main entry file├ ─ initData. Js// Initialize the underlying data script└ ─... │ └ ─ the SRC// Front-end project source code├ ─ assets// Static file├ ─ components// Common components├ ─ layout// Layout components├ ─ redux/ / redux directory├ ─ routes/ / routing├ ─ styles/ / style├ ─ utils/ / toolkit├ ─ views/ / the view layer├ ─ App. JSX// back end main entry file├ ─ config. Js// Project configuration Github homepage, personal profile, etc├ ─ index. Js// Main entry file└ ─...Copy the code

Blog transformation process overview

Customized page transformation
Feature fixes and additions
Fill in personal information
Small eggs

Customized page transformation

In order to be more suitable for their own use scenarios, the page for some customized transformation

Page background (written as configurable and detachable)

Here is one of my favorite images: the cover image

Page dynamic effect

Plus the flip scroll stick that many blogs have! Isn’t it great!

Feature fixes and additions

To isolate blog owners from readers, the role field is added for control.

Public and Private articles:

Blog is not only a place to show oneself and record notes, but also a tree hole of personal feelings, a big net woven by memories. Therefore, it is necessary to separate public and private articles and return corresponding data according to user role authentication. This protects privacy and allows blog owners to wear their pants
Markdown editor MathJax support

Because bloggers are weak scientific research enthusiasts, writing formulas is even more necessary. The react-Blog I found before had some defects in this function and could not effectively support MathJax, so some changes were made and some simple encapsulation of the React-Simplemde-Editor was implemented. Make it MathJax preview support, and code the article display with marked so that MathJax can be displayed effectively.

The specific implementation

   export const translateMarkdown2html = (plainText, isGuardXss = false) = > {
   const marked_render = new marked.Renderer()
   marked_render.old_paragraph = marked_render.paragraph
   // Rewrite the 'paragraph()' method
   marked_render.paragraph = function(text) {
     // isTeXInline - Whether the text has an inline formula
     var isTeXInline = /\$(.*)\$/g.test(text)
     // isTeXLine - Whether the text has an interline formula
     var isTeXLine = /^\$\$(\s*.*\s*)\$\$$/.test(text)

     if(! isTeXLine && isTeXInline) { wraps the contents of the formula, eliminating the $delimiter
       text = text.replace(/(\$([^\$]*)\$)+/g.function($1, $2) {
         // Avoid conflicts with inline code
         if ($2.indexOf('<code>') > =0| | $2.indexOf('</code>') > =0) {
           return $2
         } else {
           return '<span class=\'marked_inline_tex\'>' + $2.replace(/\$/g.' ') + '</span>'}})}else {
       // If it is an interline formula, wrap the formula content with 
      
       , eliminating the $$delimiter
      
       // If it is not a LaTex formula, the original text is returned
       text = (isTeXLine) ? '<div class=\'marked_tex\'>' + text.replace(/\$/g.' ') + '</div>' : text
     }
     // Render the entire text using the renderer's original 'Paragraph ()' method
     text = this.old_paragraph(text)
     return text
   }
   // Configure marked. Js with marked_render and use highlight.js to automatically highlight code in MarkDown

   return marked(isGuardXss ? xss(plainText) : plainText, {
     renderer: marked_render,
     pedantic: false.gfm: true.tables: true.breaks: false.sanitize: false.smartLists: true.smartypants: false.xhtml: false.highlight: function(code) {
       /*eslint no-undef: "off"*/
       return hljs.highlightAuto(code).value
     }
   })
   }
Copy the code

The article set-top

Top posts are a must-have feature, and when you have something you’re proud of, you want it to be a higher priority and help more people, so add this feature
A key review

This is for the convenience of friends to be able to comment more quickly, because if you let friends register, there is a risk of password and password leakage, so you can directly use the user name and QQ mailbox (convenient to get the avatar) for quick comment, the background will automatically register and log in to the user.
Making the login:

The previous blog login method has been removed, so a new login method has been updated:

Github oAuth2 authentication
Gossip:

This module is to simulate the information flow mode to leave the independent space for the blog owner, can release the mood and feelings, better improve the complete function of blog ———— record good life.
Background management:

Fill in personal information

We have made a lot of things fully configurable such as friendlink, avatar, etc. If you don’t like to play, you can plug and play. Mysql/NPM/YARN can be used with one click, and there will be one click installation in the future.

  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'

  // 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 = 'Vegetable garden' // header title Specifies the name to display

  // === sidebar
  export const SIDEBAR = {
    avatar: require('@/assets/images/avatar.jpeg'), // Sidebar avatar
    title: 'Growing Vegetables'./ / title
    subTitle: 'Carpe diem'./ / subheadings
    // Personal homepage
    homepages: {
      github: {
        link: 'https://github.com/panyunyi97'.icon: <Icon type='github' theme='filled' className='homepage-icon' />
      },
      juejin: {
        link: 'https://juejin.cn/user/96412755827687'.icon: <SvgIcon type='iconjuejin' className='homepage-icon' />}},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 // Comment box the blogger's avatar

  /** * github config */
  export const GITHUB = {
    enable: true.// Enable github third-party authorization switch
    client_id: '87a4f88b943adaafd44a'.// Setting > Developer setting > OAuth applications => client_id
    url: 'https://github.com/login/oauth/authorize' // Jump to the login address
  }

  export const ABOUT = {
    avatar: SIDEBAR.avatar,
    describe: SIDEBAR.subTitle,
    discuss: true.// Whether the page is open for discussion
    renderMyInfo: <MyInfo /> / / I introduce custom components = > SRC/views/web/about/MyInfo JSX
  }

  / / notice announcement
  export const ANNOUNCEMENT = {
    enable: true.// Whether to enable
    content: (
      <>Personal notes website, please visit<Href href='https://www.yuque.com/zhongcaidexiaopengyou/kb'> panyunyi's note</Href>
      </>)}Copy the code

The small egg:

The author himself is just a front-end beginner, so some places to write is not very rigorous, but also hope everyone to forgive, more issue, more PR!

Follow-up function supplement (in constant update) :

— — — — — 2021.1.18 — — — — —

Recently took some time off to fix some known bugs, including but not limited to:

The plaintext transmission password is changed to AES encryption twice
When commenting on the article, I checked my QQ mailbox
IMTP authorization code is encrypted AES to prevent theft
Fixed an issue with SimpleMDE’s CSS CDN being harmonized by GFW, instead loading locally
Added gossip background edit page

At the request of many partners, a test page is opened, which can be used for everyone to test. The address is the test address

The user name that has administrator rights is admin

The password is admin

Write in the back

Thanks again to Alvin0216, I’m just picking apples on the shoulders of others.

These are the general functions, which are fully capable of covering daily work and sharing requirements, supporting online Markdown editing, import and export.

Hope everyone can have their own blog soon!

Attached again is the blog’s Github address and welcome to Star & PR

Realize the function

Technology stack

The project structure

Blog transformation process overview

Customized page transformation

Feature fixes and additions

Fill in personal information

The small egg:

Follow-up function supplement (in constant update) :

Related Posts

Serverless Small Experiment 1: A measurement of python dependency loading time using the EFS file system lambda function in AWS

A card game entry CSS3 3D transformation

Redux, React-redux, redux-thunk, redux-saga analogy learning