cms网站内容如何自定义(动态网页中的搭建方案(一)_几种搭建_)

　　cms网站内容如何自定义(动态网页中的搭建方案(一)_几种搭建_)

　　简介本文文章主要介绍如何搭建个人博客：几种方案对比+个人实现及相关经验技巧，文章字数约2920字，浏览量374，喜欢是9，值得推荐！

　　几种构建方案 1 第三方平台

　　在*敏*感*词*、简书、segmentFault、csdn、博客园等。

　　特点：没有技术壁垒，可以专注于内容。

　　2 静态网站生成技术

　　在终端执行命令快速生成静态网站，如Jekyll、Hugo、Hexo等，然后通过Github Pages、Coding等展示。

　　特点： 通过插件添加评论、搜索、分析等功能。有多种主题可供选择。将文章以特定格式写入本地，放在指定文件夹中。每次发布或修改文章，都需要重新生成和部署网站。

　　静态 网站 和动态 网站

　　静态网站 是建立网站的原创方式。查看者看到的每个页面都是一个由站点构建器上传到服务器的 html 文件。每次添加、删除或修改页面时，都必须重新检查服务器的文件。一次下载和上传。

　　动态网页中的“动态”是指页面的动态生成。动态网页基于数据库技术。当浏览器向服务器请求页面时，服务器根据当前时间、环境参数、数据库操作等动态生成HTML页面，然后发送给浏览器。

　　3 内容管理系统cms

　　可以搭建企业级网站，博客只是功能之一。如 Wordpress、Ghost 等。

　　特点： 后台管理的博客系统。可以在后台管理文章、相册、主题、多用户管理等。需要配置数据库、域名、服务器（收费）。配置完成后，可以在后台界面上实现各种操作。

　　域名（Domain Name）和网站空间（托管）

　　通常，要构建动态网站，需要购买域名和网站空间（或主机、服务器）。静态 网站 需要更少的资源，可以在 Github Pages 和 Coding 上免费部署。

　　有了网站空间，就会有一个ip地址。只要你的服务在主机上运行，​​其他人就可以通过ip访问你的网站。常见的网站空间购买形式有：共享主机、VPS、云主机和专用主机。

　　有了域名，你可以给你的ip地址一个人性化的别名，让你访问Google网站而不是216.58.213.164。

　　4 手写前端

　　完全从头开始手写页面，原创的可以直接用css+html+javascript编写，也可以使用Vue.js、React.js等SPA框架。然后通过 Github Pages、Coding 等方式展示。

　　特点：可完全定制，适合前端程序员实践项目。类似于场景2。

　　5 手写前端+后端

　　自定义前端页面，自定义后台处理请求方式，以及数据库结构。然后配置域名和服务器。

　　PHP、NodeJs、Java、Python等后端语言，相关框架有Laravel、Express、Spring Boot、Django等，常用的数据库有MySQL、PostgrcSQL、Redis、MongoDB等。

　　特点： 可以体验完整的建站流程，迈向全栈。类似于场景3。

　　利用github问题

　　问题是指项目上要完成的工作，也可以承担用户反馈的角色。现在很多人使用 Issue 来写博客。

　　最近在学习React，所以选择使用React.js编写前端代码并部署在Github Pages上，使用Github Issues作为后端，通过Github API完成前后端交互。

　　因为平时用的是Vue，所以也实现了Vue版本。

　　1 反应演示 2 vue 演示

　　3 反应代码 4 Vue 代码

　　两者的页面样式几乎相同。下面介绍react版本。

　　项目介绍功能极其简单

　　页面极小，代码极少。用最精简的代码实现最需要的功能。

　　定义为您博客的本地预览

　　git clone git@github.com:kelyu0/react-issue-blog.git

cd react-issue-blog

npm install

npm run start

　　打开浏览器：3000本地启动。

　　定制

　　更改 src/config.js 中的内容并自定义它以成为您的博客（您需要在 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 ...

],

};

　　构建和部署

　　构造：

　　npm run build 生成构建文件夹

　　部署：

　　在 Github 上新建一个名为 github.your_username.io 的仓库，将 build 文件夹的内容复制到 github.your_username.io 仓库，并推送到远程。访问 github.your_username.io