Several construction schemes

1 Third-party Platform

Create a profile on an existing blog site, forum or community. Such as Zhihu, Nuggets, Jianshu, segmentFault, CSDN, blog park and so on.

Features: No technical barriers, can focus on content.

Static web site generation technology

Execute commands in terminal to quickly generate static websites such as Jekyll, Hugo, Hexo, etc. Github Pages, Coding, etc.

Features: Add comments, search, analysis and other functions through plug-ins. There are many themes to choose from. Write the article locally in a specific format and place it in a specified folder. The site needs to be regenerated and deployed every time an article is published or modified.

Static and dynamic websites

Static website is the original way to build a site, the visitors see each page is the site builder uploaded to the server on an HTML file, every increase, delete, modify a page, must be re-download the server file upload.

“Dynamic” in dynamic web pages refers to the dynamic generation of pages. Dynamic web page is based on database technology. When the browser requests a page from the server, the server dynamically generates THE HTML page according to the current time, environment parameters, database operations and so on, and then sends it to the browser.

Content management system CMS

Can build enterprise website, blog is just one of the functions. Such as WordPress, Ghost and so on.

Features: with background management blog system. In the background can manage articles, albums, themes, multi-user management and so on. Need to configure the database, domain name, server (charge). After one configuration, you can realize various operations in the background interface.

Domain Name and Hosting

Usually build dynamic website need to buy domain name and website space (or host, server). Static websites require less resources and can be deployed for free on Github Pages and Coding.

With web space, there is IP address. As long as your service is running on the host, others can access your website through IP. Common forms of website space purchase are: shared hosting, VPS, cloud hosting and dedicated hosting.

Having a domain name gives IP addresses a personalized alias, allowing you to access Google sites using Google.com instead of 216.58.213.164.

4 Handwritten front end

From scratch to fully handwritten pages, the original can be directly written CSS + HTML + javascript, or SPA frameworks such as vue.js, react.js. Github Pages, Coding, etc.

Features: can be fully customized, suitable for front-end programmer practice projects. Similar to Scheme 2.

5 Handwriting front end + back end

Custom front-end page, custom background processing request, database structure. Then configure the domain name and server.

Back-end languages such as PHP, NodeJs, Java, Python, and related frameworks such as Laravel, Express, Spring Boot, Django, etc. Common databases include MySQL, PostgrcSQL, Redis, MongoDB, etc.

Features: You can experience the complete site construction process, towards the road of full stack. Similar to Plan 3.

Using lot issues

“Issue” refers to the work to be done on a project and can also serve as user feedback. Many people now use Issue to blog as well.

  • Easy to use and easy to maintain, do not need domain name, server, database. Only need to write front-end page, with issues background management. You can even blog about issues without writing a front page.
  • With its own comment and favorites system, readers’ feedback can inspire the author to keep writing.

I recently learned React, so I chose to use React. Js to write front-end code and deploy it on Github Pages. Using Github Issues as the background, I completed front-end and back-end interaction through Github API.

Because the usual use is Vue, so also implemented Vue version.

1 react-demo 2 vue-demo 3 react-code 4 vue-code

The page styles are almost identical. The following describes the React version.

Project introduction

function

  • Code highlighting

  • responsive

  • Article anchor navigation

  • Back to the top

  • Comment on jump

The minimalist

Minimal pages, minimal code. With the most streamlined code, to achieve the most needed functions.

  • 3 pages: Issue List, Issue Content, About
  • 5 files: posts.js, post.js, postcontent.js, about.js, catalog.js

Define it as your blog

Local preview

git clone [email protected]:kelyu0/react-issue-blog.git
cd react-issue-blog
npm install 
npm run start
Copy the code

The browser can be started locally by opening http://localhost:3000.

The custom

Change the content in SRC /config.js to make it your own blog (need a repository with issues on Github).

export const config = {
  // Your Github UserName
  githubUserName: "kelyu0".// Your Github Repo Name Where You Have your issues as Blog
  githubRepo: "articles".// About Page links
  thirdPartySite: [{href: "https://github.com/kelyu0".title: "GitHub",},//Other sites ...]};Copy the code

Build and deploy

Construction:

NPM run build Generates the build folder

Deployment:

  1. Create a repository on Github named Github. Your_username. IO
  2. Copy the contents of build folder to github. Your_username. IO repository and push it to remote location.
  3. Access to the lot. Your_username. IO