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:
- Create a repository on Github named Github. Your_username. IO
- Copy the contents of build folder to github. Your_username. IO repository and push it to remote location.
- Access to the lot. Your_username. IO